and the submit button are full-width elements
that should always sit on their own row — without this, whichever grid
item happens to land in the same row as them (parity depends on whether
a given provider needs a base_url field) gets stretched to match the
element's height once it's expanded open. */
.provider-settings-form .provider-secret-box,
.provider-settings-form > button { grid-column: 1 / -1; }
.routing-flow { flex-wrap: wrap; }
.routing-arrow { color: var(--accent); font-weight: 900; }
.release-status-list { display: grid; gap: 7px; }
.release-status-list > div { padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.012); }
/* AI Güvenlik ve Suistimal Bildirimleri — risk şeritli, sabit ızgaralı düzen.
Grid kullanılıyor (flex değil) ki avatar/rozetler hiçbir genişlik veya tema
kombinasyonunda taşamasın; risk seviyesi sol kenar rengiyle tek bakışta
ayırt edilir. */
.ai-security-center .security-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.ai-security-center .security-metric-grid > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.ai-security-center .security-metric-grid span { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .04em; }
.ai-security-center .security-metric-grid b { display: block; margin-top: 6px; font-size: 1.35rem; }
.ai-security-list { display: grid; gap: 10px; }
.ai-security-event { position: relative; padding: 14px 16px 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.ai-security-event.risk-high, .ai-security-event.risk-critical { border-left-color: #ED4245; }
.ai-security-event.risk-medium { border-left-color: #F0A32C; }
.ai-security-event.risk-low { border-left-color: #57A6F2; }
.ai-security-event.status-resolved, .ai-security-event.status-ignored { opacity: .6; }
.ai-security-event .security-event-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.ai-security-event .security-user { display: contents; }
.ai-security-event .security-user > img, .ai-security-event .security-user > span { width: 40px; height: 40px; max-width: 40px; max-height: 40px; flex-shrink: 0; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--panel-3); font-weight: 800; overflow: hidden; }
.ai-security-event .security-user > div { min-width: 0; overflow: hidden; }
.ai-security-event .security-user b, .ai-security-event .security-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-security-event .security-user small { color: var(--muted); }
.ai-security-event .security-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; min-width: 0; }
.ai-security-event .security-badges em, .ai-security-event .security-rule-tags span { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel-3); font-size: .6rem; font-style: normal; font-weight: 650; white-space: nowrap; }
.ai-security-event .risk-badge { color: #fff; border-color: transparent; background: var(--muted); }
.ai-security-event.risk-high .risk-badge, .ai-security-event.risk-critical .risk-badge { background: #ED4245; }
.ai-security-event.risk-medium .risk-badge { background: #F0A32C; color: #1a1200; }
.ai-security-event.risk-low .risk-badge { background: #57A6F2; color: #04121f; }
.ai-security-event .security-event-body { margin-top: 10px; padding: 10px 0 0; display: grid; gap: 6px; }
.ai-security-event .security-event-body > p { margin: 0 0 2px; padding: 8px 10px; border-left: 2px solid var(--line); border-radius: 0 8px 8px 0; background: var(--panel-3); color: var(--text); font-size: .82rem; overflow-wrap: anywhere; }
.ai-security-event .security-event-body > small { display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--muted); font-size: .68rem; }
.ai-security-event .security-event-body > small b { color: var(--text-soft); font-weight: 650; }
.ai-security-event .security-rule-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ai-security-event .security-event-actions { margin-top: 12px; padding-top: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
.ai-security-center .security-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-security-event .security-event-head { grid-template-columns: 40px minmax(0, 1fr); }
.ai-security-event .security-badges { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; }
}
/* Preview and editor canvases */
.preview-grid { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 10px; }
.preview-side, .preview-main, .preview-top, .preview-body, .preview-hero, .preview-chart { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.preview-side, .preview-main { min-height: 300px; padding: 10px; }
.preview-top { min-height: 42px; margin-bottom: 9px; }
.preview-hero { min-height: 92px; margin-bottom: 9px; }
.preview-body { min-height: 135px; }
.preview-chart { min-height: 110px; }
@media (max-width: 1180px) {
.ai-control-hero { grid-template-columns: 1fr; }
.ai-control-hero .ai-mode-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
.metric-grid.ai-metrics, .ai-runtime-strip, .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.template-grid, .template-grid-modern, .ticket-pro-overview, .ticket-type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
.ai-control-hero .ai-mode-overview, .metric-grid.ai-metrics, .ai-runtime-strip, .stats-grid, .template-grid, .template-grid-modern, .ticket-pro-overview, .ticket-type-grid, .provider-settings-form, .setup-quick-templates { grid-template-columns: 1fr; }
.unified-brain-toolbar, .setup-workflow, .preview-grid { grid-template-columns: 1fr; }
.security-event-head { align-items: flex-start; flex-direction: column; }
.security-event-actions { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 940px) {
.topbar { padding-inline: 10px; gap: 8px; }
.topbar .brand > span, .topbar .kara-current-guild-copy, .topbar .status-dot, .topbar .premium-chip, .topbar .admin-chip, .topbar .v14-lang { display: none; }
.topbar .brand-logo { width: 34px; height: 34px; }
.topbar .kara-current-guild-chip { width: 40px; padding: 4px; justify-content: center; }
.topbar .kara-current-guild-avatar { width: 30px; height: 30px; }
.topbar .top-actions { margin-left: auto; gap: 6px; }
.topbar .kara-account-trigger { width: 40px; padding: 4px; justify-content: center; }
.topbar .kara-account-trigger-copy, .topbar .kara-account-trigger > i { display: none; }
.mobile-head { min-height: 44px; margin-bottom: 10px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); display: flex; align-items: center; gap: 9px; }
.mobile-head button { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.mobile-head b { font-size: .74rem; }
}
/* v42 remaining page families */
.k39-grid, .k39-security-points, .permission-check-grid, .billing-check-grid, .connection-checklist, .backup-scope-grid, .automation-grid, .authority-grid, .application-grid, .marketplace-grid, .founder-server-grid, .kara25-integration-panels {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 11px;
}
/* .founder-server-grid'in kart iceriği (article) hic stillenmemisti - grubu
yalnizca disaridaki grid sarmalayici tanimliyordu. Discord ikonu olan
sunucular ![]()
'in kendi dogal boyutuyla (64x64) "calisiyormus" gibi
duruyordu ama ikonu olmayanlar (.server-fallback tek harf ) sifir
kutu boyutuyla ciplak, kirpik metin olarak goruluyordu. Artik ikisi de
ayni 52px yuvarlak kutuda tutarli goruyor. */
.founder-server-grid > article { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--v43-line); border-radius: 13px; background: var(--v43-surface-2); transition: border-color 140ms ease; }
.founder-server-grid > article:hover { border-color: var(--v43-line-strong); }
.founder-server-grid > article img,
.founder-server-grid .server-fallback { flex: none; width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.founder-server-grid .server-fallback { display: grid; place-items: center; background: color-mix(in srgb, var(--v43-accent) 14%, var(--v43-surface-3)); color: var(--v43-accent); font-size: 1.15rem; font-weight: 800; }
.founder-server-grid > article > div { min-width: 0; }
.founder-server-grid > article b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.founder-server-grid > article small { display: block; margin-top: 2px; color: var(--v43-muted); font-size: .68rem; }
.founder-server-grid > article code { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v43-dim); font-size: .58rem; }
.founder-server-grid > article a { flex: none; margin-left: auto; padding: 7px 13px; border: 1px solid var(--v43-line); border-radius: 9px; color: var(--v43-ink); font-size: .68rem; font-weight: 700; white-space: nowrap; transition: all 140ms ease; }
.founder-server-grid > article a:hover { border-color: var(--v43-accent); color: var(--v43-accent); background: color-mix(in srgb, var(--v43-accent) 8%, transparent); }
@media (max-width: 560px) {
.founder-server-grid > article { flex-wrap: wrap; }
.founder-server-grid > article a { margin-left: 64px; }
}
.k39-list, .k39-ticket-checklist, .kara-auth-security-list, .authority-template-list, .authority-assignment-list, .application-form-list, .application-submission-list, .backup-list, .notification-list, .ops-team-list, .ops-service-list, .ops-roster-card, .ops-leader-list, .ops-reason-list, .group-list, .ai-security-list, .kara18-health-list, .founder-policy-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.k39-trust-row, .k39-security-note, .kara25-readiness-strip, .ai-global-policy-strip, .metric-strip, .billing-adapter-state, .backup-hero-status, .quality-center-badge {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--panel-2);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
color: var(--muted);
font-size: .68rem;
}
.k39-trust-row span { display: inline-flex; align-items: center; gap: 5px; }
.page-heading { margin-bottom: 15px; }
.page-heading h1 { margin: 0 0 7px; font-size: clamp(1.65rem,3vw,2.4rem); }
.page-heading p { max-width: 860px; margin-bottom: 0; }
.k39-security-page { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 20% 15%,rgba(192,138,46,.1),transparent 30rem),var(--bg); }
.k39-security-shell { width: min(100%,1040px); display: grid; grid-template-columns: minmax(300px,.8fr) minmax(420px,1.2fr); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-lg); }
.k39-security-brand, .k39-security-form { min-width: 0; padding: 38px; }
.k39-security-brand { background: linear-gradient(145deg,rgba(192,138,46,.1),rgba(78,156,134,.055)),var(--bg-elevated); }
/* .k39-security-logo is a
holding an ![]()
+ a wordmark , not
a bare image — this rule used to size the DIV itself to 64x64 with
object-fit (an ![]()
-only property), squeezing both children into a
tiny box and wrapping the wordmark over the content below it. */
.k39-security-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.k39-security-logo img { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; flex: none; }
.k39-security-logo span { font-weight: 800; font-size: .78rem; letter-spacing: .06em; color: var(--text); }
.k39-security-card { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); }
.k39-security-back { display: inline-flex; margin-bottom: 15px; color: var(--muted); font-size: .7rem; }
.k39-profile-form { display: grid; gap: 14px; }
.k39-compare-head, .k39-compare-row { min-width: 760px; display: grid; grid-template-columns: minmax(240px,1.3fr) repeat(3,minmax(130px,.55fr)); }
.k39-compare-head > *, .k39-compare-row > * { padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.k39-compare-head { color: var(--dim); background: var(--panel-2); font-size: .62rem; font-weight: 850; }
.k39-issue-body { display: grid; gap: 7px; }
.marketplace-hero, .notification-hero, .authority-hero, .backup-command-hero, .ops-suite-hero, .ops-suite-hero-compact {
margin-bottom: 14px;
padding: 20px;
border: 1px solid var(--line-strong);
border-radius: 17px;
background: linear-gradient(120deg,rgba(192,138,46,.07),rgba(78,156,134,.04)),var(--panel);
}
.market-card, .kara25-integration-panel, .backup-primary-card, .backup-policy-card, .backup-history-card, .custom-bot-connection-card, .staff-ai-card, .theme-impact-card, .log-master-card, .legacy-card, .billing-readiness-panel {
min-width: 0;
padding: 14px;
border: 1px solid var(--line);
border-radius: 13px;
background: var(--panel);
}
.market-card { display: flex; flex-direction: column; gap: 9px; }
.market-meta, .market-footer, .kara25-integration-actions, .notification-actions, .authority-actions, .backup-file-actions, .backup-history-head, .application-form-head, .appearance-preview-head, .appearance-preview-meta, .custom-bot-connect-actions, .ops-suite-actions {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 9px;
}
.market-footer { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); }
.backup-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr); gap: 14px; }
.backup-secondary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.backup-history-card { grid-column: 1 / -1; }
.backup-scope-grid > label { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.preview-backup { padding: 10px; border: 1px dashed var(--line-strong); border-radius: 10px; background: rgba(192,138,46,.025); }
.authority-grid, .application-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
.authority-template-list > div, .authority-assignment-list > div, .application-form-list > div, .application-submission-list > div, .notification-list > div, .ops-team-list > div, .ops-service-list > div, .ops-leader-list > div, .ops-reason-list > div {
padding: 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel-2);
}
.permission-details { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.012); }
.custom-bot-layout, .custom-bot-workspace, .appearance-editor-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: 14px; }
.custom-bot-preview-column, .appearance-live-preview { position: sticky; top: calc(var(--panel-header) + 16px); align-self: start; }
.bot-live-preview { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-sm); }
.bot-preview-banner { min-height: 110px; background: linear-gradient(135deg,rgba(192,138,46,.18),rgba(78,156,134,.12)); }
.bot-preview-body { position: relative; padding: 0 15px 16px; }
.bot-preview-avatar-wrap { width: 76px; height: 76px; margin-top: -38px; margin-bottom: 10px; border: 4px solid var(--panel); border-radius: 21px; overflow: hidden; background: var(--panel-3); }
.bot-preview-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.bot-preview-title, .bot-preview-activity, .bot-preview-brand { display: flex; align-items: center; gap: 7px; }
.bot-preview-activity { margin-top: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.notification-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.ops-suite-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ops-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ops-chip-list span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .58rem; }
.ops-data-table { overflow-x: auto; }
.moderation-rule-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.appearance-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.appearance-live-preview { padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.appearance-preview-head, .appearance-preview-meta { padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.kara-v303-platform-flow, .kara-v303-architecture-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.kara-v303-platform-flow > *, .kara-v303-architecture-flow > * { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.kara-v303-identity-head, .kara-v303-hub-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kara-v303-projects-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.kara-auth-providers { display: grid; gap: 8px; }
.kara-auth-details { display: grid; gap: 7px; margin-top: 12px; }
@media (max-width: 1080px) {
.k39-grid, .k39-security-points, .permission-check-grid, .billing-check-grid, .connection-checklist, .backup-scope-grid, .automation-grid, .marketplace-grid, .founder-server-grid, .kara25-integration-panels, .kara-v303-projects-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
.backup-dashboard-grid, .custom-bot-layout, .custom-bot-workspace, .appearance-editor-layout { grid-template-columns: 1fr; }
.custom-bot-preview-column, .appearance-live-preview { position: static; }
}
@media (max-width: 720px) {
.k39-grid, .k39-security-points, .permission-check-grid, .billing-check-grid, .connection-checklist, .backup-scope-grid, .automation-grid, .marketplace-grid, .founder-server-grid, .kara25-integration-panels, .kara-v303-projects-overview, .backup-secondary-grid, .moderation-rule-grid, .kara-v303-platform-flow, .kara-v303-architecture-flow { grid-template-columns: 1fr; }
.k39-security-page { padding: 12px; }
.k39-security-shell { grid-template-columns: 1fr; }
.k39-security-brand, .k39-security-form { padding: 26px 20px; }
.authority-grid, .application-grid { grid-template-columns: 1fr; }
.ops-suite-hero { align-items: flex-start; flex-direction: column; }
}
/* ========================================================================== */
/* KARA AI v42 — structural rebuild and hardening */
/* ========================================================================== */
:root{
--shell-max:1440px;
--shell-gutter:clamp(18px,3vw,44px);
--header-h:72px;
--panel-topbar-h:64px;
--panel-sidebar:268px;
--panel-gap:18px;
--section-gap:clamp(72px,9vw,132px);
--content-gap:clamp(18px,2.2vw,30px);
}
html{scroll-padding-top:calc(var(--header-h) + 24px)}
body.kara-v42{font-size:16px;letter-spacing:0;}
body.kara-v42 :where(h1,h2,h3,h4,p,span,b,small,em,strong,a,button,label,th,td){overflow-wrap:anywhere}
body.kara-v42 main{min-width:0}
body.kara-v42 .card,body.kara-v42 .workspace-panel,body.kara-v42 .founder-panel,body.kara-v42 .kara25-panel,body.kara-v42 .k39-card{min-width:0}
/* Public header */
.kara-header{
position:sticky;top:0;z-index:1200;width:100%;height:var(--header-h);padding:0 max(var(--shell-gutter),calc((100vw - var(--shell-max))/2));
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;
border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(20px) saturate(130%);
}
.kara-wordmark{display:flex;align-items:center;gap:14px;min-width:0}.kara-wordmark-logo{width:112px;height:auto}.kara-wordmark-context{color:var(--dim);font-size:.62rem;letter-spacing:.13em;white-space:nowrap}
.kara-nav{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}.kara-nav a{padding:10px 12px;border-radius:10px;color:var(--muted);font-size:.78rem;font-weight:760;white-space:nowrap}.kara-nav a:hover,.kara-nav a.is-active{color:var(--text);background:var(--panel-2)}.kara-nav a.is-active::after{content:"";display:block;height:2px;margin:6px 2px -5px;border-radius:99px;background:var(--accent)}
.kara-header-actions{display:flex;align-items:center;gap:8px}.kara-language{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.kara-language a{min-width:31px;padding:6px 7px;border-radius:7px;text-align:center;color:var(--dim);font-size:.65rem;font-weight:850}.kara-language a.is-active{color:var(--text);background:var(--panel-3)}
.kara-account-chip{max-width:190px;display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}.kara-account-chip>img,.kara-account-chip>span:first-child{width:31px;height:31px;border-radius:8px;object-fit:cover;display:grid;place-items:center;background:var(--panel-3)}.kara-account-chip-copy{min-width:0}.kara-account-chip-copy b,.kara-account-chip-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kara-account-chip-copy b{font-size:.7rem}.kara-account-chip-copy small{font-size:.55rem}
.kara-hub-button svg{width:17px;height:17px}.kara-nav-toggle{display:none}
/* Public pages */
.kara-page main,.k39-shell,.kara36-section,.kara36-hero,.kara36-proof-strip,.kara36-final-cta{width:min(var(--shell-max),calc(100% - 2*var(--shell-gutter)));margin-inline:auto}
.k39-shell{padding:clamp(58px,7vw,100px) 0 var(--section-gap)}
.k39-hero{min-height:calc(100vh - var(--header-h) - 34px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);align-items:center;gap:clamp(40px,6vw,90px);padding:42px 0 72px}
.k39-hero-copy,.k39-hero-visual{min-width:0}.k39-hero h1{max-width:840px;margin:0 0 24px;font-size:clamp(3.2rem,6vw,6.5rem);line-height:.98;letter-spacing:-.06em}.k39-hero p{max-width:760px;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.75}.k39-actions{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 14px}.k39-trust-row{display:flex;gap:18px;padding:0;border:0;background:transparent}.k39-trust-row span{font-size:.72rem}
.k39-hero-visual{padding:18px;border:1px solid var(--line-strong);border-radius:22px;background:linear-gradient(145deg,rgba(192,138,46,.06),rgba(78,156,134,.03)),var(--panel);box-shadow:var(--shadow)}
.k39-window-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;color:var(--dim);font-size:.65rem;letter-spacing:.08em}.k39-command-card{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}.k39-command-card header{display:flex;gap:10px;align-items:center;margin-bottom:12px}.k39-command-card .avatar{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet));font-weight:900}.k39-command-card header b,.k39-command-card header small{display:block}.k39-command-input{padding:13px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(192,138,46,.04);line-height:1.55}.k39-command-steps{display:grid;gap:8px;margin-top:12px}.k39-command-steps>span{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px}.k39-command-steps i{font-style:normal;color:var(--green)}.k39-command-steps em{color:var(--dim);font-size:.6rem}
.k39-section{margin-top:var(--section-gap)}.k39-section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.65fr);align-items:end;gap:40px;margin-bottom:32px}.k39-section-head h2{margin:0;font-size:clamp(2.3rem,4.6vw,4.8rem);line-height:1.04}.k39-section-head p{margin:0;font-size:1rem;line-height:1.75}.k39-grid{display:grid!important;gap:16px}.k39-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.k39-card{padding:24px!important;border-radius:18px!important}.k39-card h3{margin:14px 0 10px;font-size:1.25rem}.k39-card p{line-height:1.7}.k39-card-index{display:flex;align-items:center;justify-content:space-between}.k39-list{margin:16px 0 0;padding:0;list-style:none}.k39-list li{position:relative;padding:8px 0 8px 18px;border-top:1px solid var(--line);color:var(--text-soft);font-size:.8rem}.k39-list li::before{content:"";position:absolute;left:2px;top:15px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.k39-feature-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.k39-feature-panel.wide{grid-column:span 2}.k39-feature-panel header{display:flex;justify-content:space-between;gap:12px;color:var(--accent);font-size:.66rem;font-weight:850;letter-spacing:.1em}.k39-feature-metric{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.k39-feature-metric span{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}.k39-feature-metric b,.k39-feature-metric small{display:block}
.k39-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.k39-module-grid article{padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
/* Home legacy class family rebuilt */
.kara36-hero{min-height:calc(100vh - var(--header-h));display:grid;grid-template-columns:minmax(0,.9fr) minmax(460px,.75fr);align-items:center;gap:clamp(48px,7vw,100px);padding:58px 0 78px}.kara36-hero-copy,.kara36-hero-stage{min-width:0}.kara36-status-pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.62rem}.kara36-status-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(75,210,157,.1)}.kara36-status-pill b{color:var(--accent)}.kara36-hero h1{margin:0 0 22px;font-size:clamp(3.8rem,7vw,7.4rem);line-height:.93;letter-spacing:-.065em}.kara36-hero h1 span,.k39-gradient-text{color:transparent;background:linear-gradient(100deg,var(--accent),#88c9ff 50%,var(--violet));-webkit-background-clip:text;background-clip:text}.kara36-hero-copy>p{max-width:700px;font-size:1.06rem;line-height:1.75}.kara36-hero-actions,.kara36-trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.kara36-trust-row{gap:16px}.kara36-trust-row span{color:var(--muted);font-size:.7rem}.kara36-trust-row i{color:var(--green);font-style:normal}.kara36-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:30px 0 0}.kara36-hero-stats div{padding:13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015)}.kara36-hero-stats dt{font-size:1.3rem;font-weight:900}.kara36-hero-stats dd{color:var(--muted);font-size:.65rem}
.kara36-hero-stage{position:relative}.kara36-command-console{position:relative;z-index:2;padding:17px;border:1px solid var(--line-strong);border-radius:22px;background:var(--panel);box-shadow:var(--shadow-lg)}.kara36-command-console>header,.kara36-command-console>footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.kara36-command-console>header{padding-bottom:14px;border-bottom:1px solid var(--line)}.kara36-command-console>header>div{display:flex;align-items:center;gap:9px}.kara36-window-dots{display:flex;gap:5px}.kara36-window-dots i{width:7px;height:7px;border-radius:50%;background:var(--dim)}.kara36-command-user{display:grid;grid-template-columns:36px 1fr;gap:10px;margin:15px 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}.kara36-command-user>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--violet));font-weight:900}.kara36-command-user p{margin:0;color:var(--text-soft)}.kara36-thinking-line{display:flex;align-items:center;gap:5px;margin:12px 0;color:var(--muted);font-size:.7rem}.kara36-thinking-line b{margin-left:5px}.kara36-plan-list{display:grid;gap:8px}.kara36-plan-list>div{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:11px}.kara36-plan-list>div>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--panel-3)}.kara36-plan-list p,.kara36-plan-list small,.kara36-plan-list b{display:block;margin:0}.kara36-plan-list em{font-size:.6rem;color:var(--dim)}.kara36-command-console>footer{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.kara36-command-console>footer>div{display:flex;align-items:center;gap:8px}.kara36-command-console>footer img{width:32px;height:32px;border-radius:9px}.kara36-command-console>footer b,.kara36-command-console>footer small{display:block}.kara36-command-console>footer button,.kara36-command-console>footer .kara36-mock-action{display:grid;place-items:center;min-height:38px;padding:0 13px;border:0;border-radius:9px;color:#041117;background:var(--accent);font-weight:850;font-size:.78rem}.kara36-floating-card{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:var(--shadow-sm)}.kara36-floating-card.security{left:-72px;bottom:28px}.kara36-floating-card.assistant{right:-48px;top:28px}.kara36-floating-card img{width:32px;height:32px}.kara36-floating-card b,.kara36-floating-card small{display:block}.kara36-floating-card em{margin-left:auto;color:var(--green);font-size:.65rem}
.kara36-proof-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.kara36-proof-strip>div{padding:18px;border-right:1px solid var(--line);display:flex;align-items:center;gap:10px}.kara36-proof-strip>div:last-child{border-right:0}.kara36-proof-strip span{color:var(--accent);font-size:.65rem}.kara36-proof-strip b{font-size:.75rem}.kara36-section{margin-top:var(--section-gap)}.kara36-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.65fr);align-items:end;gap:36px;margin-bottom:28px}.kara36-section-head.centered{display:block;text-align:center}.kara36-section-head.centered p{margin-inline:auto}.kara36-section-head h2{font-size:clamp(2.4rem,4.7vw,5rem);margin:0}.kara36-section-head p{margin:0;max-width:680px;line-height:1.75}.kara36-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.kara36-bento-card{padding:25px!important;border-radius:18px!important}.kara36-bento-card.wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.7fr);align-items:center;gap:24px}.kara36-bento-card h3{font-size:1.35rem}.kara36-intent-map,.kara36-fivem-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kara36-intent-map span,.kara36-fivem-grid div{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.kara36-intent-map i{display:none}.kara36-mini-metric,.kara36-ticket-flow{display:flex;align-items:center;gap:10px;margin-top:16px;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}.kara36-mini-metric span b,.kara36-mini-metric span small{display:block}.kara36-mini-metric em{margin-left:auto}.kara36-ticket-flow{justify-content:space-between}.kara36-hybrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}.kara36-hybrid-visual{display:grid;gap:12px}.kara36-hybrid-node{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.kara36-hybrid-node span{color:var(--accent)}.kara36-hybrid-node small{color:var(--muted)}.kara36-hybrid-route{display:flex;justify-content:center;gap:8px}.kara36-hybrid-route i{width:6px;height:6px;border-radius:50%;background:var(--accent)}.kara36-hybrid-fallback{text-align:center;color:var(--muted)}.kara36-hybrid-copy h2{font-size:clamp(2.1rem,3.8vw,4rem)}.kara36-hybrid-copy li{margin:8px 0;color:var(--text-soft)}.kara36-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.kara36-plan-card{position:relative;padding:24px!important;border-radius:18px!important}.kara36-plan-card.featured{border-color:var(--line-strong)!important;box-shadow:0 22px 70px rgba(192,138,46,.1)}.kara36-plan-card ul{padding-left:20px}.kara36-plan-card li{margin:9px 0;color:var(--text-soft)}.kara36-price{display:flex;align-items:baseline;gap:8px;margin:18px 0}.kara36-price b{font-size:1.7rem}.kara36-assistant-showcase{display:grid;grid-template-columns:minmax(250px,.65fr) minmax(0,1.35fr);align-items:center;gap:50px}.kara36-assistant-showcase img{max-height:360px;margin:auto}.kara36-assistant-showcase h2{font-size:clamp(2.2rem,4vw,4.2rem)}.kara36-assistant-example{display:flex;gap:12px;padding:16px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.kara36-assistant-example b,.kara36-assistant-example small{display:block}.kara36-final-cta{margin-top:var(--section-gap);margin-bottom:80px;padding:clamp(28px,5vw,58px);border:1px solid var(--line-strong);border-radius:24px;background:linear-gradient(120deg,rgba(192,138,46,.08),rgba(122,111,140,.05)),var(--panel);display:flex;align-items:end;justify-content:space-between;gap:28px}.kara36-final-cta h2{font-size:clamp(2.1rem,4vw,4rem)}.kara36-final-cta>div:last-child{display:flex;flex-wrap:wrap;gap:9px}
/* Account/auth */
.kara-auth-page{min-height:100vh;display:grid;place-items:center;padding:32px;background:radial-gradient(circle at 10% 20%,rgba(192,138,46,.09),transparent 34rem),var(--bg)}.kara-auth-shell{width:min(980px,100%);display:grid;grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);overflow:hidden;border:1px solid var(--line);border-radius:26px;background:var(--panel);box-shadow:var(--shadow-lg)}.kara-auth-brand,.kara-auth-card{padding:clamp(30px,5vw,58px)}.kara-auth-brand{background:linear-gradient(145deg,rgba(192,138,46,.08),rgba(78,156,134,.04)),var(--bg-elevated)}.kara-auth-brand>img{width:70px;margin-bottom:44px}.kara-auth-brand h1{font-size:clamp(2.2rem,4vw,4rem)}.kara-auth-security-list{display:grid;gap:10px;margin-top:26px}.kara-auth-security-list span{color:var(--text-soft)}.kara-auth-card header h2{font-size:2rem}.kara-auth-provider{display:flex!important;align-items:center;justify-content:space-between;gap:18px;padding:14px!important}.kara-auth-provider b,.kara-auth-provider small{display:block}.kara-auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--dim)}.kara-auth-divider::before,.kara-auth-divider::after{content:"";height:1px;flex:1;background:var(--line)}.kara-auth-form{display:grid;gap:12px}.kara-auth-form label span{display:block;margin-bottom:6px;font-size:.7rem;font-weight:750}.kara-auth-form button{min-height:44px;border:0;border-radius:11px;color:#061116;background:var(--accent);font-weight:850}.kara-auth-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.kara-auth-links a{color:var(--accent);font-size:.68rem}.kara-auth-card footer{display:flex;justify-content:space-between;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.65rem}
/* Global dashboard and profile */
.kara-panel-header{position:sticky!important;top:0;z-index:1200;min-height:var(--panel-topbar-h)!important;height:var(--panel-topbar-h)!important;padding:0 18px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:18px!important;background:color-mix(in srgb,var(--bg) 94%,transparent)!important;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)!important}.kara-panel-brand{display:flex;align-items:center;gap:8px}.kara-panel-brand img{width:34px;height:34px}.kara-panel-brand-copy b,.kara-panel-brand-copy small{display:block}.kara-product-breadcrumb{justify-self:center;display:flex;gap:7px;align-items:center}.kara-product-breadcrumb span{color:var(--dim);font-size:.6rem}.kara-panel-nav{display:flex;gap:6px}.kara-panel-nav a{display:flex;align-items:center;gap:5px;padding:8px 10px;border-radius:9px;color:var(--muted);font-size:.67rem}.kara-panel-nav a:hover{background:var(--panel-2);color:var(--text)}
.kara25-dashboard{width:100%;min-height:calc(100vh - var(--panel-topbar-h));display:grid!important;grid-template-columns:var(--panel-sidebar) minmax(0,1fr)!important}.kara25-dashboard-sidebar{position:sticky;top:var(--panel-topbar-h);height:calc(100vh - var(--panel-topbar-h));overflow:auto;padding:18px 12px;border-right:1px solid var(--line);background:var(--bg-elevated)}.kara25-dashboard-main{width:min(100%,var(--content-width));max-width:1600px;margin:0 auto;padding:28px clamp(18px,2.8vw,42px) 60px;min-width:0}.kara25-page-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:18px}.kara25-page-head h1{margin:4px 0 8px;font-size:clamp(2rem,3.5vw,3.5rem)}.kara25-page-actions{display:flex;flex-wrap:wrap;gap:8px}.kara25-hero{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr)!important;gap:20px!important;padding:26px!important}.kara25-hero h2{font-size:2rem}.kara25-hero-status{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.kara25-hero-status>div{min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}.kara25-hero-status span,.kara25-hero-status b,.kara25-hero-status small{display:block}.kara25-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:14px 0}.kara25-kpi{padding:18px!important}.kara25-content-grid{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr)!important;gap:14px!important}.kara25-side-stack{display:grid;align-content:start;gap:14px}.kara25-server-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:13px!important}.kara25-server-identity{display:flex;align-items:center;gap:11px;min-width:0}.kara25-server-avatar{width:44px!important;height:44px!important;flex:none}.kara25-server-copy{min-width:0}.kara25-server-copy b,.kara25-server-copy small{display:block}.kara25-server-tags{display:flex;gap:5px;margin-top:5px}.kara25-server-tags span{padding:3px 5px;border-radius:999px;background:rgba(192,138,46,.08);color:var(--accent);font-size:.5rem}.kara25-quick-list{display:grid;gap:8px}.kara25-quick-list>a{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.kara25-quick-list b,.kara25-quick-list small{display:block}.kara25-status-list{display:grid;gap:7px}.kara25-status-list>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
/* Premium and comparison */
.v14-pricing-page,.v16-premium-main{width:min(var(--shell-max),calc(100% - 2*var(--shell-gutter)))!important;margin:0 auto!important;padding:40px 0 80px!important;min-width:0}.v16-plan-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:stretch}.v16-plan-card{min-width:0!important;display:flex!important;flex-direction:column!important;gap:14px!important;padding:24px!important}.v16-plan-card header{min-height:116px}.v16-plan-card ul{padding-left:20px;flex:1}.v16-plan-card li{margin:9px 0}.kara36-plan-capacity{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.kara36-plan-capacity span{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.kara36-plan-capacity small,.kara36-plan-capacity b{display:block}.v16-feature-table{margin-top:28px;overflow:hidden}.v16-feature-head,.v16-feature-row{min-width:760px!important;display:grid!important;grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(120px,.5fr))!important}.v16-feature-table{overflow-x:auto!important}.v16-feature-head>* , .v16-feature-row>*{padding:11px;border-bottom:1px solid var(--line)}.v14-plan-status{margin-top:28px!important}.v14-guild-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.v14-guild-card{display:grid!important;grid-template-columns:54px minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;padding:12px!important;min-width:0!important}.v14-guild-card .server-art{width:54px!important;height:54px!important}.v14-guild-card .server-art img{width:100%;height:100%;object-fit:cover;border-radius:12px}.v14-guild-card>div:nth-child(2){min-width:0}.v14-guild-card b,.v14-guild-card small{display:block}.v14-guild-card em{white-space:nowrap}
/* Guild workspace shell */
.app-body{overflow:hidden}.topbar{position:fixed!important;inset:0 0 auto 0;z-index:1300;height:var(--panel-topbar-h)!important;min-height:var(--panel-topbar-h)!important;padding:0 16px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;background:color-mix(in srgb,var(--bg) 95%,transparent)!important;backdrop-filter:blur(20px);border-bottom:1px solid var(--line)!important}.kara-topbar-left,.top-actions{display:flex;align-items:center;gap:10px;min-width:0}.topbar .brand{display:flex;align-items:center;gap:8px;min-width:0}.topbar .brand-logo{width:34px;height:34px}.topbar .brand b,.topbar .brand small{display:block}.kara-current-guild-chip{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.kara-current-guild-avatar{width:31px;height:31px;flex:none;display:grid;place-items:center;border-radius:8px;overflow:hidden;background:var(--panel-3)}.kara-current-guild-avatar img{width:100%;height:100%;object-fit:cover}.kara-current-guild-copy{min-width:0}.kara-current-guild-copy b,.kara-current-guild-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-shell{display:grid!important;grid-template-columns:var(--panel-sidebar) minmax(0,1fr)!important;min-height:100vh;padding-top:var(--panel-topbar-h)!important}.sidebar{position:fixed!important;top:var(--panel-topbar-h)!important;bottom:0!important;left:0!important;width:var(--panel-sidebar)!important;max-width:86vw;overflow:hidden!important;display:flex!important;flex-direction:column!important;border-right:1px solid var(--line)!important;background:var(--bg-elevated)!important;z-index:1100}.kara-dock-panel{display:flex;flex-direction:column;height:100%;min-height:0}.kara-dock-panel-head,.kara-dock-server,.kara-dock-search-wrap{flex:none}.kara-dock-nav{flex:1;min-height:0;overflow:auto;padding:8px}.kara-dock-section{margin-bottom:12px}.kara-dock-heading-static{display:flex;align-items:center;gap:8px;padding:8px;color:var(--dim)}.kara-dock-section-copy b{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em}.kara-dock-items{display:grid;gap:4px}.kara-dock-footer{flex:none;padding:9px;border-top:1px solid var(--line)}.content{grid-column:2!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:20px clamp(14px,2vw,30px) 64px!important;overflow:auto!important;height:calc(100vh - var(--panel-topbar-h))!important}.content>*{max-width:min(var(--user-content-width,1600px),100%);margin-inline:auto}.mobile-head{display:none}.workspace-hero,.page-header{margin-bottom:14px!important}.workspace-server-banner,.workspace-page-hero,.workspace-panel,.card{border-radius:14px!important}.workspace-tool-rail{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px}.workspace-tool-link{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;padding:10px!important}.workspace-tool-link div{min-width:0}.workspace-tool-link b,.workspace-tool-link small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-kpi-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.workspace-main-grid{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr)!important;gap:12px!important}.workspace-secondary-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.workspace-flow-visuals{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.workspace-signal-list>div{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:var(--panel-2)!important}.workspace-flow-table-wrap,.data-table,.compact-table,.ops-data-table,.ticket-live-table,.founder-table-panel{max-width:100%;overflow:auto!important}.workspace-flow-table,.data-table table,.compact-table table,.founder-table{width:100%;min-width:720px;border-collapse:collapse;table-layout:fixed}.workspace-flow-table th,.workspace-flow-table td,.founder-table th,.founder-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.card{padding:18px!important}.card-title{display:flex!important;align-items:flex-start!important;gap:10px!important;margin-bottom:14px!important}.card-title .card-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.card-title>div{min-width:0}.card-title h2,.card-title p{margin:0}.card-title p{margin-top:4px}.form-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:12px!important}.form-grid>.field,.form-grid>label,.form-grid>div{grid-column:span 4;min-width:0}.form-grid.two>.field,.form-grid.two>label,.form-grid.two>div{grid-column:span 6}.form-grid.three>.field,.form-grid.three>label,.form-grid.three>div{grid-column:span 4}.field{min-width:0}.field>span{display:block;margin-bottom:6px;font-size:.68rem;font-weight:760}.field small{display:block;margin-top:5px}.toggle-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.toggle-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-width:0!important}.toggle-row>span{min-width:0}.toggle-row b,.toggle-row small{display:block}.savebar{position:sticky;bottom:10px;z-index:30;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:12px!important;border:1px solid var(--line-strong)!important;border-radius:13px!important;background:color-mix(in srgb,var(--panel) 96%,transparent)!important;backdrop-filter:blur(18px)}
/* Founder */
.founder-topbar{position:sticky!important;top:0;z-index:1200;height:var(--panel-topbar-h);padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--bg) 95%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.founder-layout{display:grid!important;grid-template-columns:260px minmax(0,1fr)!important;min-height:calc(100vh - var(--panel-topbar-h))}.founder-sidebar{position:sticky!important;top:var(--panel-topbar-h);height:calc(100vh - var(--panel-topbar-h));overflow:auto;padding:14px;border-right:1px solid var(--line);background:var(--bg-elevated)}.founder-main{min-width:0;padding:24px clamp(18px,2.5vw,38px) 60px}.founder-main>*{max-width:1540px;margin-inline:auto}.founder-stat-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.founder-overview-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.founder-form-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:12px!important}.founder-form-grid>.founder-field{grid-column:span 4}.founder-table{min-width:900px!important}
/* Footer */
.kara-footer{width:min(var(--shell-max),calc(100% - 2*var(--shell-gutter)));margin:80px auto 0;padding:42px 0 24px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:60px}.kara-footer-brand img{width:120px}.kara-footer-brand p{max-width:430px;margin-top:14px}.kara-footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.kara-footer-grid>div{display:grid;align-content:start;gap:8px}.kara-footer-grid b{margin-bottom:5px}.kara-footer-grid a{color:var(--muted);font-size:.75rem}.kara-footer-grid a:hover{color:var(--text)}.kara-footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:.66rem}
/* Universal overflow and spacing fixes */
.data-row,.log-route,.automation-item,.ops-health-card,.v16-compact-card,.founder-security-row,.ticket-panel-state,.ticket-status,.ticket-priority{min-width:0}
.data-row>* ,.log-route>* ,.automation-item>*{min-width:0}
.data-row,.log-route{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(160px,.45fr)!important;gap:12px!important;align-items:center!important}.automation-item{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important}.automation-item>div:first-child{min-width:0}.automation-item b,.automation-item small,.automation-item p{display:block}.item-list,.mini-list,.compact-list{display:grid!important;gap:8px!important}.item-list>*,.mini-list>*,.compact-list>*{min-width:0!important;padding:10px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:var(--panel-2)!important}.application-add-field{display:grid!important;grid-template-columns:minmax(180px,1fr) minmax(130px,.5fr) minmax(180px,1fr) auto auto!important;gap:8px!important;align-items:end!important}.appearance-editor-layout,.custom-bot-layout,.custom-bot-workspace{min-width:0}.appearance-control-grid,.appearance-preset-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.appearance-control-grid.colors{grid-template-columns:repeat(3,minmax(0,1fr))!important}.ticket-pro-overview,.ticket-type-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.ops-suite-grid,.moderation-rule-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
/* Responsive */
@media(max-width:1180px){
.kara-header{grid-template-columns:auto 1fr auto;gap:14px}.kara-wordmark-context{display:none}.kara-nav{justify-content:flex-start}.kara-account-chip-copy{display:none}.kara-account-chip{padding:4px}
.kara36-hero,.k39-hero{grid-template-columns:1fr;min-height:auto}.kara36-hero-stage,.k39-hero-visual{max-width:760px;width:100%;margin:auto}.kara36-floating-card{display:none}.kara36-proof-strip{grid-template-columns:repeat(3,1fr)}.kara36-proof-strip>div:nth-child(3){border-right:0}.kara36-proof-strip>div:nth-child(n+4){border-top:1px solid var(--line)}
.kara36-plan-grid,.v16-plan-grid{grid-template-columns:1fr 1fr!important}.kara36-plan-grid>article:last-child,.v16-plan-grid>article:last-child{grid-column:1/-1}.k39-grid.three,.k39-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.kara25-kpis,.workspace-kpi-grid,.founder-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.kara25-content-grid,.workspace-main-grid{grid-template-columns:1fr!important}.workspace-tool-rail{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.form-grid>.field,.form-grid>label,.form-grid>div{grid-column:span 6}.founder-form-grid>.founder-field{grid-column:span 6}
}
@media(max-width:940px){
:root{--header-h:64px;--panel-topbar-h:58px;--panel-sidebar:276px}
.kara-header{height:var(--header-h);grid-template-columns:auto auto 1fr}.kara-nav-toggle{display:grid}.kara-nav{position:fixed;top:var(--header-h);left:12px;right:12px;display:none;flex-direction:column;align-items:stretch;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}.kara-nav.is-open{display:flex}.kara-nav a{padding:12px}.kara-header-actions{justify-self:end}.kara-link-button,.kara-account-chip{display:none}.kara-wordmark-logo{width:100px}.kara-hub-button{padding-inline:11px}.kara-hub-button b{display:none}
.kara36-hero,.k39-hero{padding-top:36px}.kara36-hero h1,.k39-hero h1{font-size:clamp(3rem,12vw,5.5rem)}.kara36-section-head,.k39-section-head{grid-template-columns:1fr;gap:16px}.kara36-bento-card.wide{grid-template-columns:1fr}.kara36-hybrid,.kara36-assistant-showcase{grid-template-columns:1fr}.kara36-final-cta{align-items:flex-start;flex-direction:column}
.app-shell,.founder-layout,.kara25-dashboard{display:block!important}.sidebar,.founder-sidebar,.kara25-dashboard-sidebar{position:fixed!important;z-index:1400!important;top:var(--panel-topbar-h)!important;left:0!important;bottom:0!important;width:min(310px,88vw)!important;height:auto!important;transform:translateX(-105%);transition:transform var(--transition);box-shadow:var(--shadow-lg)}body.sidebar-open .sidebar,body.sidebar-open .founder-sidebar,body.sidebar-open .kara25-dashboard-sidebar,.sidebar.open,.sidebar.is-open{transform:translateX(0)}.content,.founder-main,.kara25-dashboard-main{width:100%!important;height:auto!important;min-height:calc(100vh - var(--panel-topbar-h));padding:16px 14px 54px!important}.content{grid-column:auto!important;overflow:visible!important}.kara-v42-mobile-menu{position:fixed;left:12px;bottom:12px;z-index:1500;width:46px;height:46px;border:1px solid var(--line-strong);border-radius:13px;background:var(--panel);box-shadow:var(--shadow);color:var(--text)}.mobile-head{display:flex}.topbar .status-dot,.topbar .premium-chip,.topbar .admin-chip{display:none}.topbar .kara-current-guild-copy{display:none}.topbar .kara-current-guild-chip{padding:4px}.topbar .brand span{display:none}
.kara25-page-head{align-items:flex-start;flex-direction:column}.kara25-hero{grid-template-columns:1fr!important}.kara25-hero-status{grid-template-columns:repeat(2,1fr)!important}.workspace-secondary-grid,.workspace-flow-visuals,.founder-overview-grid{grid-template-columns:1fr!important}.workspace-tool-rail{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.kara-auth-shell{grid-template-columns:1fr}.kara-auth-brand{display:none}
}
@media(max-width:680px){
--shell-gutter:14px;
.kara-header{padding-inline:14px;gap:8px}.kara-wordmark-logo{width:92px}.kara-language,.kara-theme-toggle{display:none}.kara36-hero h1,.k39-hero h1{font-size:clamp(2.75rem,15vw,4.5rem)}.kara36-hero-stats,.kara36-plan-grid,.v16-plan-grid,.k39-grid.three,.k39-feature-mosaic,.k39-module-grid,.kara36-bento,.kara36-proof-strip{grid-template-columns:1fr!important}.kara36-plan-grid>article:last-child,.v16-plan-grid>article:last-child,.k39-feature-panel.wide{grid-column:auto}.kara36-proof-strip>div{border-right:0;border-top:1px solid var(--line)}.kara36-proof-strip>div:first-child{border-top:0}.kara36-section-head h2,.k39-section-head h2{font-size:2.4rem}.kara36-final-cta{padding:24px}.kara-footer{grid-template-columns:1fr;gap:28px}.kara-footer-grid{grid-template-columns:1fr 1fr}.kara-footer-bottom{align-items:flex-start;flex-direction:column}
.kara25-kpis,.workspace-kpi-grid,.founder-stat-grid,.kara25-hero-status{grid-template-columns:1fr!important}.workspace-tool-rail{grid-template-columns:1fr!important}.workspace-tool-link b,.workspace-tool-link small{white-space:normal}.form-grid,.founder-form-grid{grid-template-columns:1fr!important}.form-grid>.field,.form-grid>label,.form-grid>div,.founder-form-grid>.founder-field{grid-column:auto!important}.toggle-grid,.appearance-control-grid,.appearance-control-grid.colors,.ticket-pro-overview,.ticket-type-grid,.ops-suite-grid,.moderation-rule-grid{grid-template-columns:1fr!important}.application-add-field{grid-template-columns:1fr!important}.data-row,.log-route{grid-template-columns:1fr!important}.automation-item{flex-direction:column}.v14-guild-grid{grid-template-columns:1fr!important}.v14-guild-card{grid-template-columns:48px minmax(0,1fr)!important}.v14-guild-card em{grid-column:2}.kara-auth-page{padding:0}.kara-auth-shell{min-height:100vh;border:0;border-radius:0}.kara-auth-card{padding:28px 18px}.kara-auth-card footer{flex-direction:column}.site-assistant{max-width:calc(100vw - 24px)!important;right:12px!important;bottom:12px!important}
}
.profile-workspace-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.profile-workspace-summary article{min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}.profile-workspace-summary small,.profile-workspace-summary b,.profile-workspace-summary span{display:block}.profile-workspace-summary b{margin:5px 0;font-size:1.65rem}.profile-workspace-summary span{color:var(--muted);font-size:.68rem}@media(max-width:900px){.profile-workspace-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.profile-workspace-summary{grid-template-columns:1fr}}
@media(max-width:940px){body.mobile-sidebar-open .sidebar,body.founder-mobile-open .founder-sidebar{transform:translateX(0)!important}.sidebar-scrim{position:fixed!important;inset:var(--panel-topbar-h) 0 0 0!important;z-index:1350!important;background:rgba(2,6,12,.7)!important;backdrop-filter:blur(5px)}body.mobile-sidebar-open .sidebar-scrim:not([hidden]),body.founder-mobile-open .sidebar-scrim:not([hidden]),body.sidebar-open .sidebar-scrim:not([hidden]){display:block!important}.sidebar,.founder-sidebar,.kara25-dashboard-sidebar{z-index:1400!important}}
/* v42.1 final layout integrity */
body.kara-v42.kara-page,
body.kara-v42.k39-page { padding-top: 0; }
.premium-page { min-height: 100vh; background: var(--bg); }
.premium-page .v14-header { position: fixed; inset: 0 0 auto; z-index: 1300; }
.premium-page .v16-pricing-main { min-width: 0; }
.premium-page .v16-pricing-hero {
display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items: center;
gap: 28px; padding: 38px 28px; text-align: left; border: 1px solid var(--line);
border-radius: 20px; background: linear-gradient(125deg,rgba(192,138,46,.075),rgba(122,111,140,.045)),var(--panel);
}
.premium-page .v16-pricing-hero > img { width: 170px; max-height: 170px; object-fit: contain; justify-self: end; }
.premium-page .v16-wallet { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.premium-page .billing-manual-instructions,
.premium-page .billing-customer-portal { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.65fr); align-items: center; gap: 22px; }
.premium-page .billing-manual-instructions dl { display: grid; gap: 8px; margin: 0; }
.premium-page .billing-manual-instructions dl > div { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; }
.premium-page .billing-manual-instructions dt { color: var(--dim); }
.premium-page .billing-manual-instructions dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.guard-banner {
display: grid !important; grid-template-columns: minmax(0,1fr) 168px; align-items: center;
gap: 24px; min-height: 220px; overflow: hidden;
}
.guard-banner > div { min-width: 0; }
.guard-banner > img { width: 168px; height: 168px; max-width: 100%; object-fit: contain; justify-self: end; }
.card-mascot { width: 92px !important; height: 92px !important; max-width: 22vw; object-fit: contain !important; margin-left: auto; flex: none; }
.card-title h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.card-title h2 em,
.card-title h2 .premium-tag { margin: 0; }
.item-list > div,
.compact-list > div,
.mini-list > div { min-width: 0; }
.item-list > div > :where(p,span,div),
.compact-list > div > :where(p,span,div),
.mini-list > div > :where(p,span,div) { min-width: 0; }
.item-list b,.item-list small,.compact-list b,.compact-list small,.mini-list b,.mini-list small { display: block; }
.workspace-panel-head > div,
.section-heading > div,
.card-title > div,
.founder-table-head > div { min-width: 0; }
.workspace-panel-head h2,
.workspace-panel-head p,
.section-heading h2,
.section-heading p { overflow-wrap: anywhere; }
body.kara-v42 :where(input,select,textarea,button) { max-width: 100%; }
body.kara-v42 :where(input,select,textarea) { min-width: 0; }
body.kara-v42 table { width: 100%; border-collapse: collapse; }
body.kara-v42 th,
body.kara-v42 td { vertical-align: top; overflow-wrap: anywhere; }
@media (max-width: 940px) {
.premium-page .v16-pricing-hero,
.premium-page .billing-manual-instructions,
.premium-page .billing-customer-portal { grid-template-columns: 1fr; }
.premium-page .v16-pricing-hero > img { width: 130px; height: 130px; justify-self: start; }
.guard-banner { grid-template-columns: 1fr 120px; min-height: 0; }
.guard-banner > img { width: 120px; height: 120px; }
}
@media (max-width: 620px) {
.premium-page .v16-pricing-hero { padding: 24px 18px; }
.premium-page .v16-pricing-hero > img { display: none; }
.premium-page .billing-manual-instructions dl > div { grid-template-columns: 1fr; }
.guard-banner { grid-template-columns: 1fr; }
.guard-banner > img { display: none; }
.card-mascot { display: none; }
}
/* v42.1 generic data-surface safety */
.table-scroll,
.table-responsive,
.data-table-wrap {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
.table-scroll > table,
.table-responsive > table,
.data-table-wrap > table {
width: 100%;
min-width: 680px;
table-layout: fixed;
}
/* ============================================================
KARA v43 override layer (merged from public/kara-v43.css, 2026-08-02)
Content unchanged from source file; still scoped entirely under
body.kara-v43. Backup of original two-file state kept at:
C:\Users\Bugra\Desktop\KARA AI - backup-2026-08-02\public\
============================================================ */
/*
* KARA / KARA AI v43 — structural interface layer
* Loaded after kara-v42.css. Content, routes and runtime JavaScript remain intact.
*/
:root {
--v43-page: #080b12;
--v43-page-2: #0c1018;
--v43-surface: #111722;
--v43-surface-2: #161e2b;
--v43-surface-3: #1c2635;
--v43-surface-soft: rgba(17, 23, 34, .82);
--v43-line: rgba(230, 222, 201, .12);
--v43-line-strong: rgba(192, 138, 46, .4);
--v43-ink: #ece7da;
--v43-ink-2: #cfc9ba;
--v43-muted: #9a9488;
--v43-dim: #6f6a60;
--v43-accent: var(--user-accent, #c08a2e);
--v43-accent-2: #4e9c86;
--v43-accent-on: #0b0f14;
--v43-positive: #4e9c86;
--v43-warning: #c08a2e;
--v43-danger: #c05a4e;
--v43-info: #7c8a9c;
--v43-r1: 10px;
--v43-r2: 15px;
--v43-r3: 22px;
--v43-r4: 30px;
--v43-shadow-1: 0 12px 30px rgba(0, 0, 0, .18);
--v43-shadow-2: 0 28px 70px rgba(0, 0, 0, .28);
--v43-shadow-3: 0 50px 120px rgba(0, 0, 0, .4);
--v43-public-max: 1500px;
--v43-panel-max: min(var(--user-content-width, 1580px), 1580px);
--v43-header-h: 72px;
--v43-panel-header-h: 68px;
--v43-sidebar-w: min(var(--user-sidebar-width, 286px), 320px);
--v43-ease: 180ms cubic-bezier(.2, .72, .24, 1);
}
html[data-theme="light"] {
--v43-page: #f5f1e8;
--v43-page-2: #efe9db;
--v43-surface: #ffffff;
--v43-surface-2: #faf7f0;
--v43-surface-3: #f1ebdd;
--v43-surface-soft: rgba(255, 255, 255, .9);
--v43-line: rgba(18, 24, 31, .13);
--v43-line-strong: rgba(168, 116, 31, .4);
--v43-ink: #12181f;
--v43-ink-2: #333c44;
--v43-muted: #6b6459;
--v43-dim: #8c8578;
--v43-accent: var(--user-accent, #a8741f);
--v43-accent-2: #327363;
--v43-accent-on: #fdfbf6;
--v43-positive: #327363;
--v43-warning: #a8741f;
--v43-danger: #a8402f;
--v43-info: #5f6c7a;
--v43-shadow-1: 0 10px 28px rgba(35, 51, 72, .08);
--v43-shadow-2: 0 24px 64px rgba(35, 51, 72, .12);
--v43-shadow-3: 0 44px 110px rgba(35, 51, 72, .16);
}
body.kara-v43 {
min-width: 320px;
color: var(--v43-ink);
background:
radial-gradient(circle at 4% -10%, color-mix(in srgb, var(--v43-accent) 13%, transparent), transparent 32rem),
radial-gradient(circle at 98% 8%, color-mix(in srgb, var(--v43-accent-2) 10%, transparent), transparent 36rem),
linear-gradient(180deg, var(--v43-page), var(--v43-page-2));
font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.55;
}
.kara-v43::before {
opacity: .62;
background-image:
linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
background-size: 56px 56px;
}
.kara-v43 h1,
.kara-v43 h2,
.kara-v43 h3,
.kara-v43 h4 { color: var(--v43-ink); text-wrap: balance; }
.kara-v43 p { color: var(--v43-muted); text-wrap: pretty; }
.kara-v43 small,
.kara-v43 .muted { color: var(--v43-muted); }
.kara-v43 :where(main, section, article, aside, nav, header, footer, form, div) { min-width: 0; }
.kara-v43 :where(img, svg, video, canvas) { max-width: 100%; }
.kara-v43 :where(table) { width: 100%; border-collapse: separate; border-spacing: 0; }
.kara-v43 :where(input, select, textarea, button) { max-width: 100%; }
.kara-v43 :where(pre, code, .code-block) { overflow-wrap: anywhere; }
.kara-v43 :focus-visible { outline: 3px solid color-mix(in srgb, var(--v43-accent) 58%, transparent); outline-offset: 3px; }
/* Shared controls */
.kara-v43 :where(
.button, .kara-primary-button, .kara-secondary-button, .kara-link-button,
.k39-btn, .kara36-button, .v14-btn, .kara25-btn, .founder-button,
button.primary, button.secondary, button.ghost, button.danger,
a.primary, a.secondary, a.ghost, a.danger
) {
min-height: 44px;
padding-inline: 17px;
border-radius: 12px;
font-weight: 760;
letter-spacing: -.01em;
transition: transform var(--v43-ease), border-color var(--v43-ease), background var(--v43-ease), color var(--v43-ease), box-shadow var(--v43-ease);
}
.kara-v43 :where(.button, .k39-btn, .kara36-button, .v14-btn, .kara25-btn, .founder-button):hover { transform: translateY(-2px); }
.kara-v43 :where(.button.primary, .primary, .kara-primary-button, .k39-btn.primary, .kara36-button.primary, .kara25-btn.primary) {
color: var(--v43-accent-on);
border-color: color-mix(in srgb, var(--v43-accent) 68%, white 10%);
background: linear-gradient(135deg, var(--v43-accent), color-mix(in srgb, var(--v43-accent) 74%, white));
box-shadow: 0 12px 28px color-mix(in srgb, var(--v43-accent) 18%, transparent);
}
.kara-v43 :where(.button.secondary, .secondary, .kara-secondary-button, .k39-btn.secondary, .kara36-button.secondary, .kara25-btn.secondary) {
color: var(--v43-ink-2);
border-color: var(--v43-line);
background: var(--v43-surface-2);
}
.kara-v43 :where(.button.ghost, .ghost, .kara-link-button, .k39-btn.ghost, .kara36-button.ghost, .v14-btn.glass) {
color: var(--v43-ink-2);
border-color: var(--v43-line);
background: color-mix(in srgb, var(--v43-surface) 72%, transparent);
}
.kara-v43 :where(.button.danger, .danger, .ghost-danger) {
color: color-mix(in srgb, var(--v43-danger) 70%, white);
border-color: color-mix(in srgb, var(--v43-danger) 30%, transparent);
background: color-mix(in srgb, var(--v43-danger) 10%, var(--v43-surface));
}
.kara-v43 :where(input, select, textarea) {
min-height: 46px;
padding: 11px 13px;
border: 1px solid var(--v43-line);
border-radius: 12px;
color: var(--v43-ink);
background: color-mix(in srgb, var(--v43-surface-2) 88%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.kara-v43 textarea { min-height: 118px; resize: vertical; }
.kara-v43 :where(input, select, textarea):focus {
border-color: var(--v43-line-strong);
background: var(--v43-surface);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--v43-accent) 10%, transparent);
}
.kara-v43 :where(label) { color: var(--v43-ink-2); }
.kara-v43 :where(
.card, .panel, .module-card, .k39-card, .k39-profile-panel,
.kara25-panel, .founder-panel, .v14-panel, .v16-module-card,
.workspace-card, .settings-card
) {
border: 1px solid var(--v43-line);
border-radius: var(--v43-r3);
background: linear-gradient(180deg, color-mix(in srgb, var(--v43-surface) 96%, white 1%), var(--v43-surface));
box-shadow: var(--v43-shadow-1);
}
/* Public navigation shell */
.kara-v43 .kara-header {
position: fixed;
inset: 14px clamp(14px, 2.3vw, 34px) auto;
z-index: 1700;
width: auto;
min-height: 62px;
padding: 8px 10px 8px 16px;
display: grid;
grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
align-items: center;
gap: 16px;
border: 1px solid var(--v43-line);
border-radius: 18px;
background: color-mix(in srgb, var(--v43-surface-soft) 92%, transparent);
box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
backdrop-filter: blur(22px) saturate(145%);
}
.kara-v43 .kara-wordmark { min-width: 0; display: flex; align-items: center; gap: 12px; }
.kara-v43 .kara-wordmark-logo { width: 108px; max-height: 32px; object-fit: contain; }
.kara-v43 .kara-wordmark-context { padding-left: 12px; border-left: 1px solid var(--v43-line); color: var(--v43-muted); font-size: .62rem; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.kara-v43 .kara-nav {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--v43-line);
border-radius: 13px;
background: color-mix(in srgb, var(--v43-page) 54%, transparent);
}
.kara-v43 .kara-nav a { padding: 8px 11px; border-radius: 9px; color: var(--v43-muted); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.kara-v43 .kara-nav a:hover { color: var(--v43-ink); background: var(--v43-surface-2); }
.kara-v43 .kara-nav a.is-active { color: var(--v43-ink); background: var(--v43-surface-3); box-shadow: inset 0 0 0 1px var(--v43-line); }
.kara-v43 .kara-header-actions { justify-self: end; display: flex; align-items: center; gap: 7px; min-width: 0; }
.kara-v43 .kara-language { display: flex; padding: 3px; border: 1px solid var(--v43-line); border-radius: 10px; background: var(--v43-page); }
.kara-v43 .kara-language a { min-width: 30px; padding: 5px 7px; border-radius: 7px; text-align: center; color: var(--v43-muted); font-size: .68rem; font-weight: 850; }
.kara-v43 .kara-language a.is-active { color: var(--v43-ink); background: var(--v43-surface-3); }
.kara-v43 .kara-account-chip { max-width: 190px; min-height: 42px; padding: 5px 9px 5px 6px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-2); }
.kara-v43 .kara-account-chip img,
.kara-v43 .kara-account-chip > span:first-child { width: 30px; height: 30px; border-radius: 9px; }
.kara-v43 .kara-account-chip-copy { min-width: 0; }
.kara-v43 .kara-account-chip-copy b,
.kara-v43 .kara-account-chip-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .kara-hub-button { min-height: 42px; padding-inline: 13px; }
.kara-v43 .kara-hub-button svg { width: 16px; height: 16px; }
.kara-v43 .kara-nav-toggle { display: none; }
/* Public home */
.kara-v43.kara36-home { padding-top: 0; }
.kara-v43 .kara36-background { opacity: .62; }
.kara-v43 .kara36-hero {
width: min(calc(100% - 48px), var(--v43-public-max));
min-height: 760px;
margin: 0 auto;
padding: 132px 0 74px;
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
align-items: center;
gap: clamp(44px, 6vw, 96px);
}
.kara-v43 .kara36-hero-copy { max-width: 680px; }
.kara-v43 .kara36-status-pill { width: fit-content; margin-bottom: 24px; padding: 7px 9px 7px 8px; border-radius: 999px; border: 1px solid var(--v43-line); background: var(--v43-surface-soft); }
.kara-v43 .kara36-status-pill b { color: var(--v43-accent); }
.kara-v43 .kara36-hero h1 { margin-bottom: 22px; font-size: clamp(3rem, 5.5vw, 5.6rem); line-height: .98; letter-spacing: -.065em; }
.kara-v43 .kara36-hero h1 span { color: var(--v43-accent); }
.kara-v43 .kara36-hero-copy > p { max-width: 650px; font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.75; }
.kara-v43 .kara36-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.kara-v43 .kara36-trust-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; }
.kara-v43 .kara36-trust-row span { color: var(--v43-muted); font-size: .78rem; }
.kara-v43 .kara36-trust-row i { color: var(--v43-positive); }
.kara-v43 .kara36-hero-stats { margin: 34px 0 0; padding-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--v43-line); }
.kara-v43 .kara36-hero-stats div { min-width: 0; }
.kara-v43 .kara36-hero-stats dt { color: var(--v43-ink); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 820; }
.kara-v43 .kara36-hero-stats dd { margin: 3px 0 0; color: var(--v43-muted); font-size: .72rem; }
.kara-v43 .kara36-hero-stage { position: relative; min-height: 610px; display: grid; align-items: center; isolation: isolate; }
.kara-v43 .kara36-stage-glow { position: absolute; inset: 8% 5%; z-index: -1; border-radius: 44%; filter: blur(70px); background: color-mix(in srgb, var(--v43-accent) 18%, transparent); }
.kara-v43 .kara36-command-console { position: relative; width: min(100%, 690px); margin: auto; overflow: hidden; border: 1px solid var(--v43-line-strong); border-radius: 26px; background: color-mix(in srgb, var(--v43-surface) 94%, transparent); box-shadow: var(--v43-shadow-3); }
.kara-v43 .kara36-command-console > header { min-height: 54px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v43-line); background: var(--v43-surface-2); }
.kara-v43 .kara36-command-console > header > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kara-v43 .kara36-command-console > header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v43-ink-2); font-size: .72rem; letter-spacing: .11em; }
.kara-v43 .kara36-command-user { margin: 20px; padding: 16px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 12px; border: 1px solid var(--v43-line); border-radius: 15px; background: var(--v43-surface-2); }
.kara-v43 .kara36-command-user > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--v43-accent-on); background: var(--v43-accent); font-weight: 900; }
.kara-v43 .kara36-command-user p { margin: 0; color: var(--v43-ink-2); font-size: .88rem; line-height: 1.65; }
.kara-v43 .kara36-thinking-line { margin: 0 20px 14px; display: flex; align-items: center; gap: 6px; color: var(--v43-muted); font-size: .72rem; }
.kara-v43 .kara36-thinking-line b { margin-left: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .kara36-plan-list { margin: 0 20px 20px; display: grid; gap: 8px; }
.kara-v43 .kara36-plan-list > div { min-height: 62px; padding: 11px 13px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--v43-line); border-radius: 13px; background: color-mix(in srgb, var(--v43-surface-2) 75%, transparent); }
.kara-v43 .kara36-plan-list > div > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--v43-ink-2); background: var(--v43-surface-3); }
.kara-v43 .kara36-plan-list .done > span { color: var(--v43-accent-on); background: var(--v43-positive); }
.kara-v43 .kara36-plan-list p { margin: 0; }
.kara-v43 .kara36-plan-list b,
.kara-v43 .kara36-plan-list small { display: block; }
.kara-v43 .kara36-plan-list em { color: var(--v43-muted); font-size: .68rem; font-style: normal; }
.kara-v43 .kara36-command-console > footer { min-height: 70px; padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--v43-line); background: var(--v43-surface-2); }
.kara-v43 .kara36-command-console > footer > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kara-v43 .kara36-command-console > footer img { width: 34px; height: 34px; object-fit: contain; }
.kara-v43 .kara36-command-console > footer span { min-width: 0; }
.kara-v43 .kara36-command-console > footer b,
.kara-v43 .kara36-command-console > footer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .kara36-command-console > footer button { min-height: 38px; padding-inline: 13px; border: 0; border-radius: 10px; color: var(--v43-accent-on); background: var(--v43-accent); font-weight: 800; white-space: nowrap; }
.kara-v43 .kara36-floating-card { position: absolute; z-index: 2; max-width: 235px; padding: 11px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--v43-line); border-radius: 14px; background: color-mix(in srgb, var(--v43-surface) 94%, transparent); box-shadow: var(--v43-shadow-2); backdrop-filter: blur(18px); }
.kara-v43 .kara36-floating-card.security { left: -34px; bottom: 84px; }
.kara-v43 .kara36-floating-card.assistant { right: -24px; top: 74px; }
.kara-v43 .kara36-floating-card img { width: 34px; height: 34px; object-fit: contain; }
.kara-v43 .kara36-floating-card b,
.kara-v43 .kara36-floating-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .kara36-proof-strip { width: min(calc(100% - 48px), var(--v43-public-max)); margin: 0 auto; padding: 17px 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--v43-line); border-radius: 18px; background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .kara36-proof-strip > div { min-width: 0; padding: 5px 16px; display: flex; align-items: center; gap: 10px; border-right: 1px solid var(--v43-line); }
.kara-v43 .kara36-proof-strip > div:last-child { border-right: 0; }
.kara-v43 .kara36-proof-strip span { color: var(--v43-accent); font-size: .65rem; font-weight: 900; }
.kara-v43 .kara36-proof-strip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v43-ink-2); font-size: .75rem; }
.kara-v43 .kara36-section { width: min(calc(100% - 48px), var(--v43-public-max)); margin-inline: auto; padding-block: clamp(46px, 4vw, 74px); }
.kara-v43 .kara36-section-head { margin-bottom: 34px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: end; gap: clamp(28px, 5vw, 80px); }
.kara-v43 .kara36-section-head h2 { margin: 0; font-size: clamp(2.1rem, 4vw, 4.2rem); letter-spacing: -.055em; }
.kara-v43 .kara36-section-head h2 em { color: var(--v43-accent); font-style: normal; }
.kara-v43 .kara36-section-head p { margin: 0; line-height: 1.75; }
.kara-v43 .kara36-section-head.centered { grid-template-columns: 1fr; text-align: center; }
.kara-v43 .kara36-section-head.centered > * { max-width: 900px; margin-inline: auto; }
.kara-v43 .kara36-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.kara-v43 .kara36-bento-card { grid-column: span 5; min-height: 320px; padding: clamp(26px, 3.5vw, 38px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--v43-accent) 12%, transparent); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 5%, var(--v43-surface)), color-mix(in srgb, var(--v43-accent) 1%, var(--v43-surface-2))); box-shadow: 0 8px 32px color-mix(in srgb, var(--v43-accent) 6%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v43-accent) 10%, transparent); transition: all 200ms cubic-bezier(.2, .75, .25, 1); }
.kara-v43 .kara36-bento-card:hover { border-color: color-mix(in srgb, var(--v43-accent) 20%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 8%, var(--v43-surface)), color-mix(in srgb, var(--v43-accent) 3%, var(--v43-surface-2))); box-shadow: 0 12px 48px color-mix(in srgb, var(--v43-accent) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v43-accent) 12%, transparent); transform: translateY(-4px); }
.kara-v43 .kara36-bento-card.wide { grid-column: span 7; }
.kara-v43 .kara36-bento-card > span,
.kara-v43 .kara36-card-copy > span { color: var(--v43-accent); font-size: .67rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .kara36-bento-card h3 { max-width: 560px; margin: 15px 0 12px; font-size: clamp(1.45rem, 2.2vw, 2.25rem); }
.kara-v43 .kara36-bento-card p { max-width: 650px; }
.kara-v43 .kara36-bento-card a { color: var(--v43-accent); font-weight: 760; }
.kara-v43 .kara36-bento-card.cyan { background: radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--v43-accent) 18%, transparent), transparent 24rem), linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 6%, var(--v43-surface)), color-mix(in srgb, var(--v43-accent) 2%, var(--v43-surface-2))); }
.kara-v43 .kara36-bento-card.cyan:hover { background: radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--v43-accent) 24%, transparent), transparent 24rem), linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 10%, var(--v43-surface)), color-mix(in srgb, var(--v43-accent) 4%, var(--v43-surface-2))); }
.kara-v43 .kara36-bento-card.violet { background: radial-gradient(circle at 95% 5%, rgba(122, 111, 140, .22), transparent 22rem), linear-gradient(135deg, color-mix(in srgb, #a8a8bc 6%, var(--v43-surface)), color-mix(in srgb, #a8a8bc 2%, var(--v43-surface-2))); }
.kara-v43 .kara36-bento-card.blue { background: radial-gradient(circle at 95% 5%, rgba(95, 108, 122, .20), transparent 22rem), linear-gradient(135deg, color-mix(in srgb, #6b8fa3 6%, var(--v43-surface)), color-mix(in srgb, #6b8fa3 2%, var(--v43-surface-2))); }
.kara-v43 .kara36-bento-card.green { background: radial-gradient(circle at 95% 5%, rgba(78, 156, 134, .19), transparent 24rem), linear-gradient(135deg, color-mix(in srgb, var(--v43-accent-2) 6%, var(--v43-surface)), color-mix(in srgb, var(--v43-accent-2) 2%, var(--v43-surface-2))); }
/* A single-row 7-column (4 labels + 3 connectors) layout cannot fit real
label text ("Canlı analiz", "Güvenli plan") inside the narrow bento
column this sits in — it was clipping to "Canlı ana"/"Güvenli p" with no
ellipsis. Match the sibling .kara36-fivem-grid's proven 2x2 layout instead
and drop the connector dashes, same as the plain (non-v43) fallback rule. */
.kara-v43 .kara36-intent-map { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kara-v43 .kara36-intent-map span { min-width: 0; padding: 10px 12px; border: 1px solid var(--v43-line); border-radius: 9px; background: var(--v43-surface-2); color: var(--v43-ink-2); font-size: .67rem; text-align: center; overflow-wrap: break-word; }
.kara-v43 .kara36-intent-map i { display: none; }
.kara-v43 .kara36-mini-metric,
.kara-v43 .kara36-ticket-flow { margin-top: 24px; }
.kara-v43 .kara36-fivem-grid { margin-top: 25px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.kara-v43 .kara36-fivem-grid div { padding: 13px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-2); }
.kara-v43 .kara36-fivem-grid b,
.kara-v43 .kara36-fivem-grid span { display: block; }
.kara-v43 .kara36-hybrid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: clamp(44px, 7vw, 110px); }
.kara-v43 .kara36-hybrid-visual { position: relative; min-height: 480px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 70px; padding: 36px; border: 1px solid var(--v43-line); border-radius: var(--v43-r4); background: linear-gradient(145deg, var(--v43-surface-2), var(--v43-surface)); box-shadow: var(--v43-shadow-2); }
.kara-v43 .kara36-hybrid-node { position: relative; z-index: 1; min-height: 170px; padding: 22px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--v43-line); border-radius: 18px; background: var(--v43-surface-2); }
.kara-v43 .kara36-hybrid-node > span { color: var(--v43-accent); font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.kara-v43 .kara36-hybrid-node b { margin-top: 10px; font-size: 1.2rem; }
.kara-v43 .kara36-hybrid-node small { margin-top: 6px; }
.kara-v43 .kara36-hybrid-route { position: absolute; left: 50%; top: 50%; width: 94px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: space-between; }
.kara-v43 .kara36-hybrid-route::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--v43-line-strong); }
.kara-v43 .kara36-hybrid-route i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--v43-accent); }
.kara-v43 .kara36-hybrid-fallback { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); padding: 8px 12px; border: 1px solid var(--v43-line); border-radius: 999px; background: var(--v43-page); color: var(--v43-muted); font-size: .72rem; text-align: center; }
.kara-v43 .kara36-hybrid-copy > span,
.kara-v43 .kara36-assistant-showcase > div:last-child > span { color: var(--v43-accent); font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .kara36-hybrid-copy h2,
.kara-v43 .kara36-assistant-showcase h2 { margin: 15px 0 16px; font-size: clamp(2rem, 3.3vw, 3.5rem); }
.kara-v43 .kara36-hybrid-copy ul { margin: 24px 0 0; padding: 0; display: grid; gap: 11px; list-style: none; }
.kara-v43 .kara36-hybrid-copy li { display: flex; gap: 10px; color: var(--v43-ink-2); }
.kara-v43 .kara36-hybrid-copy li i { color: var(--v43-positive); }
.kara-v43 .kara36-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.kara-v43 .kara36-plan-card { position: relative; min-height: 620px; padding: 32px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--v43-accent) 12%, transparent); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 3%, var(--v43-surface)), var(--v43-surface-2)); box-shadow: 0 8px 32px color-mix(in srgb, var(--v43-accent) 5%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v43-accent) 10%, transparent); transition: all 200ms cubic-bezier(.2, .75, .25, 1); }
.kara-v43 .kara36-plan-card:hover { border-color: color-mix(in srgb, var(--v43-accent) 20%, transparent); box-shadow: 0 12px 48px color-mix(in srgb, var(--v43-accent) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v43-accent) 12%, transparent); }
.kara-v43 .kara36-plan-card.featured { border-color: color-mix(in srgb, var(--v43-accent) 28%, transparent); background: linear-gradient(135deg, radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--v43-accent) 18%, transparent), transparent 20rem), linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 6%, var(--v43-surface)), color-mix(in srgb, var(--v43-accent) 2%, var(--v43-surface-2)))); box-shadow: 0 16px 64px color-mix(in srgb, var(--v43-accent) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v43-accent) 16%, transparent); transform: translateY(-8px); }
.kara-v43 .kara36-plan-card.featured:hover { box-shadow: 0 20px 80px color-mix(in srgb, var(--v43-accent) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v43-accent) 18%, transparent); transform: translateY(-12px); }
.kara-v43 .kara36-plan-card.corporate { background: linear-gradient(135deg, radial-gradient(circle at 100% 0, rgba(122, 111, 140, .18), transparent 24rem), linear-gradient(135deg, color-mix(in srgb, #8b7d9e 3%, var(--v43-surface)), var(--v43-surface-2))); }
.kara-v43 .kara36-plan-card header { min-height: 155px; }
.kara-v43 .kara36-plan-card header > span { color: var(--v43-accent); font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .kara36-plan-card h3 { margin: 13px 0 10px; font-size: 1.65rem; }
.kara-v43 .kara36-price { min-height: 78px; margin-block: 18px; padding-block: 18px; border-block: 1px solid var(--v43-line); }
.kara-v43 .kara36-price b,
.kara-v43 .kara36-price span { display: block; }
.kara-v43 .kara36-price b { font-size: 1.6rem; }
.kara-v43 .kara36-plan-card ul { margin: 0 0 26px; padding: 0; display: grid; gap: 10px; list-style: none; color: var(--v43-ink-2); }
.kara-v43 .kara36-plan-card li { position: relative; padding-left: 20px; }
.kara-v43 .kara36-plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--v43-positive); }
.kara-v43 .kara36-plan-card > a { margin-top: auto; }
.kara-v43 .kara36-assistant-showcase { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(40px, 8vw, 120px); }
.kara-v43 .kara36-assistant-showcase > div:first-child { min-height: 390px; display: grid; place-items: center; border: 1px solid var(--v43-line); border-radius: var(--v43-r4); background: radial-gradient(circle, color-mix(in srgb, var(--v43-accent) 16%, transparent), transparent 62%), var(--v43-surface); }
.kara-v43 .kara36-assistant-showcase img { max-height: 330px; object-fit: contain; }
.kara-v43 .kara36-assistant-example { margin-top: 24px; padding: 18px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; border: 1px solid var(--v43-line); border-radius: 15px; background: var(--v43-surface); }
.kara-v43 .kara36-assistant-example > i { color: var(--v43-accent); font-size: 2rem; font-style: normal; line-height: 1; }
.kara-v43 .kara36-assistant-example b,
.kara-v43 .kara36-assistant-example small { display: block; }
.kara-v43 .kara36-final-cta { width: min(calc(100% - 48px), var(--v43-public-max)); margin: 0 auto clamp(28px, 5vw, 70px); padding: clamp(28px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 36px; overflow: hidden; border: 1px solid var(--v43-line-strong); border-radius: var(--v43-r4); background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--v43-accent) 18%, transparent), transparent 25rem), var(--v43-surface); box-shadow: var(--v43-shadow-2); }
.kara-v43 .kara36-final-cta h2 { margin: 12px 0; font-size: clamp(2rem, 3.6vw, 4rem); }
.kara-v43 .kara36-final-cta > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
/* Public internal-page family */
.kara-v43 .k39-shell { width: min(calc(100% - 48px), var(--v43-public-max)); margin-inline: auto; padding: 126px 0 78px; }
.kara-v43 .k39-hero { min-height: 560px; padding: clamp(28px, 4vw, 58px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); align-items: center; gap: clamp(38px, 6vw, 90px); overflow: hidden; border: 1px solid var(--v43-line); border-radius: var(--v43-r4); background: linear-gradient(145deg, var(--v43-surface), color-mix(in srgb, var(--v43-surface-2) 90%, transparent)); box-shadow: var(--v43-shadow-2); }
.kara-v43 .k39-hero.compact { min-height: 500px; }
.kara-v43 .k39-hero-copy h1 { margin: 12px 0 18px; font-size: clamp(2.7rem, 5.2vw, 5.5rem); letter-spacing: -.06em; }
.kara-v43 .k39-gradient-text { color: var(--v43-accent); background: none; -webkit-text-fill-color: currentColor; }
.kara-v43 .k39-hero-copy > p { max-width: 720px; font-size: 1.02rem; line-height: 1.75; }
.kara-v43 .k39-hero-visual { min-height: 350px; overflow: hidden; border: 1px solid var(--v43-line); border-radius: 20px; background: var(--v43-page); box-shadow: var(--v43-shadow-1); }
.kara-v43 .k39-window-bar { min-height: 48px; padding-inline: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v43-line); background: var(--v43-surface-2); }
.kara-v43 .k39-section { padding-block: clamp(70px, 8vw, 118px); }
.kara-v43 .k39-section + .k39-section { border-top: 1px solid var(--v43-line); }
.kara-v43 .k39-section-head { margin-bottom: 32px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: end; gap: clamp(30px, 6vw, 90px); }
.kara-v43 .k39-section-head h2 { margin: 8px 0 0; font-size: clamp(2rem, 3.6vw, 3.8rem); letter-spacing: -.05em; }
.kara-v43 .k39-section-head > p { margin: 0; }
.kara-v43 :where(.k39-feature-grid, .k39-solution-grid, .k39-support-paths, .k39-project-grid, .k39-info-grid) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.kara-v43 :where(.k39-feature-grid, .k39-solution-grid, .k39-support-paths, .k39-project-grid, .k39-info-grid) > * { grid-column: span 4; }
.kara-v43 .k39-card { min-height: 220px; padding: clamp(20px, 2.5vw, 30px); transition: transform var(--v43-ease), border-color var(--v43-ease), box-shadow var(--v43-ease); }
.kara-v43 .k39-card:hover { transform: translateY(-4px); border-color: var(--v43-line-strong); box-shadow: var(--v43-shadow-2); }
.kara-v43 .k39-card h3 { margin: 16px 0 10px; font-size: 1.35rem; }
.kara-v43 .k39-card-index { color: var(--v43-accent); }
.kara-v43 .k39-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kara-v43 .k39-command-steps { padding: 18px; display: grid; gap: 10px; }
.kara-v43 .k39-command-steps > span { min-height: 62px; padding: 10px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface); }
.kara-v43 .k39-command-steps > span > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--v43-surface-3); color: var(--v43-accent); font-style: normal; }
.kara-v43 .k39-command-steps em { color: var(--v43-muted); font-size: .66rem; font-style: normal; white-space: nowrap; }
.kara-v43 .k39-support-search { margin-top: 24px; max-width: 650px; padding: 5px 6px 5px 14px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-page); }
.kara-v43 .k39-support-search input { border: 0; background: transparent; box-shadow: none; }
.kara-v43 .k39-support-search small { padding-right: 8px; white-space: nowrap; }
.kara-v43 .k39-support-search { position: relative; }
.k39-support-search-results {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
z-index: 40;
max-height: 320px;
overflow-y: auto;
padding: 6px;
border: 1px solid var(--v43-line);
border-radius: 14px;
background: var(--v43-surface);
box-shadow: var(--v43-shadow-3, 0 20px 50px rgba(0, 0, 0, .35));
}
.k39-support-search-results button {
width: 100%;
padding: 10px 12px;
border: 0;
border-radius: 10px;
display: block;
text-align: left;
background: none;
cursor: pointer;
}
.k39-support-search-results button:hover {
background: var(--v43-surface-2);
}
.k39-support-search-results button b {
display: block;
font-size: .82rem;
}
.k39-support-search-results button small {
display: block;
margin-top: 2px;
color: var(--v43-muted);
font-size: .72rem;
white-space: normal;
}
.k39-support-search-empty {
margin: 0;
padding: 12px;
color: var(--v43-muted);
font-size: .8rem;
text-align: center;
}
.kara-v43 .k39-issue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kara-v43 .k39-issue { overflow: hidden; border: 1px solid var(--v43-line); border-radius: 15px; background: var(--v43-surface); }
.kara-v43 .k39-issue summary { min-height: 82px; padding: 14px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; gap: 11px; cursor: pointer; list-style: none; }
.kara-v43 .k39-issue summary > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--v43-surface-3); }
.kara-v43 .k39-issue summary b,
.kara-v43 .k39-issue summary small { display: block; }
.kara-v43 .k39-issue-body { padding: 0 16px 18px; border-top: 1px solid var(--v43-line); }
.kara-v43 .k39-issue-body h4 { margin: 18px 0 6px; }
.kara-v43 .k39-ticket-cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 14px; }
.kara-v43 .k39-ticket-checklist { display: grid; gap: 10px; }
.kara-v43 .k39-ticket-checklist > span { padding: 11px; border-radius: 10px; background: var(--v43-surface-2); color: var(--v43-ink-2); }
/* Footer and floating assistant */
.kara-v43 .kara-footer { width: min(calc(100% - 48px), var(--v43-public-max)); margin: 0 auto 24px; padding: 22px 24px; border: 1px solid var(--v43-line); border-radius: var(--v43-r3); background: var(--v43-surface); }
/* Nav columns were `1fr repeat(3, minmax(110px,150px))` with
justify-content:space-between — the leading 1fr track (meant for the
brand column) had nothing in it since brand already lives in its own
sibling column (.kara-footer, two levels up), so it rendered as a wide
empty gap before the three link columns, and space-between pushed the
whole block toward the container's left/right edges instead of letting
it size to its own content. Three equal, content-sized columns instead. */
.kara-v43 .kara-footer-grid { display: grid; grid-template-columns: repeat(3, minmax(110px, 150px)); gap: 28px; }
.kara-v43 .kara-footer-brand img { width: 92px; }
.kara-v43 .kara-footer-brand p { font-size: .78rem; line-height: 1.55; margin-top: 10px; }
.kara-v43 .kara-footer-grid b { font-size: .74rem; }
.kara-v43 .kara-footer-grid a { font-size: .7rem; }
.kara-v43 .kara-footer-grid > div { gap: 6px; }
.kara-v43 .kara-footer-bottom { margin-top: 4px; padding-top: 14px; font-size: .62rem; }
.kara-v43 .kara-site-assistant { right: 20px; bottom: 20px; z-index: 1900; }
.kara-v43 .kara-assistant-launcher { width: 58px; height: 58px; border: 1px solid var(--v43-line-strong); border-radius: 18px; background: var(--v43-surface); box-shadow: var(--v43-shadow-2); }
/* This .kara-v43 rule (2 classes) beat the base .kara-assistant-window rule
above (1 class) on specificity, so the shrink+resize change made there
was silently overridden — width/overflow here are what actually render.
Same fix applied at the layer that wins: smaller default, user-resizable. */
.kara-v43 .kara-assistant-window { right: 0; bottom: 72px; width: min(380px, calc(100vw - 28px)); height: min(560px, calc(100vh - 110px)); min-width: 320px; min-height: 420px; max-width: calc(100vw - 28px); max-height: min(690px, calc(100vh - 110px)); overflow: auto; resize: both; border: 1px solid var(--v43-line); border-radius: 20px; background: var(--v43-surface); box-shadow: var(--v43-shadow-3); }
.kara-v43 .kara-assistant-header { border-bottom: 1px solid var(--v43-line); background: var(--v43-surface-2); }
.kara-v43 .kara-assistant-prompts { display: flex; flex-wrap: wrap; gap: 7px; }
.kara-v43 .kara-assistant-prompts button { min-height: 34px; padding: 6px 10px; border: 1px solid var(--v43-line); border-radius: 999px; background: var(--v43-surface-2); color: var(--v43-muted); }
.kara-v43 .kara-assistant-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; border-top: 1px solid var(--v43-line); }
.kara-v43 .kara-assistant-form button { min-width: 88px; }
/* Authentication */
.kara-v43.kara-auth-page { min-height: 100vh; display: grid; place-items: center; padding: clamp(16px, 4vw, 54px); }
.kara-v43 .kara-auth-shell { width: min(1120px, 100%); min-height: min(720px, calc(100vh - 64px)); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); overflow: hidden; border: 1px solid var(--v43-line); border-radius: var(--v43-r4); background: var(--v43-surface); box-shadow: var(--v43-shadow-3); }
.kara-v43 .kara-auth-shell.compact { min-height: 600px; }
.kara-v43 .kara-auth-brand { position: relative; padding: clamp(38px, 6vw, 82px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--v43-accent) 20%, transparent), transparent 28rem), linear-gradient(145deg, var(--v43-surface-2), var(--v43-page)); }
.kara-v43 .kara-auth-brand::after { content: ""; position: absolute; width: 330px; height: 330px; right: -150px; bottom: -150px; border: 1px solid var(--v43-line-strong); border-radius: 50%; box-shadow: 0 0 0 50px color-mix(in srgb, var(--v43-accent) 3%, transparent), 0 0 0 100px color-mix(in srgb, var(--v43-accent) 2%, transparent); }
.kara-v43 .kara-auth-brand img { width: 72px; height: 72px; margin-bottom: 38px; object-fit: contain; }
.kara-v43 .kara-auth-brand > span { color: var(--v43-accent); font-size: .7rem; font-weight: 850; letter-spacing: .15em; }
.kara-v43 .kara-auth-brand h1 { max-width: 620px; margin: 16px 0; font-size: clamp(2.2rem, 4vw, 4.2rem); letter-spacing: -.055em; }
.kara-v43 .kara-auth-brand p { max-width: 620px; font-size: 1rem; line-height: 1.75; }
.kara-v43 .kara-auth-card { padding: clamp(28px, 5vw, 62px); display: flex; flex-direction: column; justify-content: center; background: var(--v43-surface); }
.kara-v43 .kara-auth-card > header { margin-bottom: 26px; }
.kara-v43 .kara-auth-card > header > span { color: var(--v43-accent); font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .kara-auth-card h2 { margin: 10px 0 0; font-size: 2rem; }
.kara-v43 .kara-auth-form { display: grid; gap: 15px; }
.kara-v43 .kara-auth-form label > span { display: block; margin-bottom: 6px; color: var(--v43-muted); font-size: .73rem; font-weight: 700; }
.kara-v43 .kara-auth-form button[type="submit"] { min-height: 48px; border: 0; border-radius: 12px; color: var(--v43-accent-on); background: var(--v43-accent); font-weight: 850; }
.kara-v43 .kara-auth-alert { margin-bottom: 14px; padding: 12px 13px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); }
.kara-v43 .kara-auth-alert.error { border-color: color-mix(in srgb, var(--v43-danger) 32%, transparent); }
.kara-v43 .kara-auth-alert.success { border-color: color-mix(in srgb, var(--v43-positive) 32%, transparent); }
.kara-v43 .kara-auth-card > footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--v43-line); }
/* Brand-recognizable provider buttons (icon + title/subtitle block), matching
the common "Sign in with X" pattern instead of a bare text pill. Beats the
older !important flex/justify-content rule with matching specificity. */
.kara-auth-provider { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 14px; padding: 13px 16px !important; transition: border-color .15s ease, transform .15s ease; }
.kara-auth-provider:hover { transform: translateY(-1px); }
.kara-auth-provider-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--v43-surface-3, var(--panel-3)); }
.kara-auth-provider-icon svg { width: 20px; height: 20px; }
.kara-auth-provider.discord .kara-auth-provider-icon { color: #5865F2; }
.kara-auth-provider-copy { min-width: 0; display: grid; gap: 2px; text-align: left; }
.kara-auth-provider-copy small { color: var(--v43-muted, var(--muted)); font-weight: 500; }
/* Give the brand panel a touch more visual presence — reuse the site's
existing dotted-mesh background token instead of a plain flat gradient. */
.kara-v43 .kara-auth-brand { background-image: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--v43-accent) 20%, transparent), transparent 28rem), radial-gradient(color-mix(in srgb, var(--v43-line-strong) 55%, transparent) 1px, transparent 1px), linear-gradient(145deg, var(--v43-surface-2), var(--v43-page)); background-size: auto, 22px 22px, auto; background-position: 0 0, -4px -4px, 0 0; }
.kara-v43 .kara-auth-security-list { display: grid; gap: 9px; margin-top: 24px; }
.kara-v43 .kara-auth-security-list b { color: var(--v43-ink); font-size: .72rem; letter-spacing: .04em; }
.kara-v43 .kara-auth-security-list span { position: relative; padding-left: 20px; color: var(--v43-muted); font-size: .82rem; line-height: 1.6; }
.kara-v43 .kara-auth-security-list span::before { content: "✓"; position: absolute; left: 0; color: var(--v43-accent); font-weight: 800; }
.kara-v43 .kara-enroll-steps { margin: 20px 0 0; padding: 0; display: grid; gap: 10px; list-style: none; counter-reset: enroll; }
.kara-v43 .kara-enroll-steps li { counter-increment: enroll; padding: 11px 12px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface); }
.kara-v43 .kara-enroll-steps li::before { content: counter(enroll); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--v43-surface-3); color: var(--v43-accent); font-weight: 850; }
/* Shared signed-in top bar */
.kara-v43 .v14-header,
.kara-v43 .founder-topbar {
position: sticky;
top: 0;
z-index: 1600;
min-height: var(--v43-panel-header-h);
padding: 8px clamp(14px, 2vw, 28px);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
border-bottom: 1px solid var(--v43-line);
background: color-mix(in srgb, var(--v43-surface-soft) 94%, transparent);
box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
backdrop-filter: blur(22px) saturate(140%);
}
.kara-v43 .kara-panel-brand,
.kara-v43 .founder-brand { min-width: 190px; display: flex; align-items: center; gap: 11px; }
.kara-v43 .kara-panel-brand img,
.kara-v43 .founder-brand img { width: 38px; height: 38px; padding: 6px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); object-fit: contain; }
.kara-v43 .kara-panel-brand-copy,
.kara-v43 .founder-brand > span { min-width: 0; }
.kara-v43 .kara-panel-brand-copy b,
.kara-v43 .kara-panel-brand-copy small,
.kara-v43 .founder-brand b,
.kara-v43 .founder-brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .kara-panel-brand-copy b,
.kara-v43 .founder-brand b { color: var(--v43-ink); font-size: .86rem; }
.kara-v43 .kara-panel-brand-copy small,
.kara-v43 .founder-brand small { color: var(--v43-muted); font-size: .58rem; letter-spacing: .12em; }
.kara-v43 .kara-product-breadcrumb { justify-self: start; padding-left: 16px; border-left: 1px solid var(--v43-line); }
.kara-v43 .kara-product-breadcrumb span,
.kara-v43 .kara-product-breadcrumb b { display: block; }
.kara-v43 .kara-product-breadcrumb span { color: var(--v43-dim); font-size: .55rem; font-weight: 800; letter-spacing: .12em; }
.kara-v43 .kara-product-breadcrumb b { color: var(--v43-ink-2); font-size: .76rem; }
.kara-v43 .v14-header-actions,
.kara-v43 .founder-top-status { justify-self: end; min-width: 0; display: flex; align-items: center; gap: 10px; }
.kara-v43 .kara-panel-nav { display: flex; align-items: center; gap: 4px; }
.kara-v43 .kara-panel-nav a { min-height: 38px; padding: 7px 10px; display: flex; align-items: center; gap: 7px; border-radius: 10px; color: var(--v43-muted); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.kara-v43 .kara-panel-nav a:hover { color: var(--v43-ink); background: var(--v43-surface-2); }
.kara-v43 .kara-header-divider { width: 1px; height: 28px; background: var(--v43-line); }
.kara-v43 .kara-panel-utilities { display: flex; align-items: center; gap: 7px; }
.kara-v43 .v14-lang { position: relative; }
.kara-v43 .v14-lang > button { min-height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--v43-line); border-radius: 10px; background: var(--v43-surface-2); color: var(--v43-ink-2); font-size: .7rem; font-weight: 800; }
.kara-v43 .v14-lang [data-lang-menu] { top: calc(100% + 8px); right: 0; min-width: 150px; padding: 6px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface); box-shadow: var(--v43-shadow-2); }
.kara-v43 .v14-lang [data-lang-menu] a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--v43-muted); font-size: .72rem; }
.kara-v43 .v14-lang [data-lang-menu] a:hover { color: var(--v43-ink); background: var(--v43-surface-2); }
.kara-v43 .v14-icon-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--v43-surface-2); }
.kara-v43 .kara-account-menu { position: relative; }
.kara-v43 .kara-account-trigger { min-height: 40px; max-width: 190px; padding: 4px 8px 4px 5px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); }
.kara-v43 .kara-account-trigger img,
.kara-v43 .kara-account-trigger > span:first-child { width: 30px; height: 30px; border-radius: 9px; }
.kara-v43 .kara-account-popover { top: calc(100% + 9px); right: 0; width: min(320px, calc(100vw - 24px)); padding: 8px; border: 1px solid var(--v43-line); border-radius: 15px; background: var(--v43-surface); box-shadow: var(--v43-shadow-3); }
.kara-v43 .kara-account-popover :where(a, button) { border-radius: 9px; }
/* Dashboard */
.kara-v43 .kara25-dashboard {
width: min(100%, 1900px);
margin-inline: auto;
display: grid;
grid-template-columns: var(--v43-sidebar-w) minmax(0, 1fr);
align-items: start;
}
.kara-v43 .kara25-dashboard-sidebar {
position: sticky;
top: var(--v43-panel-header-h);
height: calc(100vh - var(--v43-panel-header-h));
padding: 18px 14px;
display: flex;
flex-direction: column;
overflow: hidden auto;
border-right: 1px solid var(--v43-line);
background: color-mix(in srgb, var(--v43-page) 88%, transparent);
}
.kara-v43 .kara25-account-card { min-height: 62px; padding: 9px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-surface); }
.kara-v43 .kara25-account-card img,
.kara-v43 .kara25-account-card > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; object-fit: cover; color: var(--v43-accent-on); background: var(--v43-accent); font-weight: 900; }
.kara-v43 .kara25-account-card b,
.kara-v43 .kara25-account-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .kara25-sidebar-nav { margin-top: 18px; display: grid; gap: 4px; }
.kara-v43 .kara25-sidebar-foot { margin-top: auto; padding: 14px; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-surface); }
.kara-v43 .kara25-sidebar-foot span,
.kara-v43 .kara25-sidebar-foot b,
.kara-v43 .kara25-sidebar-foot small,
.kara-v43 .kara25-sidebar-foot a { display: block; }
.kara-v43 .kara25-sidebar-foot span { color: var(--v43-accent); font-size: .58rem; font-weight: 850; letter-spacing: .12em; }
.kara-v43 .kara25-sidebar-foot b { margin-top: 7px; font-size: 1.25rem; }
.kara-v43 .kara25-sidebar-foot a { margin-top: 10px; color: var(--v43-accent); font-size: .7rem; font-weight: 750; }
.kara-v43 .kara25-dashboard-main { width: min(100%, var(--v43-panel-max)); margin-inline: auto; padding: clamp(24px, 3vw, 46px); }
.kara-v43 .kara25-page-head { margin-bottom: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.kara-v43 .kara25-page-head > div:first-child > span,
.kara-v43 .kara25-hero-copy > span,
.kara-v43 .kara25-panel-head > div > span { color: var(--v43-accent); font-size: .62rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .kara25-page-head h1 { margin: 9px 0 6px; font-size: clamp(2rem, 3vw, 3.2rem); }
.kara-v43 .kara25-page-head p { margin: 0; }
.kara-v43 .kara25-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.kara-v43 .kara25-hero { min-height: 310px; padding: clamp(24px, 3vw, 38px); display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(430px, .94fr); align-items: center; gap: clamp(28px, 4vw, 58px); overflow: hidden; border: 1px solid var(--v43-line-strong); border-radius: var(--v43-r3); background: radial-gradient(circle at 95% 0, color-mix(in srgb, var(--v43-accent) 12%, transparent), transparent 26rem), var(--v43-surface); box-shadow: var(--v43-shadow-2); }
.kara-v43 .kara25-hero h2 { margin: 10px 0 12px; font-size: clamp(2rem, 3.6vw, 3.8rem); }
.kara-v43 .kara25-hero-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.kara-v43 .kara25-hero-pills span { padding: 7px 9px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--v43-line); border-radius: 999px; background: var(--v43-surface-2); color: var(--v43-muted); font-size: .65rem; }
.kara-v43 .kara25-hero-pills i { width: 6px; height: 6px; border-radius: 50%; background: var(--v43-positive); }
.kara-v43 .kara25-hero-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.kara-v43 .kara25-hero-status > div { min-height: 116px; padding: 15px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--v43-line); border-radius: 14px; background: color-mix(in srgb, var(--v43-surface-2) 86%, transparent); }
.kara-v43 .kara25-hero-status span,
.kara-v43 .kara25-hero-status b,
.kara-v43 .kara25-hero-status small { display: block; }
.kara-v43 .kara25-hero-status span { color: var(--v43-muted); font-size: .66rem; }
.kara-v43 .kara25-hero-status b { margin-block: 5px; font-size: 1.45rem; }
.kara-v43 .kara25-kpis { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kara-v43 .kara25-kpi { min-height: 172px; padding: 19px; border: 1px solid var(--v43-line); border-radius: 17px; background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .kara25-kpi header { display: flex; justify-content: space-between; gap: 12px; color: var(--v43-muted); font-size: .68rem; }
.kara-v43 .kara25-kpi header i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--v43-accent); background: var(--v43-surface-3); font-style: normal; }
.kara-v43 .kara25-kpi > b { display: block; margin: 14px 0 4px; overflow-wrap: anywhere; font-size: clamp(1.5rem, 2.2vw, 2.25rem); }
.kara-v43 .kara25-content-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .5fr); align-items: start; gap: 14px; }
.kara-v43 .kara25-side-stack { display: grid; gap: 14px; }
.kara-v43 .kara25-panel { padding: 20px; overflow: hidden; }
.kara-v43 .kara25-panel-head { margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.kara-v43 .kara25-panel-head h3 { margin: 6px 0 4px; font-size: 1.25rem; }
.kara-v43 .kara25-panel-head p { margin: 0; font-size: .8rem; }
.kara-v43 .kara25-panel-head > em { flex: none; padding: 5px 8px; border: 1px solid var(--v43-line); border-radius: 999px; color: var(--v43-muted); font-size: .64rem; font-style: normal; }
.kara-v43 .kara25-server-list,
.kara-v43 .kara25-quick-list,
.kara-v43 .kara25-status-list { display: grid; gap: 8px; }
.kara-v43 .kara25-server-row { min-height: 88px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; border: 1px solid color-mix(in srgb, var(--v43-accent) 10%, transparent); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 4%, var(--v43-surface)), color-mix(in srgb, var(--v43-accent) 1%, var(--v43-surface-2))); transition: all 160ms cubic-bezier(.2, .75, .25, 1); }
.kara-v43 .kara25-server-row:hover { border-color: color-mix(in srgb, var(--v43-accent) 18%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 8%, var(--v43-surface)), color-mix(in srgb, var(--v43-accent) 3%, var(--v43-surface-2))); box-shadow: 0 4px 12px color-mix(in srgb, var(--v43-accent) 8%, transparent); }
.kara-v43 .kara25-server-identity { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; }
.kara-v43 .kara25-server-avatar { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; color: var(--v43-accent-on); background: linear-gradient(135deg, var(--v43-accent), color-mix(in srgb, var(--v43-accent) 80%, var(--v43-accent-2))); font-weight: 900; box-shadow: 0 2px 8px color-mix(in srgb, var(--v43-accent) 24%, transparent); }
.kara-v43 .kara25-server-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kara-v43 .kara25-server-copy b,
.kara-v43 .kara25-server-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .69rem; }
.kara-v43 .kara25-server-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.kara-v43 .kara25-server-tags span { padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--v43-accent) 10%, var(--v43-surface-2)); color: var(--v43-ink); font-size: .54rem; font-weight: 720; }
.kara-v43 .kara25-server-row > em { color: var(--v43-accent); font-size: .68rem; font-weight: 700; font-style: normal; white-space: nowrap; }
.kara-v43 .kara25-quick-list a { min-height: 66px; padding: 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-2); }
.kara-v43 .kara25-quick-list a > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--v43-accent); background: var(--v43-surface-3); font-style: normal; }
.kara-v43 .kara25-quick-list b,
.kara-v43 .kara25-quick-list small { display: block; }
.kara-v43 .kara25-status-list > div { padding: 10px 2px; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--v43-line); color: var(--v43-muted); font-size: .75rem; }
.kara-v43 .kara25-status-list > div:last-child { border-bottom: 0; }
.kara-v43 .kara25-status-list b.ok { color: var(--v43-positive); }
.kara-v43 .kara25-status-list b.warn { color: var(--v43-warning); }
/* Profile center */
.kara-v43 .k39-profile-main { width: min(calc(100% - 48px), 1400px); padding-top: 126px; }
.kara-v43 .k39-profile-cover { position: relative; min-height: 400px; padding: clamp(28px, 4vw, 52px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--v43-accent) 12%, transparent); border-radius: var(--v43-r4); background-size: cover; background-position: center; background-attachment: fixed; background-color: var(--v43-surface); box-shadow: var(--v43-shadow-2); }
.kara-v43 .k39-profile-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 15%, transparent) 0%, rgba(78,156,134, 0.08) 48%, rgba(0,0,0, 0.4) 100%); pointer-events: none; }
.kara-v43 .k39-profile-toolbar { position: sticky; top: 88px; z-index: 50; margin: 14px 0; min-height: 58px; padding: 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--v43-line); border-radius: 15px; background: var(--v43-surface-soft); backdrop-filter: blur(18px); }
.kara-v43 .k39-profile-tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }
.kara-v43 .k39-profile-tabs a { padding: 9px 12px; border-radius: 9px; color: var(--v43-muted); font-size: .73rem; font-weight: 700; white-space: nowrap; }
.kara-v43 .k39-profile-tabs a.is-active { color: var(--v43-ink); background: var(--v43-surface-3); }
.kara-v43 .k39-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.kara-v43 .k39-profile-panel { padding: 22px; overflow: hidden; }
.kara-v43 .k39-profile-panel.span-12 { grid-column: span 12; }
.kara-v43 .k39-profile-panel.span-8 { grid-column: span 8; }
.kara-v43 .k39-profile-panel.span-6 { grid-column: span 6; }
.kara-v43 .k39-profile-panel.span-4 { grid-column: span 4; }
.kara-v43 .k39-profile-panel-head { margin-bottom: 15px; display: flex; justify-content: space-between; gap: 20px; }
.kara-v43 .k39-profile-panel-head > div > span { color: var(--v43-accent); font-size: .61rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .k39-profile-panel-head h2 { margin: 6px 0 4px; }
.kara-v43 .profile-workspace-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.kara-v43 .profile-workspace-summary > * { min-height: 96px; padding: 13px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-2); }
.kara-v43 .k39-command-card { padding: 14px; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-surface-2); }
.kara-v43 .k39-profile-dialog-backdrop { padding: 20px; background: rgba(2, 5, 10, .82); backdrop-filter: blur(20px); }
.kara-v43 .k39-profile-dialog { width: min(820px, 100%); max-height: calc(100vh - 40px); overflow: hidden auto; border: 1px solid color-mix(in srgb, var(--v43-accent) 16%, transparent); border-radius: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 3%, var(--v43-surface)), var(--v43-surface-2)); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 color-mix(in srgb, var(--v43-accent) 8%, transparent); }
.kara-v43 .k39-profile-dialog > header { position: sticky; top: 0; z-index: 2; padding: 26px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid color-mix(in srgb, var(--v43-accent) 8%, transparent); background: linear-gradient(to bottom, color-mix(in srgb, var(--v43-accent) 2%, var(--v43-surface)), transparent); }
.kara-v43 .k39-profile-form { padding: 22px; }
.kara-v43 .k39-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kara-v43 .k39-field { display: flex; flex-direction: column; gap: 8px; }
.kara-v43 .k39-field > span { color: var(--v43-ink); font-size: .68rem; font-weight: 700; }
.kara-v43 .k39-field input, .kara-v43 .k39-field select, .kara-v43 .k39-field textarea { min-height: 42px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--v43-accent) 12%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--v43-surface) 85%, var(--v43-accent)); color: var(--v43-ink); font-size: .68rem; transition: all 140ms cubic-bezier(.2, .75, .25, 1); }
.kara-v43 .k39-field input:focus, .kara-v43 .k39-field select:focus, .kara-v43 .k39-field textarea:focus { border-color: color-mix(in srgb, var(--v43-accent) 28%, transparent); background: color-mix(in srgb, var(--v43-surface) 90%, var(--v43-accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v43-accent) 8%, transparent); }
.kara-v43 .k39-profile-form-actions { margin-top: 24px; padding-top: 20px; display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid color-mix(in srgb, var(--v43-accent) 8%, transparent); }
/* Invitation setup */
.kara-v43 .invite-main,
.kara-v43 .v14-invite-main { width: min(calc(100% - 48px), 1360px); margin-inline: auto; padding: 118px 0 72px; }
.kara-v43 .invite-hero,
.kara-v43 .v14-invite-hero { margin-bottom: 16px; padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .6fr); align-items: center; gap: 44px; border: 1px solid var(--v43-line-strong); border-radius: var(--v43-r4); background: radial-gradient(circle at 94% 5%, color-mix(in srgb, var(--v43-accent) 14%, transparent), transparent 24rem), var(--v43-surface); box-shadow: var(--v43-shadow-2); }
.kara-v43 .invite-grid,
.kara-v43 .v14-invite-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.kara-v43 .invite-grid > *,
.kara-v43 .v14-invite-grid > * { grid-column: span 6; }
.kara-v43 .invite-card,
.kara-v43 .v14-invite-card { padding: 22px; border: 1px solid var(--v43-line); border-radius: 18px; background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .invite-server-list { display: grid; gap: 9px; }
.kara-v43 .invite-server-card { min-height: 78px; padding: 11px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--v43-line); border-radius: 13px; background: var(--v43-surface-2); }
/* Plans and billing */
.kara-v43 .v16-pricing-main { width: min(calc(100% - 48px), 1460px); margin-inline: auto; padding: 58px 0 80px; }
.kara-v43 .v16-pricing-hero { min-height: 320px; padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr); align-items: center; gap: 44px; overflow: hidden; border: 1px solid var(--v43-line-strong); border-radius: var(--v43-r4); background: radial-gradient(circle at 88% 0, color-mix(in srgb, var(--v43-accent) 15%, transparent), transparent 26rem), var(--v43-surface); box-shadow: var(--v43-shadow-2); }
.kara-v43 .v16-pricing-hero h1 { font-size: clamp(2.5rem, 4vw, 4.5rem); }
.kara-v43 .billing-manual-instructions { margin-block: 14px; padding: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--v43-line); border-radius: 15px; background: var(--v43-surface); }
.kara-v43 .v16-plan-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.kara-v43 .v16-plan-card { min-height: 570px; padding: 25px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--v43-line); border-radius: var(--v43-r3); background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .v16-plan-card.featured { border-color: var(--v43-line-strong); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--v43-accent) 14%, transparent), transparent 24rem), var(--v43-surface); transform: translateY(-8px); }
.kara-v43 .v16-plan-card > header { min-height: 150px; }
.kara-v43 .v16-plan-card > header > span { color: var(--v43-accent); font-size: .65rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .v16-plan-card h2 { margin: 11px 0; }
.kara-v43 .v16-plan-card ul { margin: 18px 0 24px; padding: 0; display: grid; gap: 10px; list-style: none; }
.kara-v43 .v16-plan-card li { position: relative; padding-left: 20px; color: var(--v43-ink-2); }
.kara-v43 .v16-plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--v43-positive); }
.kara-v43 .v16-plan-card > :last-child { margin-top: auto; }
.kara-v43 .v16-feature-table { margin-top: 22px; padding: 22px; overflow: hidden; border: 1px solid var(--v43-line); border-radius: var(--v43-r3); background: var(--v43-surface); }
.kara-v43 .v16-feature-table > header { margin-bottom: 18px; }
.kara-v43 .v16-feature-table :where(table, .table-wrap) { max-width: 100%; overflow-x: auto; }
.kara-v43 .v16-feature-table th,
.kara-v43 .v16-feature-table td { min-width: 150px; padding: 13px 12px; border-bottom: 1px solid var(--v43-line); text-align: left; }
.kara-v43 .v14-plan-status,
.kara-v43 .billing-customer-portal { margin-top: 18px; padding: 22px; border: 1px solid var(--v43-line); border-radius: var(--v43-r3); background: var(--v43-surface); }
/* .v14-plan-status used to inherit display:flex from a shared "info strip"
rule meant for small pill rows — that turned its and the full
guild-grid below it into two side-by-side flex items instead of stacked
blocks. It's its own section (header + card grid), not a strip. */
.kara-v43 .v14-plan-status { display: block; }
.kara-v43 .v14-plan-status > header { margin-bottom: 18px; }
.kara-v43 .v14-plan-status > header span { color: var(--v43-accent); font-size: .62rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .v14-plan-status > header h2 { margin: 6px 0 0; font-size: 1.4rem; }
.kara-v43 .v14-guild-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.kara-v43 .v14-guild-card { min-height: 76px; padding: 11px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-2); }
/* Management verification */
.kara-v43 .k39-security-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.kara-v43 .k39-security-shell { width: min(1050px, 100%); min-height: 620px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr); overflow: hidden; border: 1px solid var(--v43-line); border-radius: var(--v43-r4); background: var(--v43-surface); box-shadow: var(--v43-shadow-3); }
.kara-v43 .k39-security-brand { padding: clamp(34px, 5vw, 68px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--v43-accent) 17%, transparent), transparent 28rem), var(--v43-page); }
.kara-v43 .k39-security-card { padding: clamp(30px, 5vw, 60px); display: flex; flex-direction: column; justify-content: center; }
.kara-v43 .k39-security-form { display: grid; gap: 14px; }
.kara-v43 .k39-field > span { display: block; margin-bottom: 6px; color: var(--v43-muted); font-size: .72rem; font-weight: 700; }
/* Guild workspace top bar */
.kara-v43 .topbar {
position: sticky;
top: 0;
z-index: 1600;
min-height: var(--v43-panel-header-h);
padding: 8px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
border-bottom: 1px solid var(--v43-line);
background: color-mix(in srgb, var(--v43-surface-soft) 95%, transparent);
box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
backdrop-filter: blur(22px) saturate(140%);
}
.kara-v43 .kara-topbar-left { min-width: 0; display: flex; align-items: center; gap: 12px; }
.kara-v43 .topbar .brand { min-width: 178px; display: flex; align-items: center; gap: 10px; }
.kara-v43 .topbar .brand-logo { width: 38px; height: 38px; padding: 6px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); object-fit: contain; }
.kara-v43 .topbar .brand > span,
.kara-v43 .kara-current-guild-copy { min-width: 0; }
.kara-v43 .topbar .brand b,
.kara-v43 .topbar .brand small,
.kara-v43 .kara-current-guild-copy b,
.kara-v43 .kara-current-guild-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .topbar .brand small { font-size: .58rem; }
.kara-v43 .kara-current-guild-chip { max-width: 250px; padding: 5px 9px 5px 6px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); }
.kara-v43 .kara-current-guild-avatar { width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; color: var(--v43-accent-on); background: var(--v43-accent); }
.kara-v43 .kara-current-guild-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kara-v43 .top-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.kara-v43 .status-dot,
.kara-v43 .premium-chip,
.kara-v43 .admin-chip { min-height: 36px; padding: 6px 9px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--v43-line); border-radius: 10px; background: var(--v43-surface-2); color: var(--v43-muted); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.kara-v43 .status-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--v43-positive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v43-positive) 12%, transparent); }
.kara-v43 .premium-chip.active { color: var(--v43-warning); border-color: color-mix(in srgb, var(--v43-warning) 24%, transparent); }
.kara-v43 .premium-chip svg { width: 15px; height: 15px; }
.kara-v43 .panel-inline-notice { width: min(calc(100% - 28px), var(--v43-panel-max)); margin: 12px auto 0; padding: 11px 13px; display: flex; gap: 10px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface); }
/* Guild control shell */
.kara-v43 .app-shell {
width: min(100%, 2048px);
margin-inline: auto;
display: grid;
grid-template-columns: var(--v43-sidebar-w) minmax(0, 1fr);
align-items: start;
}
.kara-v43 .sidebar {
position: sticky;
top: var(--v43-panel-header-h);
height: calc(100vh - var(--v43-panel-header-h));
padding: 12px;
overflow: hidden;
border-right: 1px solid var(--v43-line);
background: color-mix(in srgb, var(--v43-page) 92%, transparent);
}
.kara-v43 .kara-dock-panel { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.kara-v43 .kara-dock-panel-head { min-height: 46px; padding: 7px 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kara-v43 .kara-dock-panel-head span,
.kara-v43 .kara-dock-panel-head b { display: block; }
.kara-v43 .kara-dock-panel-head span { color: var(--v43-accent); font-size: .55rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .kara-dock-panel-head b { margin-top: 3px; font-size: .78rem; }
.kara-v43 #karaDockMobileClose { display: none; width: 32px; height: 32px; border: 1px solid var(--v43-line); border-radius: 9px; background: var(--v43-surface-2); }
.kara-v43 .server-switcher { position: relative; }
.kara-v43 .current-server { width: 100%; min-height: 64px; padding: 9px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 9px; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-surface); text-align: left; }
.kara-v43 .current-server > img,
.kara-v43 .current-server > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; object-fit: cover; color: var(--v43-accent-on); background: var(--v43-accent); font-weight: 900; }
.kara-v43 .current-server > span:nth-child(2) { min-width: 0; }
.kara-v43 .current-server b,
.kara-v43 .current-server small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .current-server small { font-size: .61rem; }
.kara-v43 .current-server strong { color: var(--v43-accent); }
.kara-v43 .switcher-menu { left: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 28px)); padding: 8px; overflow: hidden; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-surface); box-shadow: var(--v43-shadow-3); }
.kara-v43 .switcher-head { padding: 6px; display: grid; gap: 7px; }
.kara-v43 .switcher-list { max-height: 280px; display: grid; gap: 5px; overflow: auto; }
.kara-v43 .switcher-item { min-height: 48px; padding: 6px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 8px; border-radius: 10px; }
.kara-v43 .switcher-item:hover,
.kara-v43 .switcher-item.selected { background: var(--v43-surface-2); }
.kara-v43 .switcher-item img,
.kara-v43 .switcher-item > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; object-fit: cover; background: var(--v43-surface-3); }
.kara-v43 .all-servers { margin-top: 6px; padding: 8px; display: block; border-top: 1px solid var(--v43-line); color: var(--v43-accent); font-size: .7rem; font-weight: 740; }
.kara-v43 .kara-dock-search-wrap { margin-top: 10px; }
.kara-v43 .nav-search { min-height: 40px; padding: 4px 7px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 22px; align-items: center; gap: 5px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); }
.kara-v43 .nav-search svg { width: 16px; fill: none; stroke: currentColor; }
.kara-v43 .nav-search input { min-height: 30px; padding: 3px; border: 0; background: transparent; box-shadow: none; font-size: .7rem; }
.kara-v43 .nav-search kbd { padding: 3px 5px; border: 1px solid var(--v43-line); border-radius: 5px; color: var(--v43-dim); background: var(--v43-surface); font-size: .52rem; }
.kara-v43 .nav-search button { width: 22px; height: 22px; border: 0; background: transparent; color: var(--v43-dim); }
.kara-v43 .side-nav { flex: 1; margin-top: 8px; padding-right: 4px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; }
.kara-v43 .kara-dock-section { padding-block: 6px; }
.kara-v43 .kara-dock-heading-static { min-height: 34px; padding: 5px 7px; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 7px; }
.kara-v43 .kara-dock-group-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--v43-dim); background: var(--v43-surface-2); }
.kara-v43 .kara-dock-group-icon svg { width: 14px; height: 14px; }
.kara-v43 .kara-dock-section-copy b { color: var(--v43-dim); font-size: .56rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.kara-v43 .kara-dock-items { display: grid; gap: 3px; }
.kara-v43 .nav-item { min-height: 46px; padding: 6px 7px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 11px; color: var(--v43-muted); }
.kara-v43 .nav-item:hover { color: var(--v43-ink); background: var(--v43-surface-2); }
.kara-v43 .nav-item.active { color: var(--v43-ink); border-color: var(--v43-accent); background: color-mix(in srgb, var(--v43-accent) 14%, var(--v43-surface)); }
.kara-v43 .nav-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--v43-dim); background: var(--v43-surface-2); }
.kara-v43 .nav-item.active .nav-icon { color: var(--v43-accent); background: color-mix(in srgb, var(--v43-accent) 16%, var(--v43-surface-3)); }
.kara-v43 .nav-icon svg { width: 16px; height: 16px; }
.kara-v43 .nav-copy { min-width: 0; }
.kara-v43 .nav-copy b,
.kara-v43 .nav-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .nav-copy b { font-size: .7rem; }
.kara-v43 .nav-copy small { font-size: .56rem; }
.kara-v43 .kara-dock-item-end { flex: none; }
.kara-v43 .plan-badge { padding: 3px 5px; border-radius: 5px; background: var(--v43-surface-3); color: var(--v43-warning); font-size: .5rem; font-style: normal; }
.kara-v43 .kara-dock-footer { padding-top: 9px; border-top: 1px solid var(--v43-line); }
.kara-v43 .kara-dock-plan { min-height: 48px; padding: 7px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; border-radius: 10px; background: var(--v43-surface-2); }
.kara-v43 .kara-dock-plan > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--v43-warning); background: var(--v43-surface-3); }
.kara-v43 .kara-dock-plan svg { width: 15px; height: 15px; }
.kara-v43 .kara-dock-plan b,
.kara-v43 .kara-dock-plan small { display: block; }
.kara-v43 .kara-dock-plan em { color: var(--v43-accent); font-size: .58rem; font-style: normal; white-space: nowrap; }
.kara-v43 .kara-dock-footer-actions { margin-top: 5px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.kara-v43 .kara-dock-footer-actions > button { min-height: 44px; padding: 5px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px; align-items: center; gap: 7px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.kara-v43 .kara-dock-footer-actions > button:hover { background: var(--v43-surface-2); }
.kara-v43 .sidebar-profile-avatar { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: var(--v43-surface-3); }
.kara-v43 .sidebar-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kara-v43 .kara-dock-footer-actions b,
.kara-v43 .kara-dock-footer-actions small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .kara-dock-footer-actions form button { width: 42px; height: 44px; border: 1px solid var(--v43-line); border-radius: 10px; background: var(--v43-surface-2); }
.kara-v43 .content { width: min(100%, var(--v43-panel-max)); min-width: 0; margin-inline: auto; padding: clamp(18px, 2.4vw, 38px); }
.kara-v43 .mobile-head { display: none; }
.kara-v43 .page-head { position: relative; min-height: 170px; margin-bottom: 14px; padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; overflow: hidden; border: 1px solid var(--v43-line-strong); border-radius: var(--v43-r3); background: radial-gradient(circle at 94% 0, color-mix(in srgb, var(--v43-accent) 13%, transparent), transparent 24rem), var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .page-title-row { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: start; gap: 15px; }
.kara-v43 .page-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--v43-line); border-radius: 14px; color: var(--v43-accent-on); background: var(--v43-accent); }
.kara-v43 .page-icon svg { width: 23px; height: 23px; }
.kara-v43 .page-head h1 { margin: 4px 0 6px; font-size: clamp(1.8rem, 3vw, 3rem); }
.kara-v43 .page-head p { margin: 0; max-width: 780px; }
.kara-v43 .page-head-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.kara-v43 .save-state { padding: 7px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--v43-line); border-radius: 999px; background: var(--v43-surface-2); color: var(--v43-muted); font-size: .67rem; }
.kara-v43 .save-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--v43-positive); }
.kara-v43 .page-brand-watermark { width: 58px; opacity: .34; }
.kara-v43 .page-head-art { position: absolute; inset: 0; pointer-events: none; opacity: .35; }
/* Guild module surfaces: fluid structure */
.kara-v43 :where(
.metric-grid, .workspace-kpi-grid, .ai-runtime-strip, .ai-metrics,
.stat-grid, .module-metrics, .ops-suite-metrics
) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kara-v43 :where(
.metric, .workspace-kpi, .stat-card, .module-metric, .ai-metric
) { min-height: 138px; padding: 17px; overflow: hidden; border: 1px solid var(--v43-line); border-radius: 16px; background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 :where(.metric, .workspace-kpi, .stat-card, .module-metric, .ai-metric) b { overflow-wrap: anywhere; }
.kara-v43 .workspace-kpi { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
.kara-v43 .workspace-kpi-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--v43-accent); background: var(--v43-surface-3); }
.kara-v43 .workspace-kpi-icon svg { width: 18px; height: 18px; }
.kara-v43 .workspace-kpi-index { position: absolute; right: 12px; bottom: 8px; color: var(--v43-dim); font-size: .58rem; }
.kara-v43 :where(
.workspace-main-grid, .grid-2, .two-column, .settings-grid, .module-grid,
.security-grid, .provider-grid, .ticket-grid, .custom-bot-layout,
.ticket-pro-overview, .backup-dashboard-grid, .scan-layout
) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.kara-v43 :where(
.grid-3, .three-column, .marketplace-grid,
.template-grid, .setup-workflow
) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
.kara-v43 :where(
.workspace-panel, .settings-section, .module-section, .ai-control-hero,
.ticket-pro-card, .backup-card, .security-card, .provider-card,
.template-card, .marketplace-card, .policy-workspace,
.antiraid-workspace, .ai-security-center, .ai-context-diagnostics
) { min-width: 0; padding: clamp(18px, 2.2vw, 25px); overflow: hidden; border: 1px solid var(--v43-line); border-radius: var(--v43-r3); background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .workspace-panel-head,
.kara-v43 .card-title,
.kara-v43 .module-head,
.kara-v43 .section-head { margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.kara-v43 .workspace-panel-head h2,
.kara-v43 .card-title h2,
.kara-v43 .module-head h2,
.kara-v43 .section-head h2 { margin: 6px 0 4px; }
.kara-v43 .workspace-panel-head p,
.kara-v43 .card-title p,
.kara-v43 .module-head p,
.kara-v43 .section-head p { margin: 0; }
.kara-v43 .card-title { justify-content: flex-start; }
.kara-v43 .card-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--v43-accent); background: var(--v43-surface-3); }
.kara-v43 .card-icon svg { width: 20px; height: 20px; }
.kara-v43 :where(.settings-form, .founder-form-stack, .provider-settings-form, .profile-form, .module-form) { display: grid; gap: 14px; }
.kara-v43 :where(.form-grid, .founder-form-grid, .master-identity-policy-grid, .ai-global-policy-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kara-v43 :where(.field, .founder-field, .master-identity-field) { min-width: 0; display: block; }
.kara-v43 :where(.field, .founder-field, .master-identity-field) > span { display: block; margin-bottom: 6px; color: var(--v43-muted); font-size: .7rem; font-weight: 710; }
.kara-v43 :where(.field, .founder-field, .master-identity-field) > small { display: block; margin-top: 5px; }
.kara-v43 .toggle-row { min-height: 62px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-2); }
.kara-v43 .toggle-row > span { min-width: 0; }
.kara-v43 .toggle-row b,
.kara-v43 .toggle-row small { display: block; }
.kara-v43 .toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.kara-v43 .toggle-row > i { position: relative; width: 44px; height: 24px; border: 1px solid var(--v43-line); border-radius: 999px; background: var(--v43-surface-3); }
.kara-v43 .toggle-row > i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--v43-muted); transition: transform var(--v43-ease), background var(--v43-ease); }
.kara-v43 .toggle-row input:checked + i { border-color: var(--v43-line-strong); background: color-mix(in srgb, var(--v43-accent) 20%, var(--v43-surface-3)); }
.kara-v43 .toggle-row input:checked + i::after { transform: translateX(20px); background: var(--v43-accent); }
.kara-v43 .form-actions,
.kara-v43 .settings-actions,
.kara-v43 .module-actions,
.kara-v43 .vault-actions { padding-top: 15px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--v43-line); }
.kara-v43 :where(.table-wrap, .data-table-wrap, .workspace-flow-table-wrap, .policy-table, .audit-table-wrap) { max-width: 100%; overflow-x: auto; border: 1px solid var(--v43-line); border-radius: 13px; }
.kara-v43 :where(.data-table, .workspace-flow-table, .policy-table table, .audit-table) th,
.kara-v43 :where(.data-table, .workspace-flow-table, .policy-table table, .audit-table) td { min-width: 128px; padding: 12px 11px; border-bottom: 1px solid var(--v43-line); text-align: left; vertical-align: top; }
.kara-v43 :where(.data-table, .workspace-flow-table, .policy-table table, .audit-table) th { position: sticky; top: 0; z-index: 1; color: var(--v43-muted); background: var(--v43-surface-2); font-size: .62rem; letter-spacing: .07em; }
.kara-v43 :where(.data-table, .workspace-flow-table, .policy-table table, .audit-table) tr:last-child td { border-bottom: 0; }
.kara-v43 .ai-control-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); align-items: center; gap: 30px; border-color: var(--v43-line-strong); background: radial-gradient(circle at 94% 0, color-mix(in srgb, var(--v43-accent) 14%, transparent), transparent 24rem), var(--v43-surface); }
.kara-v43 .metric-grid.ai-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kara-v43 .ai-runtime-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kara-v43 .setup-workflow,
.kara-v43 .template-grid,
.kara-v43 .ticket-pro-overview,
.kara-v43 .provider-settings-form,
.kara-v43 .security-event-head,
.kara-v43 .backup-dashboard-grid,
.kara-v43 .custom-bot-layout,
.kara-v43 .marketplace-grid { min-width: 0; }
.kara-v43 .security-event-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.kara-v43 :where(.event-list, .activity-list, .audit-list, .member-list, .command-list, .template-list) { display: grid; gap: 8px; }
.kara-v43 :where(.event-item, .activity-item, .audit-item, .member-row, .command-row, .template-row) { min-width: 0; padding: 11px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-2); }
.kara-v43 :where(.event-item, .activity-item, .audit-item, .member-row, .command-row, .template-row) * { min-width: 0; overflow-wrap: anywhere; }
.kara-v43 :where(.empty-state, .kara25-empty, .no-results) { padding: 28px; border: 1px dashed var(--v43-line); border-radius: 13px; color: var(--v43-muted); background: var(--v43-surface-2); text-align: center; }
/* Founder console */
.kara-v43 .founder-layout { width: min(100%, 2048px); margin-inline: auto; display: grid; grid-template-columns: var(--v43-sidebar-w) minmax(0, 1fr); align-items: start; }
.kara-v43 .founder-sidebar { position: sticky; top: var(--v43-panel-header-h); height: calc(100vh - var(--v43-panel-header-h)); padding: 18px 14px; display: flex; flex-direction: column; overflow: hidden auto; border-right: 1px solid color-mix(in srgb, var(--v43-accent) 12%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--v43-accent) 3%, var(--v43-page)) 0%, var(--v43-page) 100%); }
.kara-v43 .founder-sidebar-head { padding: 10px 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--v43-accent) 8%, transparent); }
.kara-v43 .founder-sidebar-head span,
.kara-v43 .founder-sidebar-head b { display: block; }
.kara-v43 .founder-sidebar-head span { color: var(--v43-accent); font-size: .55rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.kara-v43 .founder-sidebar-head b { margin-top: 6px; font-size: .88rem; font-weight: 700; background: linear-gradient(135deg, var(--v43-ink), color-mix(in srgb, var(--v43-ink) 75%, transparent)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.kara-v43 .founder-security-shortcut { min-height: 42px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--v43-warning) 22%, transparent); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--v43-warning) 8%, var(--v43-surface)), color-mix(in srgb, var(--v43-warning) 3%, var(--v43-surface))); color: var(--v43-warning); font-size: .68rem; font-weight: 720; transition: all 160ms cubic-bezier(.2, .75, .25, 1); }
.kara-v43 .founder-security-shortcut:hover { border-color: color-mix(in srgb, var(--v43-warning) 35%, transparent); background: color-mix(in srgb, var(--v43-warning) 12%, var(--v43-surface)); }
.kara-v43 .founder-nav { margin-top: 10px; display: grid; gap: 3px; flex: 1; }
.kara-v43 .founder-nav button { min-height: 40px; padding: 8px 9px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--v43-muted); text-align: left; font-size: .66rem; font-weight: 640; transition: all 140ms cubic-bezier(.2, .75, .25, 1); cursor: pointer; }
.kara-v43 .founder-nav button:hover { color: var(--v43-ink); background: color-mix(in srgb, var(--v43-accent) 5%, var(--v43-surface)); }
.kara-v43 .founder-nav button.active { color: var(--v43-ink); border-color: var(--v43-accent); background: color-mix(in srgb, var(--v43-accent) 14%, var(--v43-surface)); box-shadow: none; }
.kara-v43 .founder-nav .nav-icon svg { fill: none; stroke: currentColor; transition: all 140ms cubic-bezier(.2, .75, .25, 1); }
.kara-v43 .founder-nav button:hover .nav-icon { background: color-mix(in srgb, var(--v43-accent) 6%, var(--v43-surface-2)); }
.kara-v43 .founder-nav button.active .nav-icon { color: var(--v43-accent); background: color-mix(in srgb, var(--v43-accent) 16%, var(--v43-surface-3)); }
.kara-v43 .founder-nav em { padding: 3px 6px; border-radius: 6px; color: var(--v43-ink); background: color-mix(in srgb, var(--v43-accent) 15%, var(--v43-surface-2)); font-size: .52rem; font-weight: 740; font-style: normal; }
.kara-v43 .founder-vault-mini { margin-top: auto; padding: 13px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--v43-accent) 15%, transparent); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--v43-accent) 6%, var(--v43-surface)), color-mix(in srgb, var(--v43-accent) 2%, var(--v43-surface))); }
.kara-v43 .vault-lock-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--v43-accent); background: color-mix(in srgb, var(--v43-accent) 14%, var(--v43-surface-2)); }
.kara-v43 .vault-lock-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }
.kara-v43 .founder-vault-mini b,
.kara-v43 .founder-vault-mini small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.kara-v43 .founder-main { width: min(100%, var(--v43-panel-max)); min-width: 0; margin-inline: auto; padding: clamp(20px, 2.8vw, 42px); }
.kara-v43 .founder-hero { min-height: 260px; padding: clamp(26px, 4vw, 46px); display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: center; gap: 30px; overflow: hidden; border: 1px solid var(--v43-line-strong); border-radius: var(--v43-r4); background: radial-gradient(circle at 90% 0, color-mix(in srgb, var(--v43-accent) 15%, transparent), transparent 24rem), var(--v43-surface); box-shadow: var(--v43-shadow-2); }
.kara-v43 .founder-hero h1 { margin: 10px 0 12px; max-width: 850px; font-size: clamp(2.1rem, 4vw, 4.2rem); }
.kara-v43 .founder-hero p { max-width: 780px; }
.kara-v43 .founder-hero-orbit { position: relative; min-height: 190px; display: grid; place-items: center; }
.kara-v43 .founder-hero-orbit img { position: relative; z-index: 1; max-height: 170px; object-fit: contain; }
.kara-v43 .orbit-ring { position: absolute; width: 180px; height: 180px; border: 1px solid var(--v43-line-strong); border-radius: 50%; box-shadow: 0 0 0 28px color-mix(in srgb, var(--v43-accent) 3%, transparent), 0 0 0 56px color-mix(in srgb, var(--v43-accent) 2%, transparent); }
.kara-v43 .orbit-label { position: absolute; right: 0; bottom: 8px; z-index: 2; padding: 6px 9px; border: 1px solid var(--v43-line); border-radius: 999px; background: var(--v43-page); color: var(--v43-accent); font-size: .58rem; font-weight: 850; letter-spacing: .12em; }
.kara-v43 .founder-section { margin-top: 14px; padding: clamp(20px, 2.5vw, 30px); overflow: hidden; border: 1px solid var(--v43-line); border-radius: var(--v43-r3); background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .founder-section-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.kara-v43 .founder-section-head > div > span,
.kara-v43 .founder-card-head > div > span { color: var(--v43-accent); font-size: .59rem; font-weight: 850; letter-spacing: .12em; }
.kara-v43 .founder-section-head h2 { margin: 6px 0 4px; }
.kara-v43 .founder-section-head p { margin: 0; }
.kara-v43 .founder-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.kara-v43 .founder-stat-grid > article { min-height: 140px; padding: 17px; border: 1px solid var(--v43-line); border-radius: 15px; background: var(--v43-surface-2); }
.kara-v43 .founder-stat-grid span,
.kara-v43 .founder-stat-grid b,
.kara-v43 .founder-stat-grid small { display: block; }
.kara-v43 .founder-stat-grid span { color: var(--v43-muted); font-size: .66rem; }
.kara-v43 .founder-stat-grid b { margin: 12px 0 5px; overflow-wrap: anywhere; font-size: clamp(1.35rem, 2vw, 2rem); }
.kara-v43 .kara18-dashboard-analytics { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kara-v43 .kara18-analytics-card { min-height: 310px; padding: 20px; border: 1px solid var(--v43-line); border-radius: 17px; background: var(--v43-surface-2); }
.kara-v43 .kara18-analytics-head { display: flex; justify-content: space-between; gap: 14px; }
.kara-v43 .kara18-workspace-chart { height: 180px; margin-top: 30px; padding-top: 20px; display: flex; align-items: end; justify-content: space-around; gap: 8px; border-bottom: 1px solid var(--v43-line); }
.kara-v43 .kara18-workspace-chart > span { position: relative; width: min(38px, 13%); height: var(--h); min-height: 10px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--v43-accent), color-mix(in srgb, var(--v43-accent) 25%, transparent)); }
.kara-v43 .kara18-workspace-chart > span::after { content: attr(data-label); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); color: var(--v43-dim); font-size: .55rem; }
.kara-v43 .kara18-health-ring { width: 150px; height: 150px; margin: 24px auto 16px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--v43-accent) calc(var(--p) * 1%), var(--v43-surface-3) 0); }
.kara-v43 .kara18-health-ring::before { content: ""; position: absolute; width: 118px; height: 118px; border-radius: 50%; background: var(--v43-surface-2); }
.kara-v43 .kara18-health-ring > div { position: relative; z-index: 1; text-align: center; }
.kara-v43 .kara18-health-ring b,
.kara-v43 .kara18-health-ring small { display: block; }
.kara-v43 .kara18-health-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kara-v43 .kara18-health-list > div { padding: 8px; display: flex; justify-content: space-between; gap: 10px; border-radius: 8px; background: var(--v43-surface-3); color: var(--v43-muted); font-size: .66rem; }
.kara-v43 .founder-overview-grid,
.kara-v43 .founder-site-grid,
.kara-v43 .founder-provider-grid,
.kara-v43 .billing-provider-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.kara-v43 .founder-panel { padding: 20px; overflow: hidden; }
.kara-v43 .founder-card-head { margin-bottom: 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.kara-v43 .founder-card-head h3 { margin: 6px 0 0; }
.kara-v43 .provider-health-list,
.kara-v43 .vault-paths { display: grid; gap: 8px; }
.kara-v43 .provider-health-list > div { min-height: 58px; padding: 9px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); }
.kara-v43 .provider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v43-dim); }
.kara-v43 .provider-dot.ok { background: var(--v43-positive); }
.kara-v43 .provider-dot.error { background: var(--v43-danger); }
.kara-v43 .provider-health-list b,
.kara-v43 .provider-health-list small { display: block; }
.kara-v43 .health-tag,
.kara-v43 .secure-badge { padding: 4px 7px; border: 1px solid var(--v43-line); border-radius: 999px; color: var(--v43-muted); background: var(--v43-surface-3); font-size: .56rem; font-style: normal; white-space: nowrap; }
.kara-v43 .vault-paths > div { padding: 10px; display: grid; grid-template-columns: minmax(100px, .35fr) minmax(0, .65fr); gap: 12px; border: 1px solid var(--v43-line); border-radius: 10px; background: var(--v43-surface-2); }
.kara-v43 .vault-paths code,
.kara-v43 .vault-paths b { min-width: 0; overflow-wrap: anywhere; text-align: right; }
/* Operasyon Merkezi: durum kartlarına ikon + renk kodlu saglik durumu,
olay listesindeki uzun kodlarin basligin icine kacip garip sardigi
sorunu ayri bir rozete tasiyarak duzeltiyor. Yalnizca bu bolume
(.ops-center) ozel; paylasilan .founder-stat-grid/.founder-panel
temel kurallari diger sayfalarda (Genel Durum, Abonelik) degismedi. */
.kara-v43 .ops-center .founder-head-status { padding: 6px 12px; border: 1px solid var(--v43-line); border-radius: 999px; background: var(--v43-surface-2); font-size: .68rem; font-weight: 700; }
.kara-v43 .ops-center .founder-head-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--v43-dim); }
.kara-v43 .ops-center .founder-head-status.ok i { background: var(--v43-positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v43-positive) 20%, transparent); }
.kara-v43 .ops-center .founder-head-status.error { border-color: color-mix(in srgb, var(--v43-danger) 35%, var(--v43-line)); color: var(--v43-danger); }
.kara-v43 .ops-center .founder-head-status.error i { background: var(--v43-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v43-danger) 20%, transparent); }
.kara-v43 .ops-center .founder-stat-grid > article { display: flex; align-items: flex-start; gap: 12px; transition: border-color 140ms ease, background 140ms ease; }
.kara-v43 .ops-center .founder-stat-grid > article:hover { border-color: var(--v43-line-strong); }
.kara-v43 .ops-center .founder-stat-grid > article > div { min-width: 0; }
.kara-v43 .ops-center .founder-stat-grid span { margin: 0; }
.kara-v43 .ops-center .founder-stat-grid b { margin: 7px 0 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(1.05rem, 1.7vw, 1.5rem); }
.kara-v43 .ops-center .ops-stat-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--v43-dim); background: var(--v43-surface-3); transition: background 140ms ease, color 140ms ease; }
.kara-v43 .ops-center .ops-stat-icon svg { width: 18px; height: 18px; }
.kara-v43 .ops-center article.ok .ops-stat-icon { color: var(--v43-positive); background: color-mix(in srgb, var(--v43-positive) 16%, var(--v43-surface-3)); }
.kara-v43 .ops-center article.warn .ops-stat-icon { color: var(--v43-warning); background: color-mix(in srgb, var(--v43-warning) 16%, var(--v43-surface-3)); }
.kara-v43 .ops-center article.error .ops-stat-icon { color: var(--v43-danger); background: color-mix(in srgb, var(--v43-danger) 16%, var(--v43-surface-3)); }
/* .founder-system-map, paylasilan bir kural yuzunden (baska bircok grid
sinifiyla ayni satirda: display:grid; grid-template-columns:repeat(2,..))
baslik+listeyi YAN YANA iki sutuna bolup basligin altinda kocaman bos
alan birakiyordu (liste dar sutuna sikisiyordu). Bu hata benim
degisikliklerimden once de vardi ve founder-system-map'in admin.ejs'teki
HER IKI kullaniminda da (Genel Durum'daki "AI Router" karti VE
Operasyon Merkezi'ndeki "Son sistem olaylari" karti - ikisi de ayni
baslik+liste kalibinda) ayni sekilde mevcut; liste kisa oldugunda pek
fark edilmiyordu. Sinif baska hicbir yerde kullanilmadigi icin genel
(founder konsolu capinda) duzeltildi, herhangi bir sayfaya ozel
kapsamlama gerekmedi.
Olay/yedek satirlari artik
/: kapaliyken tek satirlik
kompakt bir onizleme (kod+baslik kirpilir, tam metin acilinca gorunur),
tiklaninca altina tam detay panel acilir - baska JS gerekmez. Liste
kapsayicisi max-height+scroll ile en fazla ~10 satir gosterir, geri
kalani kaydirilir; iki liste de ayni tavana sahip oldugu icin yan yana
dururken biri digerinden kisa kalip bos alan birakmiyor. */
.kara-v43.founder-console-page .founder-system-map { display: block; }
.kara-v43 .ops-center .provider-health-list,
.kara-v43 .ops-center .vault-paths {
/* display:grid (temel kural) + max-height/overflow-y birlesince, acik
bir
: kapaliyken tek satirlik
kompakt bir onizleme (kod+baslik kirpilir, tam metin acilinca gorunur),
tiklaninca altina tam detay panel acilir - baska JS gerekmez. Liste
kapsayicisi max-height+scroll ile en fazla ~10 satir gosterir, geri
kalani kaydirilir; iki liste de ayni tavana sahip oldugu icin yan yana
dururken biri digerinden kisa kalip bos alan birakmiyor. */
.kara-v43.founder-console-page .founder-system-map { display: block; }
.kara-v43 .ops-center .provider-health-list,
.kara-v43 .ops-center .vault-paths {
/* display:grid (temel kural) + max-height/overflow-y birlesince, acik
bir satirinin buyumesi gereken yuksekligi Chromium'un grid
"auto" satir hesaplamasi yok sayip HER satiri konteyner yuksekligine
esit sekilde bolustur uyordu (acik satir bile 46px'te kaliyordu).
flex + column bu senaryoda (degisken yukseklikte, kaydirilan satir
listesi) standart ve guvenilir davraniyor. */
display: flex;
flex-direction: column;
max-height: 536px;
overflow-y: auto;
padding-right: 4px;
}
.kara-v43 .ops-center .ops-event-row,
.kara-v43 .ops-center .ops-backup-row {
/* overflow:hidden BURADA KULLANILMAZ: yukseklik siniri olan bir grid
konteyneri (max-height+overflow-y:auto) icindeki grid ogelerinde
overflow:hidden, spec geregi otomatik min/max icerik boyutunu 0'a
indirip TUM satirlarin (acik olsa bile) tek bir cizgiye sikismasina
yol aciyordu. Kose yuvarlama overflow'a degil .ops-detail'in kendi
alt kose radius'una devredildi. */
flex: none;
min-height: 46px;
border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); transition: border-color 140ms ease;
}
.kara-v43 .ops-center .ops-event-row:hover,
.kara-v43 .ops-center .ops-backup-row:hover { border-color: var(--v43-line-strong); }
.kara-v43 .ops-center .ops-event-row > summary,
.kara-v43 .ops-center .ops-backup-row > summary { list-style: none; cursor: pointer; min-height: 46px; padding: 9px; display: grid; align-items: center; gap: 9px; border-radius: 11px; }
.kara-v43 .ops-center .ops-event-row > summary::-webkit-details-marker,
.kara-v43 .ops-center .ops-backup-row > summary::-webkit-details-marker { display: none; }
.kara-v43 .ops-center .ops-event-row > summary:hover,
.kara-v43 .ops-center .ops-backup-row > summary:hover { background: color-mix(in srgb, var(--v43-accent) 4%, transparent); }
.kara-v43 .ops-center .ops-event-row[open] > summary,
.kara-v43 .ops-center .ops-backup-row[open] > summary { border-bottom: 1px solid var(--v43-line); border-radius: 11px 11px 0 0; }
.kara-v43 .ops-center .ops-chevron { width: 14px; height: 14px; color: var(--v43-dim); transition: transform 140ms ease; }
.kara-v43 .ops-center [open] .ops-chevron { transform: rotate(90deg); }
.kara-v43 .ops-center .ops-event-row > summary { grid-template-columns: 10px minmax(0, 1fr) auto 14px; }
.kara-v43 .ops-center .ops-event-row > summary > div { min-width: 0; }
.kara-v43 .ops-center .ops-event-row b { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; font-size: .72rem; font-weight: 700; }
.kara-v43 .ops-center .ops-event-code { flex: 0 1 auto; max-width: 40%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 2px 6px; border-radius: 6px; background: var(--v43-surface-3); color: var(--v43-dim); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .56rem; font-weight: 700; letter-spacing: .01em; }
.kara-v43 .ops-center .ops-event-title { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kara-v43 .ops-center .ops-event-row small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--v43-muted); font-size: .62rem; }
.kara-v43 .ops-center .ops-backup-row > summary { grid-template-columns: minmax(70px, .26fr) minmax(0, .56fr) minmax(56px, .18fr) 14px; }
.kara-v43 .ops-center .ops-backup-row span,
.kara-v43 .ops-center .ops-backup-row code,
.kara-v43 .ops-center .ops-backup-row b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.kara-v43 .ops-center .ops-backup-row span { color: var(--v43-muted); font-size: .68rem; }
.kara-v43 .ops-center .ops-backup-row code { color: var(--v43-dim); font-size: .6rem; }
.kara-v43 .ops-center .ops-backup-row b { color: var(--v43-ink); font-size: .7rem; font-weight: 700; text-align: right; }
.kara-v43 .ops-center .ops-detail { padding: 10px 13px 13px 32px; border-radius: 0 0 11px 11px; background: color-mix(in srgb, var(--v43-accent) 3%, transparent); }
.kara-v43 .ops-center .ops-detail dl { display: grid; gap: 7px; }
.kara-v43 .ops-center .ops-detail dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.kara-v43 .ops-center .ops-detail dt { color: var(--v43-dim); font-size: .56rem; font-weight: 800; letter-spacing: .07em; }
.kara-v43 .ops-center .ops-detail dd { margin: 0; overflow-wrap: anywhere; color: var(--v43-ink); font-size: .7rem; }
@media (max-width: 640px) {
.kara-v43 .ops-center .ops-backup-row > summary { grid-template-columns: minmax(0, 1fr) minmax(56px, .28fr) 14px; }
.kara-v43 .ops-center .ops-backup-row code { display: none; }
.kara-v43 .ops-center .ops-backup-row b { text-align: left; }
.kara-v43 .ops-center .ops-detail dl > div { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.kara-v43 .ops-center .founder-stat-grid > article { align-items: center; }
.kara-v43 .ops-center .vault-paths > div { grid-template-columns: minmax(0, 1fr) auto; }
.kara-v43 .ops-center .vault-paths code { display: none; }
}
.kara-v43 .founder-provider-card,
.kara-v43 .billing-provider-card { padding: 20px; overflow: hidden; border: 1px solid var(--v43-line); border-radius: 17px; background: var(--v43-surface-2); }
.kara-v43 .provider-card-top { margin-bottom: 14px; display: flex; justify-content: space-between; gap: 14px; }
.kara-v43 .founder-alert,
.kara-v43 .k39-alert,
.kara-v43 .v14-alert { margin-block: 12px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface); }
.kara-v43 :where(.founder-alert, .k39-alert, .v14-alert).success { border-color: color-mix(in srgb, var(--v43-positive) 28%, transparent); }
.kara-v43 :where(.founder-alert, .k39-alert, .v14-alert).warning { border-color: color-mix(in srgb, var(--v43-warning) 28%, transparent); }
.kara-v43 :where(.founder-alert, .k39-alert, .v14-alert).error { border-color: color-mix(in srgb, var(--v43-danger) 28%, transparent); }
/* KARA Hub and project catalog */
.kara-v43 .kara-hub-main,
.kara-v43.kara-project-page > main,
.kara-v43.kara-projects-page > main,
.kara-v43.kara-info-page > main { width: min(calc(100% - 48px), var(--v43-public-max)); margin-inline: auto; padding: 126px 0 76px; }
.kara-v43 .kara-v303-hub-hero,
.kara-v43 .kara-v303-product-hero,
.kara-v43 .kara-v303-info-hero { min-height: 520px; padding: clamp(30px, 4vw, 58px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); align-items: center; gap: clamp(38px, 6vw, 90px); overflow: hidden; border: 1px solid var(--v43-line-strong); border-radius: var(--v43-r4); background: radial-gradient(circle at 94% 0, color-mix(in srgb, var(--v43-accent) 14%, transparent), transparent 28rem), var(--v43-surface); box-shadow: var(--v43-shadow-2); }
.kara-v43 .kara-v303-hub-copy h1,
.kara-v43 .kara-v303-product-copy h1,
.kara-v43 .kara-v303-info-hero h1 { margin: 13px 0 18px; max-width: 900px; font-size: clamp(2.7rem, 5vw, 5.4rem); letter-spacing: -.06em; }
.kara-v43 .kara-v303-hub-copy > p,
.kara-v43 .kara-v303-product-copy > p,
.kara-v43 .kara-v303-info-hero > div > p { max-width: 760px; font-size: 1.02rem; line-height: 1.75; }
.kara-v43 .kara-v303-hub-actions,
.kara-v43 .kara-actions { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 9px; }
.kara-v43 .kara-v303-product-live,
.kara-v43 .kara-v303-info-symbol { min-height: 350px; padding: 25px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border: 1px solid var(--v43-line); border-radius: 22px; background: var(--v43-surface-2); box-shadow: var(--v43-shadow-1); }
.kara-v43 .kara-v303-identity-card { padding: 22px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border: 1px solid var(--v43-line); border-radius: 22px; background: var(--v43-surface-2); box-shadow: var(--v43-shadow-1); }
.kara-v43 .kara-v303-identity-head { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 14px; }
.kara-v43 .kara-v303-identity-head > img,
.kara-v43 .kara-v303-identity-head > span { width: 62px; height: 62px; display: grid; place-items: center; overflow: hidden; border-radius: 17px; object-fit: cover; color: var(--v43-accent-on); background: var(--v43-accent); font-size: 1.4rem; font-weight: 900; }
.kara-v43 .kara-v303-identity-head small,
.kara-v43 .kara-v303-identity-head b,
.kara-v43 .kara-v303-identity-head em { display: block; }
.kara-v43 .kara-v303-identity-head small { color: var(--v43-dim); font-size: .58rem; letter-spacing: .12em; }
.kara-v43 .kara-v303-identity-head em { color: var(--v43-accent); font-size: .65rem; font-style: normal; }
.kara-v43 .kara-v303-identity-metrics { margin-block: 18px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.kara-v43 .kara-v303-identity-metrics > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--v43-line); border-bottom: 1px solid var(--v43-line); border-radius: 10px; background: var(--v43-surface-3); }
.kara-v43 .kara-v303-identity-metrics span { color: var(--v43-muted); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kara-v43 .kara-v303-identity-metrics strong { overflow-wrap: anywhere; text-align: left; font-size: .85rem; }
.kara-v43 .kara-v303-identity-card > a { color: var(--v43-accent); font-size: .72rem; font-weight: 750; }
.kara-v43 .kara-v303-command-strip { margin-top: 14px; padding: 9px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border: 1px solid var(--v43-line); border-radius: 18px; background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .kara-v303-command-strip > a { min-height: 68px; padding: 10px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 12px; }
.kara-v43 .kara-v303-command-strip > a:hover { border-color: var(--v43-line); background: var(--v43-surface-2); }
.kara-v43 .kara-v303-command-strip > a > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--v43-accent); background: var(--v43-surface-3); }
.kara-v43 .kara-v303-command-strip svg { width: 19px; height: 19px; }
.kara-v43 .kara-v303-command-strip b,
.kara-v43 .kara-v303-command-strip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .kara-v303-hub-section,
.kara-v43 .kara-section { padding-block: clamp(70px, 8vw, 112px); }
.kara-v43 .kara-v303-section-head { margin-bottom: 25px; display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; }
.kara-v43 .kara-v303-section-head > div > span { color: var(--v43-accent); font-size: .62rem; font-weight: 850; letter-spacing: .13em; }
.kara-v43 .kara-v303-section-head h2 { margin: 8px 0 5px; font-size: clamp(1.9rem, 3vw, 3.2rem); }
.kara-v43 .kara-v303-section-head p { max-width: 760px; margin: 0; }
.kara-v43 .kara-v303-section-head.compact { margin-bottom: 16px; align-items: center; }
.kara-v43 .kara-v303-section-head.compact h2 { margin: 4px 0 0; font-size: 1.3rem; }
.kara-v43 .kara-v303-filter { flex: none; padding: 4px; display: flex; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface); }
.kara-v43 .kara-v303-filter button { min-height: 34px; padding: 6px 9px; border: 0; border-radius: 8px; color: var(--v43-muted); background: transparent; font-size: .68rem; }
.kara-v43 .kara-v303-filter button.is-active { color: var(--v43-ink); background: var(--v43-surface-3); }
.kara-v43 .kara-v303-workspace-grid,
.kara-v43 .kara-v303-capability-grid,
.kara-v43 .kara-v303-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kara-v43 .kara-v303-workspace-card { padding: 18px; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-content: start; gap: 12px; border: 1px solid var(--v43-line); border-radius: 16px; background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .kara-v303-workspace-card:hover { border-color: var(--v43-line-strong); transform: translateY(-3px); }
.kara-v43 .kara-v303-workspace-icon { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; color: var(--v43-accent-on); background: var(--v43-accent); font-weight: 900; }
.kara-v43 .kara-v303-workspace-icon img { width: 100%; height: 100%; object-fit: cover; }
.kara-v43 .kara-v303-workspace-copy small,
.kara-v43 .kara-v303-workspace-copy h3,
.kara-v43 .kara-v303-workspace-copy p { overflow: hidden; text-overflow: ellipsis; }
.kara-v43 .kara-v303-workspace-copy small { color: var(--v43-positive); font-size: .57rem; font-weight: 800; letter-spacing: .1em; }
.kara-v43 .kara-v303-workspace-copy h3 { margin: 7px 0 4px; white-space: nowrap; }
.kara-v43 .kara-v303-workspace-card > a { grid-column: 1 / -1; align-self: end; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--v43-line); color: var(--v43-accent); font-size: .72rem; font-weight: 750; }
.kara-v43 .kara-v303-hub-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); align-items: start; gap: 14px; }
.kara-v43 .kara-v303-products-panel,
.kara-v43 .kara-v303-status-panel { padding: 22px; overflow: hidden; border: 1px solid var(--v43-line); border-radius: var(--v43-r3); background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .kara-v303-product-stack { display: grid; gap: 8px; }
.kara-v43 .kara-v303-product-stack > article { min-height: 76px; padding: 10px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-2); }
.kara-v43 .kara-v303-product-stack > article > div { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--v43-surface-3); }
.kara-v43 .kara-v303-product-stack img { width: 100%; height: 100%; object-fit: contain; }
.kara-v43 .kara-v303-product-stack section { min-width: 0; }
.kara-v43 .kara-v303-product-stack h3,
.kara-v43 .kara-v303-product-stack p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43 .kara-v303-status-list { display: grid; gap: 8px; }
.kara-v43 .kara-v303-status-list > div { padding: 10px; display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 9px; border-radius: 10px; background: var(--v43-surface-2); }
.kara-v43 .kara-v303-status-list i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--v43-dim); }
.kara-v43 .kara-v303-status-list i.ok { background: var(--v43-positive); }
.kara-v43 .kara-v303-status-list b,
.kara-v43 .kara-v303-status-list small { display: block; }
.kara-v43 .kara-v303-product-identity { display: flex; align-items: center; gap: 12px; }
.kara-v43 .kara-v303-product-identity img { width: 52px; height: 52px; padding: 7px; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-surface-2); object-fit: contain; }
.kara-v43 .kara-v303-product-identity small,
.kara-v43 .kara-v303-product-identity b { display: block; }
.kara-v43 .kara-v303-product-identity small { color: var(--v43-accent); font-size: .58rem; letter-spacing: .12em; }
.kara-v43 .kara-project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.kara-v43 .kara-project-tags span { padding: 5px 8px; border: 1px solid var(--v43-line); border-radius: 999px; background: var(--v43-surface-2); color: var(--v43-muted); font-size: .62rem; }
.kara-v43 .kara-v303-product-live > header { display: flex; justify-content: space-between; gap: 12px; }
.kara-v43 .kara-v303-product-live > header span { display: flex; align-items: center; gap: 7px; color: var(--v43-positive); font-size: .64rem; font-weight: 800; }
.kara-v43 .kara-v303-product-live > header i { width: 7px; height: 7px; border-radius: 50%; background: var(--v43-positive); }
.kara-v43 .kara-v303-product-core { margin: 28px auto; text-align: center; }
.kara-v43 .kara-v303-product-core img { width: 90px; height: 90px; margin-inline: auto; object-fit: contain; }
.kara-v43 .kara-v303-product-core b,
.kara-v43 .kara-v303-product-core span { display: block; }
.kara-v43 .kara-v303-product-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kara-v43 .kara-v303-product-nodes > span { padding: 9px; border-radius: 9px; background: var(--v43-surface-3); text-align: center; }
.kara-v43 .kara-v303-product-nodes b,
.kara-v43 .kara-v303-product-nodes small { display: block; }
.kara-v43 .kara-v303-metric-ribbon { margin-top: 14px; padding: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border: 1px solid var(--v43-line); border-radius: 17px; background: var(--v43-surface); }
.kara-v43 .kara-v303-metric-ribbon article { min-height: 92px; padding: 12px; border-radius: 11px; background: var(--v43-surface-2); }
.kara-v43 .kara-v303-metric-ribbon span,
.kara-v43 .kara-v303-metric-ribbon strong { display: block; }
.kara-v43 .kara-v303-metric-ribbon span { color: var(--v43-muted); font-size: .64rem; }
.kara-v43 .kara-v303-metric-ribbon strong { margin-top: 7px; overflow-wrap: anywhere; }
.kara-v43 .kara-v303-info-symbol { align-items: center; text-align: center; }
.kara-v43 .kara-v303-info-symbol > span { width: 100px; height: 100px; display: grid; place-items: center; border: 1px solid var(--v43-line-strong); border-radius: 28px; color: var(--v43-accent); background: var(--v43-surface-3); }
.kara-v43 .kara-v303-info-symbol svg { width: 50px; height: 50px; }
.kara-v43 .kara-v303-info-symbol b { margin-top: 20px; font-size: 2rem; }
.kara-v43 .kara-v303-info-symbol small { color: var(--v43-muted); font-size: .62rem; letter-spacing: .12em; }
.kara-v43 .kara-v303-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kara-v43 .kara-v303-info-grid article { min-height: 240px; padding: 24px; border: 1px solid var(--v43-line); border-radius: 18px; background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .kara-v303-info-grid article > span { color: var(--v43-accent); font-size: .65rem; font-weight: 850; }
.kara-v43 .kara-v303-info-grid h2 { margin: 24px 0 10px; }
.kara-v43 .kara-v303-info-feature,
.kara-v43 .kara-v303-support-grid,
.kara-v43 .kara-v303-timeline,
.kara-v43 .kara-cta-section { margin-top: 14px; padding: clamp(24px, 4vw, 46px); border: 1px solid var(--v43-line); border-radius: var(--v43-r3); background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .kara-v303-info-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr); align-items: center; gap: 36px; }
.kara-v43 .kara-v303-mini-flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; }
.kara-v43 .kara-v303-mini-flow article { min-width: 90px; padding: 12px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-2); text-align: center; }
.kara-v43 .kara-v303-mini-flow i { height: 1px; background: var(--v43-line-strong); }
.kara-v43 .kara-v303-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kara-v43 .kara-v303-support-grid > article { padding: 20px; border: 1px solid var(--v43-line); border-radius: 16px; background: var(--v43-surface-2); }
.kara-v43 .kara-v303-support-grid a,
.kara-v43 .kara-v303-status-card > div { min-height: 64px; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border-bottom: 1px solid var(--v43-line); }
.kara-v43 .kara-v303-timeline > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kara-v43 .kara-v303-timeline article { padding: 18px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-surface-2); }
/* Kok neden: eyebrowBaslik varsayilan olarak
inline kaliyordu, ikisi "BAŞLANGIÇKARA AI" gibi bosluksuz birlesik
goruntuleniyordu. Eyebrow'u kucuk/harf araligiyla ayirip basligin ustune
ayri bir satira aliyoruz. */
.kara-v43 .kara-v303-timeline article span small { display: block; margin-bottom: 4px; color: var(--v43-muted); font-size: .68rem; font-weight: 750; letter-spacing: .06em; }
.kara-v43 .kara-v303-timeline article span strong { display: block; margin-bottom: 6px; font-size: 1rem; }
.kara-v43 .kara-cta-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; border-color: var(--v43-line-strong); background: radial-gradient(circle at 92% 0, color-mix(in srgb, var(--v43-accent) 14%, transparent), transparent 22rem), var(--v43-surface); }
/* Invite wizard */
.kara-v43 .k39-invite-layout { display: grid; grid-template-columns: minmax(320px, .38fr) minmax(0, .62fr); align-items: start; gap: 14px; }
.kara-v43 .k39-invite-aside { position: sticky; top: 104px; min-height: 620px; padding: 30px; }
.kara-v43 .k39-invite-aside h1 { margin: 13px 0 16px; font-size: clamp(2.3rem, 4vw, 4.2rem); }
.kara-v43 .k39-progress-list { margin-top: 26px; display: grid; gap: 8px; }
.kara-v43 .k39-progress-item { min-height: 60px; padding: 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); }
.kara-v43 .k39-progress-item > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--v43-accent); background: var(--v43-surface-3); font-size: .66rem; font-weight: 850; }
.kara-v43 .k39-progress-item b,
.kara-v43 .k39-progress-item small { display: block; }
.kara-v43 .k39-invite-form { display: grid; gap: 14px; }
.kara-v43 .k39-wizard-section { padding: clamp(20px, 3vw, 30px); overflow: hidden; border: 1px solid var(--v43-line); border-radius: var(--v43-r3); background: var(--v43-surface); box-shadow: var(--v43-shadow-1); }
.kara-v43 .k39-wizard-head { margin-bottom: 17px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.kara-v43 .k39-wizard-head > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--v43-accent-on); background: var(--v43-accent); font-size: .72rem; font-weight: 900; }
.kara-v43 .k39-wizard-head h2 { margin: 0 0 5px; }
.kara-v43 .k39-wizard-head p { margin: 0; }
.kara-v43 .k39-wizard-head em { padding: 5px 7px; border: 1px solid var(--v43-line); border-radius: 999px; color: var(--v43-muted); font-size: .55rem; font-style: normal; white-space: nowrap; }
.kara-v43 .k39-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kara-v43 .k39-choice { position: relative; min-height: 210px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--v43-line); border-radius: 16px; background: var(--v43-surface-2); cursor: pointer; }
.kara-v43 .k39-choice:has(input:checked) { border-color: var(--v43-line-strong); background: color-mix(in srgb, var(--v43-accent) 8%, var(--v43-surface-2)); }
.kara-v43 .k39-choice > input { position: absolute; opacity: 0; pointer-events: none; }
.kara-v43 .k39-choice-check { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--v43-line); border-radius: 8px; color: transparent; background: var(--v43-surface-3); }
.kara-v43 .k39-choice:has(input:checked) .k39-choice-check { color: var(--v43-accent-on); border-color: var(--v43-accent); background: var(--v43-accent); }
.kara-v43 .k39-choice-icon { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; color: var(--v43-accent); background: var(--v43-surface-3); font-weight: 850; }
.kara-v43 .k39-choice-icon img { width: 100%; height: 100%; object-fit: cover; }
.kara-v43 .k39-choice h3 { margin: 18px 0 7px; }
.kara-v43 .k39-choice p { margin: 0; }
.kara-v43 .k39-choice ul { margin: auto 0 0; padding: 14px 0 0 18px; color: var(--v43-muted); font-size: .72rem; }
.kara-v43 .k39-wizard-summary { position: sticky; bottom: 12px; z-index: 30; min-height: 78px; padding: 13px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; border: 1px solid var(--v43-line-strong); border-radius: 16px; background: var(--v43-surface-soft); box-shadow: var(--v43-shadow-2); backdrop-filter: blur(18px); }
.kara-v43 .k39-wizard-summary b,
.kara-v43 .k39-wizard-summary small { display: block; }
/* Feature/solution/plans public widgets */
.kara-v43 .k39-solution-nav,
.kara-v43 .k39-plan-switcher,
.kara-v43 .k39-feature-nav { position: sticky; top: 92px; z-index: 40; padding: 6px; display: flex; gap: 5px; overflow-x: auto; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-surface-soft); backdrop-filter: blur(18px); }
.kara-v43 :where(.k39-solution-nav, .k39-plan-switcher, .k39-feature-nav) button { min-height: 40px; padding: 7px 11px; border: 0; border-radius: 9px; color: var(--v43-muted); background: transparent; font-size: .7rem; font-weight: 720; white-space: nowrap; }
.kara-v43 :where(.k39-solution-nav, .k39-plan-switcher, .k39-feature-nav) button.is-active { color: var(--v43-ink); background: var(--v43-surface-3); }
.kara-v43 .k39-solution-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: 14px; }
.kara-v43 .k39-outcomes { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kara-v43 .k39-outcomes > span { padding: 12px; border: 1px solid var(--v43-line); border-radius: 11px; background: var(--v43-surface-2); }
.kara-v43 .k39-outcomes b,
.kara-v43 .k39-outcomes small { display: block; }
.kara-v43 .k39-blueprint-row { min-height: 68px; padding: 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--v43-line); }
.kara-v43 .k39-blueprint-row > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--v43-accent); background: var(--v43-surface-3); }
.kara-v43 .k39-blueprint-row b,
.kara-v43 .k39-blueprint-row small { display: block; }
.kara-v43 .k39-blueprint-row em { color: var(--v43-positive); font-size: .58rem; font-style: normal; }
.kara-v43 .k39-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.kara-v43 .k39-journey article { min-height: 150px; padding: 18px; border: 1px solid var(--v43-line); border-radius: 15px; background: var(--v43-surface); }
.kara-v43 .k39-journey span,
.kara-v43 .k39-journey b,
.kara-v43 .k39-journey small { display: block; }
.kara-v43 .k39-journey span { color: var(--v43-accent); font-size: .65rem; font-weight: 850; }
.kara-v43 .k39-journey b { margin-top: 24px; }
/* Responsive contracts */
@media (max-width: 1280px) {
.kara-v43 .kara-header { grid-template-columns: auto minmax(0, 1fr) auto; }
.kara-v43 .kara-wordmark-context { display: none; }
.kara-v43 .kara-nav a { padding-inline: 8px; font-size: .72rem; }
.kara-v43 .kara36-hero { grid-template-columns: minmax(0, .96fr) minmax(470px, 1.04fr); gap: 46px; }
.kara-v43 .kara36-floating-card.security { left: 8px; }
.kara-v43 .kara36-floating-card.assistant { right: 8px; }
.kara-v43 .kara-panel-nav a b { display: none; }
.kara-v43 .founder-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kara-v43 .kara25-kpis,
.kara-v43 :where(.metric-grid, .workspace-kpi-grid, .ai-runtime-strip, .ai-metrics, .stat-grid, .module-metrics, .ops-suite-metrics) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
.kara-v43 .kara-header { grid-template-columns: auto auto; }
.kara-v43 .kara-nav-toggle { display: grid; grid-column: 2; grid-row: 1; justify-self: end; }
.kara-v43 .kara-nav { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: none; padding: 9px; flex-direction: column; align-items: stretch; border-radius: 15px; background: var(--v43-surface); box-shadow: var(--v43-shadow-3); }
.kara-v43 .kara-header:has(.kara-nav-toggle[aria-expanded="true"]) .kara-nav,
.kara-v43 .kara-nav.is-open { display: flex; }
.kara-v43 .kara-nav a { padding: 10px; }
.kara-v43 .kara-header-actions { position: absolute; left: 0; right: 0; top: calc(100% + 280px); display: none; padding: 9px; justify-content: flex-end; border: 1px solid var(--v43-line); border-radius: 15px; background: var(--v43-surface); box-shadow: var(--v43-shadow-2); }
.kara-v43 .kara-header:has(.kara-nav-toggle[aria-expanded="true"]) .kara-header-actions { display: flex; }
.kara-v43 .kara36-hero,
.kara-v43 .k39-hero,
.kara-v43 .kara-v303-hub-hero,
.kara-v43 .kara-v303-product-hero,
.kara-v43 .kara-v303-info-hero { grid-template-columns: 1fr; }
.kara-v43 .kara36-hero { padding-top: 126px; }
.kara-v43 .kara36-hero-copy { max-width: 820px; }
.kara-v43 .kara36-hero-stage { min-height: 570px; }
.kara-v43 .kara36-proof-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kara-v43 .kara36-proof-strip > div { border-right: 0; }
.kara-v43 .kara36-proof-strip > div:nth-child(n+4) { border-top: 1px solid var(--v43-line); }
.kara-v43 .kara36-section-head,
.kara-v43 .k39-section-head { grid-template-columns: 1fr; gap: 18px; }
.kara-v43 .kara36-bento-card,
.kara-v43 .kara36-bento-card.wide { grid-column: span 6; }
.kara-v43 .kara36-hybrid,
.kara-v43 .kara36-assistant-showcase { grid-template-columns: 1fr; }
.kara-v43 .kara36-plan-grid,
.kara-v43 .v16-plan-grid,
.kara-v43 .kara-v303-workspace-grid,
.kara-v43 .kara-v303-capability-grid,
.kara-v43 .kara-v303-project-grid,
.kara-v43 .kara-v303-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kara-v43 .kara36-plan-card.featured,
.kara-v43 .v16-plan-card.featured { transform: none; }
.kara-v43 .kara25-dashboard { display: block; }
.kara-v43 .kara25-dashboard-sidebar { position: static; height: auto; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--v43-line); }
.kara-v43 .kara25-account-card,
.kara-v43 .kara25-sidebar-foot { display: none; }
.kara-v43 .kara25-sidebar-nav { margin: 0; display: flex; gap: 6px; overflow-x: auto; }
.kara-v43 .kara25-sidebar-nav .kara-dock-section-copy { display: none; }
.kara-v43 .kara25-sidebar-nav .nav-item { flex: none; }
.kara-v43 .kara25-hero { grid-template-columns: 1fr; }
.kara-v43 .kara25-content-grid { grid-template-columns: 1fr; }
.kara-v43 .founder-overview-grid,
.kara-v43 .founder-site-grid,
.kara-v43 .founder-provider-grid,
.kara-v43 .billing-provider-grid { grid-template-columns: 1fr; }
.kara-v43 .k39-invite-layout { grid-template-columns: 1fr; }
.kara-v43 .k39-invite-aside { position: static; min-height: auto; }
.kara-v43 .k39-ticket-cta,
.kara-v43 .k39-solution-panel,
.kara-v43 .kara-v303-hub-grid,
.kara-v43 .kara-v303-info-feature { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
.kara-v43 .v14-header,
.kara-v43 .founder-topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; }
.kara-v43 .kara-product-breadcrumb,
.kara-v43 .status-dot,
.kara-v43 .admin-chip,
.kara-v43 .founder-live,
.kara-v43 .kara-header-divider { display: none; }
.kara-v43 .kara-panel-brand,
.kara-v43 .founder-brand,
.kara-v43 .topbar .brand { min-width: 0; }
.kara-v43 .kara-panel-brand-copy,
.kara-v43 .founder-brand > span,
.kara-v43 .topbar .brand > span { display: none; }
.kara-v43 .topbar { gap: 8px; }
.kara-v43 .kara-current-guild-chip { max-width: 210px; }
.kara-v43 .app-shell,
.kara-v43 .founder-layout { display: block; }
.kara-v43 .sidebar,
.kara-v43 .founder-sidebar {
position: fixed;
inset: var(--v43-panel-header-h) auto 0 0;
z-index: 1400;
width: min(320px, calc(100vw - 44px));
height: calc(100vh - var(--v43-panel-header-h));
transform: translateX(-106%);
transition: transform var(--v43-ease);
border-right: 1px solid var(--v43-line-strong);
background: var(--v43-page);
box-shadow: var(--v43-shadow-3);
}
.kara-v43.sidebar-open .sidebar,
.kara-v43.mobile-sidebar-open .sidebar,
.kara-v43.founder-mobile-open .founder-sidebar { transform: translateX(0); }
.kara-v43 #karaDockMobileClose { display: grid; }
.kara-v43 .sidebar-scrim { position: fixed; inset: var(--v43-panel-header-h) 0 0; z-index: 1350; background: rgba(2, 5, 10, .66); backdrop-filter: blur(5px); }
.kara-v43.sidebar-open .sidebar-scrim:not([hidden]),
.kara-v43.mobile-sidebar-open .sidebar-scrim:not([hidden]),
.kara-v43.founder-mobile-open .sidebar-scrim:not([hidden]) { display: block; }
.kara-v43 .content,
.kara-v43 .founder-main { padding: 14px; }
.kara-v43 .mobile-head { position: sticky; top: calc(var(--v43-panel-header-h) + 8px); z-index: 60; margin-bottom: 10px; min-height: 48px; padding: 6px 9px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--v43-line); border-radius: 12px; background: var(--v43-surface-soft); backdrop-filter: blur(18px); }
.kara-v43 .mobile-head button { width: 36px; height: 36px; border: 1px solid var(--v43-line); border-radius: 9px; background: var(--v43-surface-2); }
.kara-v43 .founder-hero { grid-template-columns: 1fr; }
.kara-v43 .founder-hero-orbit { display: none; }
.kara-v43 .founder-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kara-v43 .k39-profile-panel.span-8,
.kara-v43 .k39-profile-panel.span-6,
.kara-v43 .k39-profile-panel.span-4 { grid-column: span 12; }
.kara-v43 .profile-workspace-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kara-v43 .k39-security-shell,
.kara-v43 .kara-auth-shell { grid-template-columns: 1fr; }
.kara-v43 .k39-security-brand,
.kara-v43 .kara-auth-brand { min-height: 280px; }
.kara-v43 .kara-auth-brand::after { display: none; }
.kara-v43 .v16-pricing-hero,
.kara-v43 .invite-hero,
.kara-v43 .v14-invite-hero { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.kara-v43 .kara-header { inset: 9px; min-height: 58px; padding-left: 12px; }
.kara-v43 .kara-wordmark-logo { width: 92px; }
.kara-v43 .kara-header-actions { top: calc(100% + 274px); flex-wrap: wrap; }
.kara-v43 .kara-account-chip-copy,
.kara-v43 .kara-hub-button b { display: none; }
.kara-v43 .kara-account-chip { width: 42px; padding: 5px; }
.kara-v43 .kara-hub-button { width: 42px; padding: 0; }
.kara-v43 .kara36-hero,
.kara-v43 .kara36-proof-strip,
.kara-v43 .kara36-section,
.kara-v43 .kara36-final-cta,
.kara-v43 .k39-shell,
.kara-v43 .k39-profile-main,
.kara-v43 .invite-main,
.kara-v43 .v14-invite-main,
.kara-v43 .v16-pricing-main,
.kara-v43 .kara-footer,
.kara-v43 .kara-hub-main,
.kara-v43.kara-project-page > main,
.kara-v43.kara-projects-page > main,
.kara-v43.kara-info-page > main { width: min(calc(100% - 24px), var(--v43-public-max)); }
.kara-v43 .kara36-hero { min-height: auto; padding: 106px 0 44px; }
.kara-v43 .kara36-hero h1,
.kara-v43 .k39-hero-copy h1,
.kara-v43 .kara-v303-hub-copy h1,
.kara-v43 .kara-v303-product-copy h1,
.kara-v43 .kara-v303-info-hero h1 { font-size: clamp(2.5rem, 13vw, 4.2rem); }
.kara-v43 .kara36-hero-stats { grid-template-columns: 1fr; }
.kara-v43 .kara36-hero-stage { min-height: auto; padding-block: 20px; }
.kara-v43 .kara36-floating-card { display: none; }
.kara-v43 .kara36-command-console > footer { align-items: stretch; flex-direction: column; }
.kara-v43 .kara36-command-console > footer button { width: 100%; }
.kara-v43 .kara36-proof-strip { grid-template-columns: 1fr; padding: 10px; }
.kara-v43 .kara36-proof-strip > div { min-height: 44px; border-top: 1px solid var(--v43-line); }
.kara-v43 .kara36-proof-strip > div:first-child { border-top: 0; }
.kara-v43 .kara36-bento-card,
.kara-v43 .kara36-bento-card.wide { grid-column: span 12; }
.kara-v43 .kara36-intent-map { grid-template-columns: 1fr; }
.kara-v43 .kara36-intent-map i { width: 1px; height: 14px; margin-inline: auto; }
.kara-v43 .kara36-hybrid-visual { min-height: auto; grid-template-columns: 1fr; gap: 50px; padding: 22px; }
.kara-v43 .kara36-hybrid-route { top: 50%; width: 60px; transform: translate(-50%, -50%) rotate(90deg); }
.kara-v43 .kara36-hybrid-fallback { position: static; width: 100%; max-width: none; transform: none; }
.kara-v43 .kara36-plan-grid,
.kara-v43 .v16-plan-grid,
.kara-v43 .kara-v303-workspace-grid,
.kara-v43 .kara-v303-capability-grid,
.kara-v43 .kara-v303-project-grid,
.kara-v43 .kara-v303-info-grid { grid-template-columns: 1fr; }
.kara-v43 .kara36-plan-card { min-height: auto; }
.kara-v43 .kara36-final-cta,
.kara-v43 .kara-cta-section { grid-template-columns: 1fr; }
.kara-v43 .kara36-final-cta > div:last-child { justify-content: flex-start; }
.kara-v43 .k39-hero,
.kara-v43 .kara-v303-hub-hero,
.kara-v43 .kara-v303-product-hero,
.kara-v43 .kara-v303-info-hero { min-height: auto; padding: 24px; }
.kara-v43 .k39-hero-visual { min-height: auto; }
.kara-v43 :where(.k39-feature-grid, .k39-solution-grid, .k39-support-paths, .k39-project-grid, .k39-info-grid) > * { grid-column: span 12; }
.kara-v43 .k39-issue-grid,
.kara-v43 .k39-choice-grid,
.kara-v43 .k39-outcomes,
.kara-v43 .kara-v303-support-grid,
.kara-v43 .kara18-dashboard-analytics,
.kara-v43 .founder-overview-grid,
.kara-v43 .founder-site-grid,
.kara-v43 .founder-provider-grid,
.kara-v43 .billing-provider-grid,
.kara-v43 :where(.workspace-main-grid, .grid-2, .two-column, .settings-grid, .module-grid, .security-grid, .provider-grid, .ticket-grid, .custom-bot-layout, .ticket-pro-overview, .backup-dashboard-grid, .scan-layout),
.kara-v43 :where(.grid-3, .three-column, .marketplace-grid, .template-grid, .setup-workflow) { grid-template-columns: 1fr; }
.kara-v43 .k39-journey,
.kara-v43 .kara-v303-command-strip,
.kara-v43 .kara-v303-metric-ribbon,
.kara-v43 .kara-v303-timeline > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kara-v43 .kara-v303-info-feature { padding: 24px; }
.kara-v43 .kara-v303-mini-flow { grid-template-columns: 1fr; }
.kara-v43 .kara-v303-mini-flow i { width: 1px; height: 14px; margin-inline: auto; }
.kara-v43 .kara25-page-head,
.kara-v43 .page-head { grid-template-columns: 1fr; align-items: start; }
.kara-v43 .kara25-page-actions { justify-content: flex-start; }
.kara-v43 .kara25-hero-status,
.kara-v43 .kara25-kpis,
.kara-v43 :where(.metric-grid, .workspace-kpi-grid, .ai-runtime-strip, .ai-metrics, .stat-grid, .module-metrics, .ops-suite-metrics),
.kara-v43 .metric-grid.ai-metrics,
.kara-v43 .ai-runtime-strip,
.kara-v43 .founder-stat-grid,
.kara-v43 .profile-workspace-summary,
.kara-v43 .v14-guild-grid,
.kara-v43 .kara18-health-list { grid-template-columns: 1fr; }
.kara-v43 .kara25-server-row { grid-template-columns: 1fr; }
.kara-v43 .kara25-server-row > em { padding-left: 57px; }
.kara-v43 .page-head-actions { justify-content: space-between; }
.kara-v43 .page-brand-watermark { display: none; }
.kara-v43 :where(.form-grid, .founder-form-grid, .master-identity-policy-grid, .ai-global-policy-grid),
.kara-v43 .k39-form-grid { grid-template-columns: 1fr; }
.kara-v43 .founder-section,
.kara-v43 .founder-panel,
.kara-v43 .workspace-panel,
.kara-v43 .settings-section,
.kara-v43 .module-section { padding: 16px; }
.kara-v43 .kara-footer { padding: 24px; }
.kara-v43 .kara-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kara-v43 .k39-profile-toolbar { top: 76px; align-items: stretch; flex-direction: column; }
.kara-v43 .k39-profile-tabs { width: 100%; }
.kara-v43 .k39-wizard-head { grid-template-columns: 38px minmax(0, 1fr); }
.kara-v43 .k39-wizard-head > em { grid-column: 2; justify-self: start; }
.kara-v43 .k39-wizard-summary { grid-template-columns: 1fr; }
.kara-v43 .k39-wizard-summary button { width: 100%; }
}
@media (max-width: 520px) {
.kara-v43 .kara-current-guild-chip,
.kara-v43 .premium-chip,
.kara-v43 .kara-panel-nav,
.kara-v43 .kara-account-trigger > span:not(:first-child),
.kara-v43 .kara-panel-utilities .v14-lang { display: none; }
.kara-v43 .kara-account-trigger { width: 40px; padding: 4px; }
.kara-v43 .topbar .brand-logo,
.kara-v43 .kara-panel-brand img,
.kara-v43 .founder-brand img { width: 36px; height: 36px; }
.kara-v43 .kara36-hero-actions,
.kara-v43 .kara36-hero-actions > a,
.kara-v43 .k39-actions,
.kara-v43 .k39-actions > *,
.kara-v43 .kara-actions,
.kara-v43 .kara-actions > * { width: 100%; }
.kara-v43 .kara36-command-user { margin: 12px; }
.kara-v43 .kara36-plan-list { margin-inline: 12px; }
.kara-v43 .kara36-plan-list > div { grid-template-columns: 28px minmax(0, 1fr); }
.kara-v43 .kara36-plan-list em { grid-column: 2; }
.kara-v43 .kara36-fivem-grid,
.kara-v43 .k39-journey,
.kara-v43 .kara-v303-command-strip,
.kara-v43 .kara-v303-metric-ribbon,
.kara-v43 .kara-v303-timeline > div { grid-template-columns: 1fr; }
.kara-v43 .kara-v303-section-head { align-items: stretch; flex-direction: column; }
.kara-v43 .kara-v303-filter { width: 100%; overflow-x: auto; }
.kara-v43 .kara-v303-filter button { flex: 1; }
.kara-v43 .kara-v303-product-nodes { grid-template-columns: 1fr; }
.kara-v43 .kara25-dashboard-main,
.kara-v43 .content,
.kara-v43 .founder-main { padding-inline: 10px; }
.kara-v43 .page-title-row { grid-template-columns: 42px minmax(0, 1fr); }
.kara-v43 .page-icon { width: 42px; height: 42px; }
.kara-v43 .founder-section-head,
.kara-v43 .founder-card-head,
.kara-v43 .workspace-panel-head,
.kara-v43 .kara25-panel-head,
.kara-v43 .k39-profile-panel-head { flex-direction: column; }
.kara-v43 .provider-health-list > div { grid-template-columns: 10px minmax(0, 1fr); }
.kara-v43 .provider-health-list > div > em { grid-column: 2; justify-self: start; }
.kara-v43 .vault-paths > div { grid-template-columns: 1fr; }
.kara-v43 .vault-paths code,
.kara-v43 .vault-paths b { text-align: left; }
.kara-v43 .kara-footer-grid { grid-template-columns: 1fr; }
.kara-v43 .kara-site-assistant { right: 12px; bottom: 12px; }
.kara-v43 .kara-assistant-window { bottom: 68px; }
}
@media (prefers-reduced-motion: reduce) {
.kara-v43 *,
.kara-v43 *::before,
.kara-v43 *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@supports not (color: color-mix(in srgb, white, black)) {
.kara-v43 { --v43-accent: #c08a2e; }
html[data-theme="light"] .kara-v43 { --v43-accent: #a8741f; }
}
/* v43 authority layer: supersede v42 structural hardening without touching state logic. */
.kara-v43 .k39-card { padding: clamp(20px, 2.5vw, 30px) !important; border-radius: var(--v43-r3) !important; }
.kara-v43 .kara36-bento-card { padding: clamp(22px, 2.6vw, 30px) !important; border-radius: 18px !important; }
.kara-v43 .kara36-plan-card { padding: 26px !important; border-radius: 18px !important; }
.kara-v43 .kara36-plan-card.featured { border-color: var(--v43-line-strong) !important; }
.kara-v43 .v16-plan-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
.kara-v43 .v16-plan-card { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 25px !important; }
.kara-v43 .v14-header,
.kara-v43 .kara-panel-header,
.kara-v43 .founder-topbar {
position: sticky !important;
top: 0 !important;
min-height: var(--v43-panel-header-h) !important;
height: auto !important;
padding: 8px clamp(14px, 2vw, 28px) !important;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
gap: 18px !important;
border-bottom-color: var(--v43-line) !important;
background: color-mix(in srgb, var(--v43-surface-soft) 94%, transparent) !important;
}
.kara-v43 .kara25-dashboard { display: grid !important; grid-template-columns: var(--v43-sidebar-w) minmax(0, 1fr) !important; }
.kara-v43 .kara25-hero { display: grid !important; grid-template-columns: minmax(0, 1.06fr) minmax(430px, .94fr) !important; gap: clamp(28px, 4vw, 58px) !important; padding: clamp(24px, 3vw, 38px) !important; }
.kara-v43 .kara25-hero-status { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
.kara-v43 .kara25-kpis { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
.kara-v43 .kara25-kpi { padding: 19px !important; }
.kara-v43 .kara25-content-grid { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .5fr) !important; gap: 14px !important; }
.kara-v43 .kara25-server-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 14px !important; padding: 11px !important; }
.kara-v43 .kara25-server-avatar { width: 46px !important; height: 46px !important; }
.kara-v43 .topbar {
position: sticky !important;
inset: auto !important;
top: 0 !important;
min-height: var(--v43-panel-header-h) !important;
height: auto !important;
padding: 8px 14px !important;
display: flex !important;
border-bottom-color: var(--v43-line) !important;
background: color-mix(in srgb, var(--v43-surface-soft) 95%, transparent) !important;
}
.kara-v43 .app-shell { min-height: calc(100vh - var(--v43-panel-header-h)); padding-top: 0 !important; display: grid !important; grid-template-columns: var(--v43-sidebar-w) minmax(0, 1fr) !important; }
.kara-v43 .sidebar {
position: sticky !important;
inset: auto !important;
top: var(--v43-panel-header-h) !important;
width: auto !important;
height: calc(100vh - var(--v43-panel-header-h)) !important;
padding: 12px !important;
display: block !important;
overflow: hidden !important;
border-right-color: var(--v43-line) !important;
background: color-mix(in srgb, var(--v43-page) 92%, transparent) !important;
}
.kara-v43 .content { grid-column: auto !important; width: min(100%, var(--v43-panel-max)) !important; max-width: var(--v43-panel-max) !important; height: auto !important; margin-inline: auto !important; padding: clamp(18px, 2.4vw, 38px) !important; overflow: visible !important; }
.kara-v43 .workspace-panel,
.kara-v43 .card { border-radius: var(--v43-r3) !important; }
.kara-v43 .card { padding: clamp(18px, 2.2vw, 25px) !important; }
.kara-v43 .card-title { display: flex !important; align-items: flex-start !important; gap: 18px !important; margin-bottom: 16px !important; }
.kara-v43 .workspace-kpi-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
.kara-v43 .workspace-main-grid,
.kara-v43 .workspace-secondary-grid,
.kara-v43 .workspace-flow-visuals { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
.kara-v43 .form-grid,
.kara-v43 .founder-form-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.kara-v43 .form-grid > .field,
.kara-v43 .form-grid > label,
.kara-v43 .form-grid > div,
.kara-v43 .form-grid.two > .field,
.kara-v43 .form-grid.two > label,
.kara-v43 .form-grid.two > div,
.kara-v43 .form-grid.three > .field,
.kara-v43 .form-grid.three > label,
.kara-v43 .form-grid.three > div,
.kara-v43 .founder-form-grid > .founder-field { grid-column: auto !important; }
.kara-v43 .toggle-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.kara-v43 .toggle-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 14px !important; padding: 10px 12px !important; }
.kara-v43 .founder-layout { display: grid !important; grid-template-columns: var(--v43-sidebar-w) minmax(0, 1fr) !important; }
.kara-v43 .founder-sidebar { position: sticky !important; top: var(--v43-panel-header-h) !important; height: calc(100vh - var(--v43-panel-header-h)); background: color-mix(in srgb, var(--v43-page) 92%, transparent); }
.kara-v43 .founder-stat-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 9px !important; }
.kara-v43 .founder-overview-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
@media (max-width: 1280px) {
.kara-v43 .kara25-kpis,
.kara-v43 .workspace-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.kara-v43 .founder-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1080px) {
.kara-v43 .v16-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.kara-v43 .kara25-dashboard { display: block !important; }
.kara-v43 .kara25-dashboard-sidebar { position: static !important; height: auto !important; }
.kara-v43 .kara25-hero,
.kara-v43 .kara25-content-grid { grid-template-columns: 1fr !important; }
.kara-v43 .founder-overview-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 940px) {
.kara-v43 .v14-header,
.kara-v43 .kara-panel-header,
.kara-v43 .founder-topbar { gap: 9px !important; }
.kara-v43 .app-shell,
.kara-v43 .founder-layout { display: block !important; }
.kara-v43 .sidebar,
.kara-v43 .founder-sidebar {
position: fixed !important;
inset: var(--v43-panel-header-h) auto 0 0 !important;
z-index: 1400 !important;
width: min(340px, calc(100vw - 50px)) !important;
height: calc(100vh - var(--v43-panel-header-h)) !important;
transform: translateX(-106%);
border-right-color: var(--v43-line-strong) !important;
background: var(--v43-page) !important;
}
.kara-v43.sidebar-open .sidebar,
.kara-v43.mobile-sidebar-open .sidebar,
.kara-v43.founder-mobile-open .founder-sidebar { transform: translateX(0) !important; }
.kara-v43 .content,
.kara-v43 .founder-main { width: 100% !important; max-width: none !important; padding: 14px !important; }
.kara-v43 .founder-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
.kara-v43 .v16-plan-grid,
.kara-v43 .kara25-hero-status,
.kara-v43 .kara25-kpis,
.kara-v43 .workspace-kpi-grid,
.kara-v43 .workspace-main-grid,
.kara-v43 .workspace-secondary-grid,
.kara-v43 .workspace-flow-visuals,
.kara-v43 .founder-stat-grid,
.kara-v43 .founder-overview-grid,
.kara-v43 .form-grid,
.kara-v43 .founder-form-grid,
.kara-v43 .toggle-grid { grid-template-columns: 1fr !important; }
.kara-v43 .kara25-server-row { grid-template-columns: 1fr !important; }
}
/* ============================================================
Ledger design layer — public marketing site only.
Scoped entirely under body.kara-page / body.k39-page (never
present on dashboard.ejs, guild.ejs, admin.ejs). Remaps the
shared component tokens (--panel, --line, --accent, --text, ...)
so every existing kara36-, k39- and kara-v303- prefixed rule above picks
up the navy-blue ledger palette automatically, with no need to
touch each component rule individually. A short list of
hardcoded (non-token) gradients/glows is flattened separately.
============================================================ */
body.kara-page,
body.k39-page,
body.founder-console-page,
body.premium-page,
body.kara-auth-page {
--bg: var(--kara-paper);
--panel: var(--kara-surface);
--panel-2: var(--kara-surface-2);
--panel-3: var(--kara-surface-2);
--panel-glass: var(--kara-surface);
--line: var(--kara-line);
--line-strong: var(--kara-line-strong);
--text: var(--kara-ink);
--text-soft: var(--kara-ink-soft);
--muted: var(--kara-muted);
--dim: var(--kara-muted);
--accent: var(--kara-accent);
--accent-strong: var(--kara-accent-ink);
--shadow-sm: var(--kara-shadow);
--shadow: var(--kara-shadow);
--shadow-lg: 0 8px 28px rgba(16, 26, 44, .10);
}
/* The merged v43 layer (public/kara-v43.css, see above) carries its OWN
parallel token set (--v43-*) and wins over plain .classname rules for
shared component names (.kara-header, .kara36-*, .k39-*, ...) because
every v43 selector is scoped as ".kara-v43 .foo" (higher specificity).
Every kara/k39 page also carries the "kara-v43" body class, so redefine
the --v43-* tokens too, on the compound "body.kara-v43.kara-page" /
"body.kara-v43.k39-page" selector — its specificity (1 element + 2
classes) beats the plain ".kara-v43 { --v43-accent: ... }" definitions
regardless of source order, so this is guaranteed to win. */
body.kara-v43.kara-page,
body.kara-v43.k39-page,
body.kara-v43.founder-console-page,
body.kara-v43.premium-page,
body.kara-v43.kara-auth-page {
background: var(--kara-paper);
color: var(--kara-ink);
--v43-page: var(--kara-paper);
--v43-page-2: var(--kara-paper);
--v43-surface: var(--kara-surface);
--v43-surface-2: var(--kara-surface-2);
--v43-surface-3: var(--kara-surface-2);
--v43-surface-soft: var(--kara-surface);
--v43-line: var(--kara-line);
--v43-line-strong: var(--kara-line-strong);
--v43-ink: var(--kara-ink);
--v43-ink-2: var(--kara-ink-soft);
--v43-muted: var(--kara-muted);
--v43-dim: var(--kara-muted);
--v43-accent: var(--kara-accent);
--v43-accent-2: var(--kara-accent-ink);
--v43-shadow-1: var(--kara-shadow);
--v43-shadow-2: var(--kara-shadow);
--v43-shadow-3: var(--kara-shadow);
}
/* Flatten the specific hardcoded (non-token) gradients and glows that
would otherwise keep the old cyan/violet look regardless of the
token remap above. */
body.kara-page .kara36-hero h1 span,
body.k39-page .kara36-hero h1 span {
color: var(--kara-accent-ink);
background: none;
-webkit-text-fill-color: currentColor;
}
body.kara-page .kara36-stage-glow { display: none; }
body.kara-page .kara36-command-console,
body.kara-page .kara36-bento-card {
background: var(--kara-surface);
}
/* Hero stat tiles (45+/33+/7-24) inherited a leftover v42 rule
(background: rgba(255,255,255,.015) + border) that the v43 minimal
border-top design never overrode — showed up as a dull grey box behind
each number. v43 already draws its own border-top divider above the row;
the tiles themselves should be flush, no border/background. */
body.kara-page .kara36-hero-stats > div {
background: none;
border: none;
padding: 0;
}
/* "BUILT BY KARA · KARA v42" status pill at the very top of the hero sat
on a near-invisible rgba(255,255,255,.018) background — basically flat
text with a thin border, no sense that it's a badge. Give it the same
accent-tinted gradient + glow treatment used on cards elsewhere on the
page so it reads as a proper pill, not a stray outline. */
body.kara-page .kara36-status-pill {
background:
linear-gradient(120deg, color-mix(in srgb, var(--kara-accent) 12%, transparent), transparent 65%),
var(--kara-surface);
border-color: var(--kara-line-strong);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 24px -18px color-mix(in srgb, var(--kara-accent) 50%, transparent);
}
body.kara-page .kara36-status-pill i {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent);
}
body.kara-page .kara36-command-user > span {
background: var(--kara-accent);
}
body.kara-page .kara36-final-cta,
body.k39-page .k39-ticket-cta {
background: var(--kara-surface);
}
body.kara-page .kara36-plan-card.featured,
body.k39-page .k39-plan-card.featured {
box-shadow: var(--kara-shadow);
}
body.kara-page .kara36-floating-card {
background: var(--kara-surface);
border-color: var(--kara-line);
box-shadow: var(--kara-shadow);
backdrop-filter: none;
}
body.kara-page .kara-assistant-launcher,
body.k39-page .kara-assistant-launcher {
background: var(--kara-surface);
border-color: var(--kara-line-strong);
box-shadow: var(--kara-shadow);
backdrop-filter: none;
}
body.kara-page .kara-assistant-launcher-orbit,
body.k39-page .kara-assistant-launcher-orbit {
border-color: var(--kara-line);
}
/* The assistant-showcase illustration was a large (330px) mascot over a
glow blob — shrink to a small measured icon per the approved direction
(mascots used sparingly, no full-illustration treatment). Shrinking the
image alone (previous rule) left the outer box at its old 444x138 grid
size, so a 96px icon sat in the middle of a huge empty frame — the exact
"boş kutu" complaint. Constrain the box to the icon's own footprint and
pull the two-column gap in so the section reads as one compact unit
instead of a mostly-empty half-page block. */
body.kara-page .kara36-assistant-showcase {
grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) !important;
gap: 32px !important;
}
body.kara-page .kara36-assistant-showcase > div:first-child {
min-height: 0;
width: 100%;
aspect-ratio: 1;
padding: 0;
background: var(--kara-surface);
}
body.kara-page .kara36-assistant-showcase img {
max-height: 72px;
max-width: 72px;
}
body.kara-page .k39-profile-quick > article,
body.kara-page .k39-profile-toolbar,
html[data-theme="light"] body.kara-page .k39-profile-quick > article,
html[data-theme="light"] body.kara-page .k39-profile-toolbar {
background: var(--kara-surface);
}
/* Flat, single-accent buttons (no gradient fill / colored glow shadow). */
body.kara-page .button.primary, body.kara-page .primary, body.kara-page .kara36-button.primary,
body.k39-page .button.primary, body.k39-page .primary, body.k39-page .k39-btn.primary,
body.founder-console-page .button.primary, body.founder-console-page .primary,
body.premium-page .button.primary, body.premium-page .primary {
color: var(--kara-accent-on);
background: var(--kara-accent);
border-color: var(--kara-accent);
box-shadow: none;
}
body.kara-page .button.primary:hover, body.kara-page .primary:hover, body.kara-page .kara36-button.primary:hover,
body.k39-page .button.primary:hover, body.k39-page .primary:hover, body.k39-page .k39-btn.primary:hover,
body.founder-console-page .button.primary:hover, body.founder-console-page .primary:hover,
body.premium-page .button.primary:hover, body.premium-page .primary:hover {
background: var(--kara-accent-ink);
border-color: var(--kara-accent-ink);
}
body.kara-page .button.ghost, body.kara-page .ghost, body.kara-page .kara36-button.ghost,
body.k39-page .button.ghost, body.k39-page .ghost, body.k39-page .k39-btn.ghost,
body.founder-console-page .button.ghost, body.founder-console-page .ghost,
body.premium-page .button.ghost, body.premium-page .ghost {
background: transparent;
}
/* Typography: Plex Sans for prose, Plex Mono for stats/status/labels. */
body.kara-page, body.k39-page, body.founder-console-page, body.premium-page,
body.kara-page input, body.kara-page button, body.kara-page select, body.kara-page textarea,
body.k39-page input, body.k39-page button, body.k39-page select, body.k39-page textarea,
body.founder-console-page input, body.founder-console-page button, body.founder-console-page select, body.founder-console-page textarea,
body.premium-page input, body.premium-page button, body.premium-page select, body.premium-page textarea {
font-family: var(--kara-font-sans);
}
body.kara-page .kara36-hero-stats dt, body.kara-page .kara36-status-pill b,
body.kara-page .kara36-price, body.k39-page .k39-plan-price,
body.kara-page .k39-profile-stats b, body.kara-page .kara-v303-identity-metrics b,
body.kara-page .kara36-proof-strip span, body.k39-page .eyebrow, body.kara-page .eyebrow,
body.kara-page .kara36-bento-card > span, body.kara-page .kara36-card-copy > span {
font-family: var(--kara-font-mono);
/* IBM Plex Mono only ships 400/500 (public/fonts/) — these selectors
inherited 780–900 font-weight rules written for the sans variable
font (which covers 400–700). Anything above 500 here has no matching
mono glyph, so the browser synthesizes a fake bold: thickened,
slightly misshapen strokes ("bozuk" text in the price/eyebrow labels).
Cap to the heaviest real weight the file has. */
font-weight: 500;
}
/* ============================================================
Premium depth pass — supersedes the earlier "ledger fidelity"
pass. That version pinned every card/button on the 9 public
pages to a flat 4–8px "record" radius with box-shadow:none and
hid the floating cards/window dots; the client reviewed it live
and called it too plain next to competitor FiveM/Discord sites
(glassy cards, glow, bigger hero type). This block replaces it
with a richer, higher-depth treatment on the same components —
soft glass surfaces, a tinted glow shadow, a bigger hero, and
the floating cards restored — while keeping the brass/paper
palette from the token remap above (no reintroduced cyan).
============================================================ */
body.kara-page .kara36-command-console,
body.kara-page .kara36-bento-card,
body.kara-page .kara36-hybrid-visual,
body.kara-page .kara36-assistant-showcase > div,
body.kara-page .kara36-assistant-showcase > article,
body.kara-page .kara36-plan-card,
body.k39-page .k39-plan-card,
body.k39-page .k39-card,
body.k39-page .k39-choice,
body.k39-page .k39-issue,
body.k39-page .k39-window,
body.k39-page .k39-feature-panel,
body.kara-page .kara-v303-workspace-card,
body.kara-page .kara-v303-project-card,
body.kara-page .kara-v303-info-feature,
body.kara-page .kara-v303-status-card,
body.kara-page .kara-v303-identity-card,
body.kara-page .kara-v303-products-panel,
body.kara-page .kara-v303-status-panel,
body.kara-page .kara-v303-product-core,
body.kara-page .kara-v303-architecture,
body.kara-page .kara-v303-roadmap,
body.kara-page .kara-assistant-window {
border-radius: 20px;
}
/* .kara36-bento-card / .kara36-plan-card / .k39-card each carry a competing
"!important" border-radius elsewhere in this file (a leftover v42/v43
sizing war) — match with !important so this pass actually wins. */
body.kara-page .kara36-bento-card,
body.kara-page .kara36-plan-card,
body.kara-page .kara36-review-card,
body.k39-page .k39-card {
border-radius: 20px !important;
position: relative;
overflow: hidden;
border-color: var(--kara-line);
background:
linear-gradient(155deg, color-mix(in srgb, var(--kara-accent) 6%, transparent), transparent 55%),
var(--kara-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 20px 48px -28px color-mix(in srgb, var(--kara-accent) 45%, transparent);
transition: transform .35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .35s cubic-bezier(0.23, 1, 0.32, 1), border-color .35s ease;
}
/* GERÇEK MOBİL HATASI (2026-08-17 denetimi): plan karşılaştırma tablosu da
.k39-card taşıdığı için yukarıdaki overflow:hidden onu da kapsıyordu ve
satır 1011'deki `.k39-compare { overflow-x: auto }` kuralını eziyordu.
Satırlar min-width:760px olduğundan 375-768px arası ekranlarda Gelişmiş ve
Kurumsal sütunları KESİLİYOR ve kaydırılamadığı için hiç görülemiyordu.
Kart görünümü korunur, yalnız yatay kaydırma geri verilir. */
body.k39-page .k39-card.k39-compare { overflow-x: auto; overflow-y: hidden; }
body.kara-page .kara36-bento-card:hover,
body.kara-page .kara36-plan-card:hover,
body.kara-page .kara36-review-card:hover,
body.k39-page .k39-card:hover {
transform: translateY(-3px);
border-color: var(--kara-line-strong);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 30px 60px -26px color-mix(in srgb, var(--kara-accent) 55%, transparent);
}
body.kara-page .kara36-plan-card.featured {
box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 34px 70px -26px color-mix(in srgb, var(--kara-accent) 65%, transparent);
}
body.kara-page .kara36-mini-metric,
body.kara-page .kara36-ticket-flow,
body.kara-page .kara36-hybrid-node,
body.kara-page .kara36-assistant-example,
body.kara-page .kara36-intent-map,
body.kara-page .kara36-command-user,
body.kara-page .kara36-plan-list > div,
body.kara-page .kara36-proof-strip,
body.kara-page .kara36-proof-strip > div,
body.k39-page .k39-command-card,
body.k39-page .k39-server-card,
body.k39-page .k39-blueprint-row,
body.k39-page .k39-outcomes > div,
body.k39-page .k39-command-input,
body.k39-page .k39-command-steps > div,
body.kara-page .kara-v303-status-list > div,
body.kara-page .kara-v303-roadmap-list > div,
body.kara-page .kara-v303-product-nodes > div,
body.kara-page .kara-v303-mini-flow > div {
border-radius: 12px;
}
body.kara-page .button, body.kara-page .kara36-button, body.kara-page .k39-btn,
body.k39-page .button, body.k39-page .kara36-button, body.k39-page .k39-btn,
body.kara-page .kara-account-chip, body.k39-page .kara-account-chip,
body.founder-console-page .button, body.premium-page .button, body.premium-page .v14-btn {
border-radius: 999px;
}
body.kara-page .button.primary, body.kara-page .kara36-button.primary,
body.k39-page .button.primary, body.k39-page .kara36-button.primary {
box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 16px 32px -12px color-mix(in srgb, var(--kara-accent) 55%, transparent);
}
body.kara-page .kara36-button b, body.k39-page .k39-btn b {
width: 24px;
height: 24px;
margin-right: -4px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, currentColor 14%, transparent);
transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
body.kara-page .kara36-button:hover b, body.k39-page .k39-btn:hover b {
transform: translate(2px, -2px);
}
/* Profile center: compact Discord identity, then useful account content. */
body.k39-profile { --profile-ease:cubic-bezier(.23,1,.32,1); background:var(--kara-paper); }
/* Profil sayfasının hesap kenar çubuğu (kara25-dashboard-sidebar, skin=account)
Dashboard/Guild ile aynı görsel dili paylaşır. Kasıtlı olarak .kara25-dashboard
sarmalayıcısını KULLANMIYOR: kara-header (.kara-v43 .kara-header, satır ~2242)
position:fixed bir "yüzen kart" olduğu için, .kara25-dashboard'ın kendi üst
boşluğunu tahmin etmeye çalışmak yerine sidebar doğrudan .k39-profile-main'in
İÇİNE, o kutunun ZATEN doğru şekilde ayarlanmış üst boşluğunun altına
yerleştirildi — böylece hesap kartı sabit başlığın arkasında kalmıyor. */
body.k39-profile .k39-profile-main { display: grid; grid-template-columns: var(--v43-sidebar-w) minmax(0, 1fr); align-items: start; gap: 22px; }
body.k39-profile .kara25-dashboard-sidebar { position: sticky; top: 100px; height: calc(100vh - 116px); }
body.k39-profile .k39-profile-content { min-width: 0; }
/* Masaüstü "daralt" simge-modu bu sayfa için ayrıca inşa edilmedi (tek
sayfalık bir ayar ekranında gerek görülmedi) — buton işlevsiz kalmasın
diye burada gizleniyor; mobil menü kara-v42.js#setupPanelShell() ile
otomatik çalışır. */
body.k39-profile .kara25-sidebar-toggle { display: none; }
@media (max-width: 940px) {
body.k39-profile .k39-profile-main { display: block; }
body.k39-profile .kara25-dashboard-sidebar { position: static; height: auto; margin-bottom: 16px; }
}
.k39-profile .k39-profile-main { width:min(calc(100% - 40px),1280px); padding-top:106px; }
.k39-profile .k39-profile-cover { min-height:334px; padding:0!important; border-radius:18px; isolation:isolate; background:var(--panel); box-shadow:0 24px 70px -48px color-mix(in srgb,var(--discord-accent) 50%,transparent); }
.k39-profile .k39-profile-art { position:absolute; inset:0 0 auto; height:164px; z-index:-2; background-position:center 32%; background-size:cover; background-color:var(--panel-2); }
.k39-profile .k39-profile-art:not([style]) { background-image:radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--discord-accent) 12%,transparent),transparent 38%),linear-gradient(135deg,var(--panel-2),var(--panel)); }
.k39-profile .k39-profile-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,8,13,.06),rgba(5,8,13,.18) 55%,var(--panel)); }
.k39-profile .k39-profile-cover::before { display:none; }
.k39-profile-sync { position:absolute; z-index:3; top:14px; right:14px; padding:7px 9px; display:flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.16); border-radius:8px; color:#f5f3ed; background:rgba(8,12,18,.62); backdrop-filter:blur(12px); font-size:.61rem; font-weight:700; }
.k39-profile-sync i { width:6px; height:6px; border-radius:50%; background:#4bd29d; }
.k39-profile .k39-profile-identity { min-height:334px; padding:112px 32px 24px; grid-template-columns:108px minmax(0,1fr); align-items:start; gap:20px; }
.k39-profile .k39-profile-avatar { width:108px; height:108px; border:5px solid var(--panel); border-radius:26px; background:var(--panel); box-shadow:0 14px 34px rgba(0,0,0,.26); }
.k39-profile .k39-profile-avatar img:not(.k39-avatar-decoration),.k39-profile .k39-profile-avatar>span { border-radius:22px; }
.k39-profile .k39-avatar-decoration { position:absolute; inset:-14%; width:128%; height:128%; max-width:none; object-fit:contain; pointer-events:none; }
.k39-profile .k39-profile-avatar>i { width:17px; height:17px; border-width:4px; }
.k39-profile-title-row { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:9px 12px; }
.k39-profile .k39-profile-copy h1 { margin:0; font-size:clamp(2rem,3.2vw,3.2rem); line-height:1; letter-spacing:-.045em; }
.k39-profile .k39-profile-copy>p { margin:0 0 5px; font-size:.92rem; font-weight:650; }
.k39-profile .k39-profile-copy>small { max-width:64ch; color:var(--muted); font-size:.73rem; }
.k39-profile .k39-profile-badges span { padding:4px 7px; background:color-mix(in srgb,var(--panel) 86%,transparent); backdrop-filter:blur(8px); }
.k39-profile .k39-profile-badges .is-status { gap:5px; }
.k39-profile .k39-profile-badges .is-status i { width:6px; height:6px; border-radius:50%; background:var(--green); }
.k39-profile .k39-profile-title-row+p { margin-top:7px; }
.k39-profile .k39-clan-tag img { width:14px; height:14px; object-fit:contain; }
.k39-profile .k39-meta-status { color:var(--text-soft); }
.k39-profile .k39-meta-status i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent); }
.k39-profile .k39-profile-toolbar { position:static; margin:12px 0; padding:6px; justify-content:flex-start; border-radius:12px; background:var(--panel); backdrop-filter:none; }
.k39-profile .k39-profile-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr); gap:12px; align-items:start; }
.k39-profile-primary,.k39-profile-secondary { min-width:0; display:grid; gap:12px; }
.k39-profile .k39-profile-panel { padding:20px; border-radius:16px; background:var(--panel); box-shadow:none; }
.k39-profile .k39-profile-modal { z-index:1800; }
.k39-profile .k39-profile-panel-head { margin-bottom:16px; }
.k39-profile .k39-profile-panel-head>div>span { letter-spacing:.08em; }
.k39-profile .k39-profile-panel-head h2 { font-size:1.05rem; letter-spacing:-.02em; }
.k39-profile .k39-profile-stats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-block:1px solid var(--line); }
.k39-profile .k39-profile-stats>article { padding:15px 14px; border:0; border-right:1px solid var(--line); border-radius:0; background:transparent; }
.k39-profile .k39-profile-stats>article:last-child { border-right:0; }
.k39-profile .k39-profile-stats b { margin-top:5px; font-size:.96rem; font-variant-numeric:tabular-nums; }
.k39-profile-about { margin-top:16px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; align-items:start; }
.k39-profile-about-avatar { width:42px; height:42px; overflow:hidden; display:grid; place-items:center; border-radius:11px; background:var(--panel-3); font-weight:800; }
.k39-profile-about-avatar img { width:100%; height:100%; object-fit:cover; }
.k39-profile-about b,.k39-profile-about small { display:block; }
.k39-profile-about b { font-size:.78rem; }
.k39-profile-about small { margin-top:2px; font-size:.62rem; }
.k39-profile-about p { margin:8px 0 0; color:var(--text-soft); font-size:.72rem; line-height:1.55; }
.k39-profile-server-list { display:grid; gap:6px; }
.k39-server-row { min-width:0; padding:10px; display:grid; grid-template-columns:40px minmax(0,1fr) auto auto; gap:10px; align-items:center; border:1px solid transparent; border-radius:10px; transition:border-color 160ms ease,background-color 160ms ease; }
.k39-profile-server-icon { width:38px; height:38px; overflow:hidden; display:grid; place-items:center; border-radius:10px; background:var(--panel-3); font-weight:800; }
.k39-profile-server-icon img { width:100%; height:100%; object-fit:cover; }
.k39-server-copy { min-width:0; }
.k39-server-copy b,.k39-server-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k39-server-copy b { font-size:.75rem; }
.k39-server-copy small { margin-top:3px; font-size:.61rem; }
.k39-server-connection { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.57rem; font-weight:750; white-space:nowrap; }
.k39-server-connection i { width:6px; height:6px; border-radius:50%; background:var(--muted); }
.k39-server-connection.is-online { color:var(--green); }
.k39-server-connection.is-online i { background:var(--green); }
.k39-server-action { padding:7px 10px; border:1px solid var(--line); border-radius:8px; color:var(--text); font-size:.61rem; font-weight:750; text-decoration:none; white-space:nowrap; }
.k39-profile-empty { padding:22px; border:1px dashed var(--line); border-radius:11px; text-align:center; }
.k39-profile-empty b,.k39-profile-empty span { display:block; }
.k39-profile-empty span { margin-top:5px; color:var(--muted); font-size:.68rem; }
.k39-profile-empty.is-compact { padding:16px; }
.k39-profile-empty .k39-empty-icon { width:28px; height:28px; margin:0 auto 8px; display:grid; place-items:center; border-radius:8px; color:var(--text-soft); background:var(--panel-3); font-size:.78rem; }
.k39-profile .k39-security-row,.k39-profile .k39-activity-row { border:0; border-radius:9px; background:var(--panel-2); }
.k39-score-ring { position:relative; width:50px; height:50px; flex:0 0 auto; }
.k39-score-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.k39-score-ring circle { fill:none; stroke:var(--panel-3); stroke-width:4; }
.k39-score-ring circle+circle { stroke:var(--green); stroke-linecap:round; stroke-dasharray:113.1; stroke-dashoffset:calc(113.1 - (113.1 * var(--score) / 100)); }
.k39-score-ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:.67rem; }
.k39-timeline,.k39-notification-list { display:grid; gap:3px; }
.k39-timeline-item,.k39-notification-row { min-width:0; padding:10px 8px; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.k39-timeline-item>span,.k39-notification-row>span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--text-soft); background:var(--panel-2); font-size:.58rem; font-weight:800; }
.k39-timeline-item>span.is-login,.k39-timeline-item>span.is-profile { color:var(--green); }
.k39-timeline-item b,.k39-timeline-item small,.k39-notification-row b,.k39-notification-row small { display:block; min-width:0; }
.k39-timeline-item b,.k39-notification-row b { overflow:hidden; color:var(--text); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.k39-timeline-item small,.k39-notification-row small { margin-top:3px; overflow:hidden; color:var(--muted); font-size:.59rem; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.k39-timeline-item time,.k39-notification-row time { max-width:88px; color:var(--muted); font-size:.57rem; line-height:1.25; text-align:right; white-space:nowrap; }
.k39-notification-row { border-radius:9px; }
.k39-profile-toast { position:fixed; right:22px; bottom:22px; z-index:1900; min-width:280px; padding:12px 14px; display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 18px 50px rgba(0,0,0,.32); opacity:0; transform:translateY(12px); transition:opacity 180ms ease,transform 180ms var(--profile-ease); }
.k39-profile-toast.is-visible { opacity:1; transform:none; }
.k39-profile-toast>span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--green); background:color-mix(in srgb,var(--green) 10%,var(--panel-2)); }
.k39-profile-toast b,.k39-profile-toast small { display:block; }
.k39-profile-toast b { font-size:.7rem; }.k39-profile-toast small { margin-top:3px; color:var(--muted); font-size:.61rem; }
.k39-profile .k39-profile-dialog { width:min(1080px,calc(100vw - 36px)); max-width:100%; max-height:min(820px,calc(100dvh - 40px)); padding:0; overflow:hidden auto; }
.k39-profile .k39-profile-dialog>header { position:sticky; top:0; z-index:4; margin:0; padding:20px 22px 16px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel) 94%,transparent); backdrop-filter:blur(16px); }
.k39-profile .k39-profile-dialog>header p { max-width:64ch; }
.k39-profile .k39-profile-form { gap:0; }
.k39-editor-layout { display:grid; grid-template-columns:164px minmax(0,1fr) 300px; min-height:470px; }
.k39-editor-controls { min-width:0; padding:22px; border-left:1px solid var(--line); }
.k39-editor-tabs { padding:16px 10px; display:flex; flex-direction:column; gap:4px; background:var(--panel-2); }
.k39-editor-tabs button { min-width:0; min-height:58px; padding:10px 11px; border:0; border-radius:9px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; color:var(--muted); background:transparent; text-align:left; cursor:pointer; transition:color 160ms ease,background-color 160ms ease,transform 120ms ease; }
.k39-editor-tabs button b { font-size:.7rem; }
.k39-editor-tabs button small { margin-top:4px; font-size:.58rem; font-weight:600; }
.k39-editor-tabs button.is-active { color:var(--text); background:var(--panel-3); box-shadow:inset 3px 0 0 var(--accent); }
.k39-editor-tabs button:active { transform:scale(.98); }
.k39-profile [data-profile-editor-panel][hidden] { display:none!important; }
.k39-editor-section-head { margin-bottom:2px; }
.k39-editor-section-head h3 { margin:0 0 5px; font-size:.95rem; letter-spacing:-.02em; }
.k39-editor-section-head p { margin:0; font-size:.65rem; line-height:1.5; }
.k39-discord-managed { padding:11px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.k39-discord-managed-avatar { width:38px; height:38px; overflow:hidden; border-radius:10px; background:var(--panel-3); }
.k39-discord-managed-avatar img { width:100%; height:100%; object-fit:cover; }
.k39-discord-managed b,.k39-discord-managed small { display:block; }
.k39-discord-managed b { font-size:.69rem; }
.k39-discord-managed small { margin-top:3px; font-size:.59rem; }
.k39-discord-managed>span { color:var(--green); font-size:.57rem; font-weight:800; }
.k39-editor-preview { min-width:0; padding:22px 18px; border-left:1px solid var(--line); background:var(--panel-2); }
.k39-profile .k39-field>span { color:var(--text-soft); }
.k39-profile .k39-field input,.k39-profile .k39-field select,.k39-profile .k39-field textarea { border:1px solid var(--line); background:var(--panel-2); color:var(--text); box-shadow:none; }
.k39-profile .k39-field input:hover,.k39-profile .k39-field select:hover,.k39-profile .k39-field textarea:hover { border-color:var(--line-strong); }
.k39-profile .k39-field input:focus,.k39-profile .k39-field select:focus,.k39-profile .k39-field textarea:focus { border-color:var(--accent); background:var(--panel-2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent); outline:0; }
.k39-profile .k39-field input[type="color"] { padding:6px; }
.k39-editor-security-list { display:grid; gap:8px; }
.k39-editor-security-list>div { padding:11px; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.k39-editor-security-list>div>span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--green); background:color-mix(in srgb,var(--green) 9%,var(--panel-3)); }
.k39-editor-security-list p { margin:0; }.k39-editor-security-list b,.k39-editor-security-list small { display:block; }.k39-editor-security-list b { font-size:.68rem; }.k39-editor-security-list small { margin-top:3px; font-size:.59rem; }.k39-editor-security-list em { color:var(--green); font-size:.56rem; font-style:normal; font-weight:800; }
.k39-editor-preview>span { color:var(--accent); font-size:.59rem; font-weight:850; letter-spacing:.1em; }
.k39-editor-preview>p { margin:12px 2px 0; font-size:.64rem; line-height:1.5; }
.k39-mini-profile { margin-top:10px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:none; }
.k39-mini-banner { height:96px; background-image:linear-gradient(180deg,transparent,rgba(4,7,11,.26)),var(--preview-banner,linear-gradient(135deg,var(--panel-3),var(--panel))); background-size:cover; background-position:center; }
.k39-mini-body { position:relative; padding:43px 15px 15px; }
.k39-mini-avatar { position:absolute; top:-35px; left:15px; width:66px; height:66px; padding:4px; overflow:hidden; border-radius:18px; background:var(--panel); }
.k39-mini-avatar img { width:100%; height:100%; border-radius:14px; object-fit:cover; }
.k39-mini-body b,.k39-mini-body small { display:block; }
.k39-mini-body b { font-size:1rem; letter-spacing:-.02em; }
.k39-mini-body small { margin-top:3px; color:var(--muted); }
.k39-mini-body p { min-height:38px; margin:13px 0; color:var(--text-soft); font-size:.67rem; line-height:1.5; }
.k39-mini-body footer { padding-top:10px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:.58rem; }
.k39-profile .k39-profile-form-actions { position:sticky; bottom:0; z-index:4; min-height:66px; padding:12px 22px; border-top:1px solid var(--line); align-items:center; background:color-mix(in srgb,var(--panel) 96%,transparent); backdrop-filter:blur(14px); }
.k39-profile .k39-profile-form-actions>span { margin-right:auto; color:var(--muted); font-size:.64rem; }
.k39-profile .k39-profile-form-actions button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.k39-discard-confirm { position:absolute; inset:0; z-index:7; display:grid; place-items:center; padding:18px; background:rgba(3,6,10,.72); backdrop-filter:blur(8px); }
.k39-discard-confirm[hidden] { display:none; }
.k39-discard-confirm>section { width:min(390px,100%); padding:22px; border:1px solid var(--line); border-radius:15px; background:var(--panel); box-shadow:0 24px 70px rgba(0,0,0,.42); text-align:center; }
.k39-discard-confirm>section>span { width:34px; height:34px; margin:0 auto 12px; display:grid; place-items:center; border-radius:10px; color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--panel-2)); font-weight:850; }
.k39-discard-confirm h3 { margin:0; font-size:1rem; }.k39-discard-confirm p { margin:8px 0 18px; color:var(--muted); font-size:.68rem; line-height:1.5; }.k39-discard-confirm section>div { display:flex; justify-content:center; gap:8px; }
.k39-profile-modal:not([hidden]) .k39-profile-dialog { animation:profile-dialog-in 220ms var(--profile-ease) both; }
@keyframes profile-dialog-in { from { opacity:0; transform:translateY(2%) scale(.98); } to { opacity:1; transform:none; } }
@media (hover:hover) and (pointer:fine) { .k39-server-row:hover,.k39-notification-row:hover { border-color:var(--line); background:var(--panel-2); } .k39-server-action:hover { border-color:var(--accent); } }
@media (max-width:900px) { .k39-profile .k39-profile-layout,.k39-editor-layout { grid-template-columns:1fr; } .k39-editor-tabs { padding:8px; display:grid; grid-template-columns:repeat(4,1fr); } .k39-editor-tabs button { min-height:46px; align-items:center; text-align:center; } .k39-editor-tabs button.is-active { box-shadow:inset 0 -2px 0 var(--accent); } .k39-editor-controls,.k39-editor-preview { border-left:0; } .k39-editor-preview { border-top:1px solid var(--line); } .k39-profile .k39-profile-stats { grid-template-columns:repeat(2,1fr); } .k39-profile .k39-profile-stats>article:nth-child(2) { border-right:0; } .k39-profile .k39-profile-stats>article:nth-child(-n+2) { border-bottom:1px solid var(--line); } }
@media (max-width:640px) { .k39-profile .k39-profile-main { width:min(calc(100% - 24px),1280px); } .k39-profile .k39-profile-cover { min-height:auto; } .k39-profile .k39-profile-art { height:148px; } .k39-profile .k39-profile-identity { min-height:auto; padding:92px 18px 20px; grid-template-columns:1fr; align-items:start; gap:12px; } .k39-profile .k39-profile-avatar { width:92px; height:92px; } .k39-profile .k39-profile-copy h1 { font-size:2rem; } .k39-profile .k39-profile-panel { padding:16px; } .k39-profile .k39-profile-modal { padding:0; } .k39-profile .k39-profile-dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; justify-self:stretch; } .k39-profile .k39-profile-dialog>header { padding:18px 16px 14px; } .k39-editor-tabs button small { display:none; } .k39-editor-controls,.k39-editor-preview { padding:16px; } .k39-profile .k39-profile-form-actions { padding-inline:12px; } .k39-profile .k39-profile-form-actions>span { display:none; } .k39-server-row { grid-template-columns:38px minmax(0,1fr) auto; } .k39-server-connection { grid-column:2; justify-self:start; } .k39-server-action { grid-column:3; grid-row:1 / span 2; } .k39-timeline-item,.k39-notification-row { grid-template-columns:30px minmax(0,1fr); } .k39-timeline-item time,.k39-notification-row time { grid-column:2; max-width:none; text-align:left; } .k39-profile-toast { right:12px; bottom:12px; left:12px; min-width:0; } }
@media (prefers-reduced-motion:reduce) { .k39-profile-modal:not([hidden]) .k39-profile-dialog { animation:profile-dialog-fade 160ms ease both; } @keyframes profile-dialog-fade { from { opacity:0; } to { opacity:1; } } }
/* Traffic-light window dots and the two floating cards are back —
they read as an inert placeholder only when the console around
them is flat; with the glass/glow treatment above they add the
"live product" depth the client asked for. */
body.kara-page .kara36-floating-card {
background: var(--kara-surface);
border: 1px solid var(--kara-line);
box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 40px -20px color-mix(in srgb, var(--kara-accent) 40%, transparent);
backdrop-filter: blur(16px);
}
/* Bigger, heavier hero type — the client's reference runs large
display type; match that scale instead of the earlier restrained
2.15–3.4rem clamp. */
body.kara-page .kara36-hero h1 {
font-size: clamp(2.8rem, 5.6vw, 4.8rem);
line-height: 1.02;
}
body.k39-page .k39-hero-copy h1 {
font-size: clamp(2.4rem, 4.8vw, 4rem);
line-height: 1.04;
}
body.kara-page .kara-v303-hub-copy h1,
body.kara-page .kara-v303-projects-hero h1,
body.kara-page .kara-v303-info-hero h1 {
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
}
/* Header micro-components: soft pill radius instead of the earlier
6px "ledger" tightening. */
body.kara-page .kara-nav > a,
body.k39-page .kara-nav > a,
body.kara-page .kara-theme-toggle,
body.k39-page .kara-theme-toggle,
body.kara-page .kara-primary-button,
body.kara-page .kara-link-button,
body.k39-page .kara-primary-button,
body.k39-page .kara-link-button {
border-radius: 999px;
}
body.kara-page .kara-language,
body.k39-page .kara-language {
border-radius: 999px;
}
body.kara-page .kara-language a,
body.k39-page .kara-language a {
border-radius: 999px;
}
body.k39-page .k39-ticket-cta {
border-radius: 16px;
}
/* ============================================================
Hero choreography + ambient motion — the depth pass above fixed
individual cards, but the hero itself still read as one static
block landing on screen (client feedback: "sadece renkler
değişmiş", i.e. nothing actually moves on first paint). Two
fixes: (1) the hero copy's children stagger in on load instead
of fading as one unit, (2) the background carries a slow,
always-on drift so the page feels alive before any scroll or
hover — the two things a static screenshot can't show but a
loaded page immediately communicates.
============================================================ */
.kara36-hero-copy > *, .k39-hero-copy > * {
opacity: 0;
transform: translateY(12px);
transition: opacity .4s cubic-bezier(0.23, 1, 0.32, 1), transform .4s cubic-bezier(0.23, 1, 0.32, 1);
}
.kara-v42-ready .kara36-hero-copy.is-visible > *,
.kara-v42-ready .k39-hero.is-visible .k39-hero-copy > * { opacity: 1; transform: none; }
.kara36-hero-copy > *:nth-child(1), .k39-hero-copy > *:nth-child(1) { transition-delay: .04s; }
.kara36-hero-copy > *:nth-child(2), .k39-hero-copy > *:nth-child(2) { transition-delay: .1s; }
.kara36-hero-copy > *:nth-child(3), .k39-hero-copy > *:nth-child(3) { transition-delay: .16s; }
.kara36-hero-copy > *:nth-child(4), .k39-hero-copy > *:nth-child(4) { transition-delay: .22s; }
.kara36-hero-copy > *:nth-child(5), .k39-hero-copy > *:nth-child(5) { transition-delay: .28s; }
.kara36-hero-copy > *:nth-child(6) { transition-delay: .34s; }
.kara36-hero-stage, .k39-hero-visual {
opacity: 0;
transform: translateY(16px) scale(.99);
transition: opacity .45s cubic-bezier(0.23, 1, 0.32, 1) .1s, transform .45s cubic-bezier(0.23, 1, 0.32, 1) .1s;
}
.kara-v42-ready .kara36-hero-stage.is-visible,
.kara-v42-ready .k39-hero.is-visible .k39-hero-visual {
opacity: 1;
transform: none;
}
/* Console / hero-visual card: real glass instead of a flat panel —
blurred surface, a hairline inner highlight, and a slow conic
shimmer riding the border. transform/opacity + background-position
only, so it stays off the layout/paint path. */
body.kara-page .kara36-command-console, body.k39-page .k39-hero-visual {
position: relative;
background: color-mix(in srgb, var(--kara-surface) 82%, transparent);
backdrop-filter: blur(18px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .08), 0 30px 70px -30px color-mix(in srgb, var(--kara-accent) 55%, transparent);
}
body.kara-page .kara36-command-console::after, body.k39-page .k39-hero-visual::after {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--shimmer-angle, 0deg), transparent 0 65%, var(--kara-accent) 80%, transparent 92%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: kara-shimmer 6s linear infinite;
}
@keyframes kara-shimmer { to { --shimmer-angle: 360deg; } }
@property --shimmer-angle { syntax: ''; inherits: false; initial-value: 0deg; }
/* Ambient drift — two soft blobs behind the hero that move on a slow,
independent loop. transform-only (GPU), gated behind reduced-motion. */
body.kara-page .kara36-hero, body.k39-page .k39-hero {
position: relative;
isolation: isolate;
}
body.kara-page .kara36-hero::before, body.k39-page .k39-hero::before,
body.kara-page .kara36-hero::after, body.k39-page .k39-hero::after {
content: "";
position: absolute;
z-index: -1;
width: 46rem;
height: 46rem;
border-radius: 50%;
filter: blur(90px);
pointer-events: none;
opacity: .16;
}
body.kara-page .kara36-hero::before, body.k39-page .k39-hero::before {
top: -18rem;
left: -14rem;
background: var(--kara-accent);
animation: kara-drift-a 22s ease-in-out infinite;
}
body.kara-page .kara36-hero::after, body.k39-page .k39-hero::after {
top: -8rem;
right: -18rem;
background: var(--kara-accent-2, var(--kara-accent));
animation: kara-drift-b 26s ease-in-out infinite;
}
@keyframes kara-drift-a {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(4rem, 3rem); }
}
@keyframes kara-drift-b {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-3rem, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
body.kara-page .kara36-command-console::after, body.k39-page .k39-hero-visual::after,
body.kara-page .kara36-hero::before, body.k39-page .k39-hero::before,
body.kara-page .kara36-hero::after, body.k39-page .k39-hero::after { animation: none; }
}
/* ============================================================
Floating-card placement fix — restoring these cards (premium
depth pass, above) exposed a real layout bug: at the console's
current size the v42/v43 corner offsets land the "Site Asistanı"
card over the header row and "KARA Guard" over the plan list,
not beside them. Anchor both clear of the console's vertical
extent instead (above the top edge / below the bottom edge) so
they read as floating badges, not overlapping debris.
============================================================ */
body.kara-page .kara36-floating-card.assistant, body.k39-page .kara36-floating-card.assistant {
top: -18px;
right: 6%;
bottom: auto;
left: auto;
}
body.kara-page .kara36-floating-card.security, body.k39-page .kara36-floating-card.security {
bottom: -18px;
left: 6%;
top: auto;
right: auto;
}
body.kara-page .kara36-floating-card, body.k39-page .kara36-floating-card {
animation: kara-float 5s ease-in-out infinite;
}
body.kara-page .kara36-floating-card.security, body.k39-page .kara36-floating-card.security { animation-delay: -2.5s; }
@keyframes kara-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (max-width: 900px) {
body.kara-page .kara36-floating-card, body.k39-page .kara36-floating-card { display: none; }
}
/* ============================================================
Console "thinking line" — was a row of static dots and 11px
grey text, easy to miss next to everything else that now has
weight. A visible sequential pulse (not a spinner — this is a
one-time confirmation, not a loading state) plus clearer type.
============================================================ */
.kara36-thinking-line, .k39-command-steps { position: relative; }
.kara36-thinking-line {
gap: 7px;
padding: 8px 10px;
border-radius: 8px;
background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.kara36-thinking-line span {
width: 6px;
height: 6px;
animation: kara-pulse-dot 1.4s ease-in-out infinite;
}
.kara36-thinking-line span:nth-child(1) { animation-delay: 0s; }
.kara36-thinking-line span:nth-child(2) { animation-delay: .2s; }
.kara36-thinking-line span:nth-child(3) { animation-delay: .4s; }
.kara36-thinking-line b { font-size: .78rem; font-weight: 650; color: var(--text-soft); }
@keyframes kara-pulse-dot {
0%, 100% { opacity: .3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
.kara36-thinking-line span, body.kara-page .kara36-floating-card, body.k39-page .kara36-floating-card { animation: none; }
}
/* Founder Console — review moderation table */
.founder-kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--dash-gap, 16px); }
.founder-kpi { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.founder-kpi header { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.founder-kpi b { display: block; margin-top: 8px; font-size: 1.5rem; }
.review-admin-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.review-admin-user img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panel-3); }
.review-admin-user b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-admin-comment { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); }
.review-admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.review-admin-actions form { display: contents; }
/* Public homepage — user reviews carousel */
.kara36-review-rail-wrap { position: relative; display: flex; align-items: center; gap: 12px; }
.kara36-review-rail { display: flex; gap: 16px; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: none; }
.kara36-review-rail::-webkit-scrollbar { display: none; }
.kara36-review-card { flex: 0 0 320px; scroll-snap-align: start; padding: 22px; border: 1px solid var(--line); }
.kara36-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kara36-review-head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panel-3); }
.kara36-review-head div { flex: 1; min-width: 0; }
.kara36-review-head b { display: block; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara36-review-head small { color: var(--muted); font-size: .7rem; }
.kara36-review-score { flex: none; padding: 3px 9px; border-radius: 999px; font-family: var(--kara-font-mono); font-size: .72rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.kara36-review-card p { margin: 0; font-size: .86rem; line-height: 1.65; color: var(--text-soft); }
.kara36-review-nav { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.kara36-review-nav:hover { border-color: var(--kara-line-strong, var(--line-strong)); background: var(--panel-2); transform: scale(1.05); }
.kara36-review-empty { padding: 32px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 16px; }
@media (max-width: 720px) {
.kara36-review-nav { display: none; }
.kara36-review-card { flex-basis: 78vw; }
}
/* ============================================================
"Middle" section — proof strip + capabilities heading read as
a thin grey bar and a plain two-line heading next to the new
hero. Give the strip real hover feedback and an accent rail,
and push the section heading to the same scale as the hero.
============================================================ */
body.kara-page .kara36-proof-strip, body.k39-page .kara36-proof-strip {
gap: 1px;
background: var(--kara-line);
border: 1px solid var(--kara-line);
box-shadow: none;
}
body.kara-page .kara36-proof-strip > div, body.k39-page .kara36-proof-strip > div {
position: relative;
background: var(--kara-surface);
transition: background .3s ease, transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
body.kara-page .kara36-proof-strip > div::before, body.k39-page .kara36-proof-strip > div::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 2px;
background: var(--kara-accent);
transform: scaleY(0);
transform-origin: bottom;
transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
body.kara-page .kara36-proof-strip > div:hover, body.k39-page .kara36-proof-strip > div:hover {
background: var(--kara-surface-2);
transform: translateX(2px);
}
body.kara-page .kara36-proof-strip > div:hover::before, body.k39-page .kara36-proof-strip > div:hover::before {
transform: scaleY(1);
}
body.kara-page .kara36-section-head h2, body.k39-page .k39-section-head h2 {
font-size: clamp(1.9rem, 3.4vw, 3rem);
letter-spacing: -.02em;
}
/* ============================================================
kara19-command-* (public/kara-panel.js, ~line 1973) — a global
Ctrl+K quick-search overlay injected on almost every logged-in
page (dashboard's own index opts out via body.kara25-no-search;
everything else, including /premium and /admin, gets it). It has
NEVER had CSS in this file — confirmed absent in the pre-session
backup — so it rendered as an unstyled list of plain links. Built
with the shared tokens (--panel/--line/--accent/...) so it
automatically follows the ledger palette on pages already scoped
into it (kara-page/k39-page/founder-console-page/premium-page)
and still looks reasonable elsewhere.
============================================================ */
.kara19-command-trigger {
width: 36px; height: 36px; margin-right: 4px;
border: 1px solid var(--line); border-radius: 9px;
background: var(--panel-2); color: var(--muted);
display: grid; place-items: center; font-size: 1rem;
}
.kara19-command-trigger:hover { border-color: var(--line-strong); color: var(--text); }
.kara19-command-overlay {
position: fixed; inset: 0; z-index: 2400; display: none;
place-items: start center; padding: min(12vh, 110px) 16px 20px;
background: rgba(2, 7, 12, .6); backdrop-filter: blur(6px);
}
.kara19-command-overlay.open { display: grid; }
.kara19-command-palette {
width: min(640px, 100%); max-height: min(600px, calc(100vh - 100px));
display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--line-strong); border-radius: 14px;
background: var(--panel); box-shadow: var(--shadow-lg);
}
.kara19-command-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none; }
.kara19-command-search span { color: var(--muted); }
.kara19-command-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text); outline: none; }
.kara19-command-search kbd { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--kara-font-mono, monospace); font-size: .65rem; color: var(--muted); }
.kara19-command-results { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.kara19-command-results a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--text); }
.kara19-command-results a i { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--panel-2); font-style: normal; flex: none; }
.kara19-command-results a b { display: block; font-size: .82rem; font-weight: 700; }
.kara19-command-results a small { display: block; margin-top: 1px; color: var(--muted); font-size: .7rem; }
.kara19-command-results a.active, .kara19-command-results a:hover { background: var(--panel-2); }
.kara19-command-empty { padding: 24px; text-align: center; color: var(--muted); font-size: .85rem; }
@media (max-width: 600px) {
.kara19-command-overlay { padding: 10px; }
.kara19-command-palette { max-height: calc(100vh - 20px); border-radius: 12px; }
}
/* KARA unified Founder navigation rail ---------------------------------------
Mirrors the account and workspace sidebars without changing admin routing. */
.kara-v43.founder-console-page {
--kara-founder-sidebar-w: clamp(268px, var(--user-sidebar-width, 286px), 320px);
--kara-founder-sidebar-compact: 78px;
}
.kara-v43.founder-console-page .founder-layout {
grid-template-columns: var(--kara-founder-sidebar-w) minmax(0, 1fr) !important;
transition: grid-template-columns var(--v43-ease);
}
.kara-v43.founder-console-page .founder-sidebar.kara-sidebar {
padding: 12px 10px;
border-right-color: var(--v43-line);
background: color-mix(in srgb, var(--v43-page) 95%, var(--v43-surface)) !important;
box-shadow: inset -1px 0 0 rgba(255, 255, 255, .012);
transition: width var(--v43-ease), transform var(--v43-ease), padding var(--v43-ease);
}
.kara-v43.founder-console-page .founder-sidebar-head.kara-sidebar-head {
min-height: 54px;
padding: 4px 2px 11px;
display: grid;
grid-template-columns: minmax(0, 1fr) 36px;
align-items: center;
gap: 9px;
border-bottom-color: var(--v43-line);
}
.kara-v43.founder-console-page .founder-sidebar-title { min-width: 0; padding-left: 6px; }
.kara-v43.founder-console-page .founder-sidebar-title :where(span, b) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43.founder-console-page .founder-sidebar-title span { font-size: .58rem; letter-spacing: .14em; }
.kara-v43.founder-console-page .founder-sidebar-title b { margin-top: 5px; color: var(--v43-ink); font-size: .78rem; -webkit-text-fill-color: currentColor; background: none; }
.kara-v43.founder-console-page .founder-sidebar-toggle {
width: 30px;
height: 30px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid var(--v43-line);
border-radius: 8px;
color: var(--v43-muted);
background: var(--v43-surface-2);
transition: color var(--v43-ease), border-color var(--v43-ease), background var(--v43-ease), transform var(--v43-ease);
}
.kara-v43.founder-console-page .founder-sidebar-toggle:hover { color: var(--v43-accent-on); border-color: var(--v43-accent); background: var(--v43-accent); }
.kara-v43.founder-console-page .founder-sidebar-toggle svg { width: 16px; height: 16px; }
.kara-v43.founder-console-page .founder-security-shortcut {
min-height: 44px;
margin-top: 8px;
padding: 5px 8px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 9px;
border-color: var(--v43-line);
border-radius: 10px;
color: var(--v43-muted);
background: transparent;
box-shadow: none;
}
.kara-v43.founder-console-page .founder-security-shortcut svg {
width: 34px;
height: 34px;
padding: 8px;
border-radius: 9px;
color: var(--v43-warning);
background: color-mix(in srgb, var(--v43-warning) 9%, var(--v43-surface-2));
}
.kara-v43.founder-console-page .founder-security-shortcut:hover { color: var(--v43-ink); border-color: color-mix(in srgb, var(--v43-warning) 26%, var(--v43-line)); background: var(--v43-surface-2); }
.kara-v43.founder-console-page .founder-nav {
min-height: 0;
margin-top: 10px;
padding-right: 2px;
gap: 4px;
align-content: start;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.kara-v43.founder-console-page .founder-nav button {
min-height: 44px;
padding: 5px 7px;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 9px;
border-radius: 10px;
color: var(--v43-muted);
font-size: .73rem;
}
.kara-v43.founder-console-page .founder-nav .nav-icon {
width: 34px;
height: 34px;
padding: 8px;
border-radius: 9px;
color: var(--v43-dim);
background: var(--v43-surface-2);
}
.kara-v43.founder-console-page .founder-nav .nav-copy b { font-size: .72rem; font-weight: 650; }
.kara-v43.founder-console-page .founder-nav button:hover { color: var(--v43-ink); background: color-mix(in srgb, var(--v43-surface-2) 68%, transparent); }
.kara-v43.founder-console-page .founder-nav button.active {
color: var(--v43-ink);
border-color: var(--v43-accent);
background: color-mix(in srgb, var(--v43-accent) 14%, var(--v43-surface));
box-shadow: none;
}
.kara-v43.founder-console-page .founder-nav button.active .nav-icon { color: var(--v43-accent); background: color-mix(in srgb, var(--v43-accent) 16%, var(--v43-surface-3)); }
.kara-v43.founder-console-page .founder-vault-mini {
margin-top: 10px;
padding: 9px;
flex: none;
border-color: var(--v43-line);
border-radius: 12px;
background: var(--v43-surface);
}
.kara-v43.founder-console-page .kara-sidebar :where(a, button):focus-visible { outline: 2px solid color-mix(in srgb, var(--v43-accent) 72%, white); outline-offset: 2px; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) .founder-layout {
grid-template-columns: var(--kara-founder-sidebar-compact) minmax(0, 1fr) !important;
}
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) .founder-sidebar.kara-sidebar { padding-inline: 9px; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) .founder-sidebar-head { grid-template-columns: 1fr; padding-inline: 0; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) :where(.founder-sidebar-title, .founder-security-shortcut span, .founder-nav .nav-copy, .founder-nav em, .founder-vault-mini > div) { display: none; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) .founder-sidebar-toggle { margin-inline: auto; transform: rotate(180deg); }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) :where(.founder-security-shortcut, .founder-nav button) {
width: 48px;
margin-inline: auto;
padding: 5px 6px;
grid-template-columns: 34px;
justify-content: center;
}
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) .founder-vault-mini {
width: 48px;
margin-inline: auto;
padding: 5px;
grid-template-columns: 38px;
justify-content: center;
}
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) [data-kara-tooltip] { position: relative; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) [data-kara-tooltip]::after {
content: attr(data-kara-tooltip);
position: absolute;
left: calc(100% + 12px);
top: 50%;
z-index: 60;
padding: 7px 11px;
border: 1px solid var(--v43-line);
border-radius: 8px;
background: var(--v43-surface-3);
color: var(--v43-ink);
font-size: .68rem;
font-weight: 640;
line-height: 1;
white-space: nowrap;
box-shadow: var(--v43-shadow-1);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-50%) translateX(-4px);
transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) [data-kara-tooltip]:hover::after,
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) [data-kara-tooltip]:focus-visible::after {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
@media (max-width: 940px) {
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) .founder-layout { display: block !important; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) .founder-sidebar.kara-sidebar {
width: min(340px, calc(100vw - 50px)) !important;
padding: 12px 10px;
}
.kara-v43.founder-console-page .founder-sidebar-toggle { display: none; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) .founder-sidebar-head { grid-template-columns: minmax(0, 1fr); padding: 4px 2px 11px; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) :where(.founder-sidebar-title, .founder-security-shortcut span, .founder-nav .nav-copy, .founder-nav em, .founder-vault-mini > div) { display: block; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) :where(.founder-security-shortcut, .founder-nav button) { width: auto; margin-inline: 0; padding: 5px 7px; grid-template-columns: 34px minmax(0, 1fr) auto; justify-content: initial; }
.kara-v43.founder-console-page:is(.founder-sidebar-collapsed, [data-sidebar="compact"]) .founder-vault-mini { width: auto; margin-inline: 0; padding: 9px; grid-template-columns: 38px minmax(0, 1fr); justify-content: initial; }
}
/* KARA guided installation wizard ---------------------------------------------
A single-stage workflow replaces the previous vertically stacked sections.
The form field names and GET submission contract remain unchanged. */
.kara-v43.k39-invite .k39-invite-shell {
width: min(calc(100% - 40px), 1180px);
min-height: 100dvh;
margin-inline: auto;
padding: calc(var(--v43-public-header-h, 88px) + 26px) 0 64px;
}
.kara-v43.k39-invite .k39-install-intro {
margin-bottom: 18px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
}
.kara-v43.k39-invite .k39-install-intro > div:first-child { min-width: 0; }
.kara-v43.k39-invite .k39-install-intro h1 {
margin: 7px 0 8px;
color: var(--v43-ink);
font-size: clamp(1.8rem, 3.2vw, 3rem);
letter-spacing: -.045em;
line-height: 1.02;
text-wrap: balance;
}
.kara-v43.k39-invite .k39-install-intro p {
max-width: 720px;
margin: 0;
color: var(--v43-muted);
font-size: .8rem;
line-height: 1.7;
text-wrap: pretty;
}
.kara-v43.k39-invite .k39-install-trust {
min-width: 220px;
padding: 11px 13px;
display: grid;
gap: 4px;
border-left: 1px solid var(--v43-line-strong);
}
.kara-v43.k39-invite .k39-install-trust span { display: flex; align-items: center; gap: 8px; color: var(--v43-ink-soft); font-size: .68rem; font-weight: 700; }
.kara-v43.k39-invite .k39-install-trust span i { width: 7px; height: 7px; border-radius: 50%; background: var(--v43-positive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v43-positive) 10%, transparent); }
.kara-v43.k39-invite .k39-install-trust small { padding-left: 15px; color: var(--v43-dim); font-size: .61rem; }
.kara-v43.k39-invite .k39-install-wizard {
overflow: hidden;
border: 1px solid var(--v43-line-strong);
border-radius: 20px;
background: var(--v43-surface);
box-shadow: 0 24px 70px rgba(2, 6, 12, .24);
}
.kara-v43.k39-invite .k39-install-error { margin: 14px 14px 0; }
.kara-v43.k39-invite .k39-install-stepper {
min-height: 78px;
padding: 13px 20px 10px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
background: color-mix(in srgb, var(--v43-page) 42%, var(--v43-surface));
}
.kara-v43.k39-invite .k39-install-stepper button {
position: relative;
min-width: 0;
min-height: 50px;
padding: 6px 8px;
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
gap: 8px;
border: 0;
border-radius: 10px;
color: var(--v43-dim);
background: transparent;
text-align: left;
cursor: pointer;
transition: color 180ms cubic-bezier(.2, .72, .24, 1), background 180ms cubic-bezier(.2, .72, .24, 1);
}
.kara-v43.k39-invite .k39-install-stepper button:not(:disabled):hover { color: var(--v43-ink); background: var(--v43-surface-2); }
.kara-v43.k39-invite .k39-install-stepper button:disabled { cursor: default; }
.kara-v43.k39-invite .k39-install-stepper button > span {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1px solid var(--v43-line);
border-radius: 9px;
color: var(--v43-muted);
background: var(--v43-surface-2);
font-size: .58rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.kara-v43.k39-invite .k39-install-stepper button b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; font-weight: 680; }
.kara-v43.k39-invite .k39-install-stepper button.is-active { color: var(--v43-ink); background: var(--v43-surface-2); }
.kara-v43.k39-invite .k39-install-stepper button.is-active > span { color: var(--v43-accent-on); border-color: var(--v43-accent); background: var(--v43-accent); }
.kara-v43.k39-invite .k39-install-stepper button.is-complete { color: var(--v43-ink-soft); }
.kara-v43.k39-invite .k39-install-stepper button.is-complete > span { color: var(--v43-positive); border-color: color-mix(in srgb, var(--v43-positive) 28%, var(--v43-line)); background: color-mix(in srgb, var(--v43-positive) 9%, var(--v43-surface-2)); }
.kara-v43.k39-invite .k39-install-progress { height: 2px; overflow: hidden; background: var(--v43-line); }
.kara-v43.k39-invite .k39-install-progress i { width: 0; height: 100%; display: block; background: var(--v43-accent); transition: width 260ms cubic-bezier(.2, .72, .24, 1); }
.kara-v43.k39-invite .k39-install-stage { min-height: 474px; padding: clamp(22px, 3vw, 34px); }
.kara-v43.k39-invite .k39-install-panel.is-entering { animation: k39WizardIn 220ms cubic-bezier(.2, .72, .24, 1) both; }
@keyframes k39WizardIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.kara-v43.k39-invite .k39-install-panel-head {
margin-bottom: 22px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: start;
gap: 13px;
}
.kara-v43.k39-invite .k39-install-step-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid var(--v43-line);
border-radius: 12px;
color: var(--v43-accent);
background: var(--v43-surface-2);
}
.kara-v43.k39-invite .k39-install-step-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kara-v43.k39-invite .k39-install-panel-head div:nth-child(2) > span { display: block; margin-bottom: 4px; color: var(--v43-accent); font-size: .55rem; font-weight: 820; letter-spacing: .13em; }
.kara-v43.k39-invite .k39-install-panel-head h2 { margin: 0 0 5px; color: var(--v43-ink); font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.025em; }
.kara-v43.k39-invite .k39-install-panel-head p { max-width: 760px; margin: 0; color: var(--v43-muted); font-size: .72rem; line-height: 1.6; text-wrap: pretty; }
.kara-v43.k39-invite .k39-install-panel-head > em {
padding: 5px 8px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--v43-line);
border-radius: 7px;
color: var(--v43-muted);
background: var(--v43-surface-2);
font-size: .52rem;
font-style: normal;
font-weight: 700;
white-space: nowrap;
}
.kara-v43.k39-invite .k39-install-panel-head > em i { width: 6px; height: 6px; border-radius: 50%; background: var(--v43-positive); }
.kara-v43.k39-invite .k39-server-picker-toolbar { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kara-v43.k39-invite .k39-server-picker-toolbar label {
width: min(360px, 100%);
min-height: 40px;
padding: 0 11px;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: 8px;
border: 1px solid var(--v43-line);
border-radius: 10px;
background: var(--v43-surface-2);
}
.kara-v43.k39-invite .k39-server-picker-toolbar svg { width: 17px; height: 17px; fill: none; stroke: var(--v43-muted); stroke-width: 1.8; }
.kara-v43.k39-invite .k39-server-picker-toolbar input { min-width: 0; min-height: 38px; padding: 0; border: 0; border-radius: 0; color: var(--v43-ink); background: transparent; box-shadow: none; font-size: .7rem; outline: 0; }
.kara-v43.k39-invite .k39-server-picker-toolbar > span { color: var(--v43-dim); font-size: .61rem; white-space: nowrap; }
.kara-v43.k39-invite .k39-install-server-list {
max-height: 306px;
padding-right: 5px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
gap: 8px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.kara-v43.k39-invite .k39-wizard-choice {
position: relative;
min-width: 0;
border: 1px solid var(--v43-line);
border-radius: 13px;
color: var(--v43-muted);
background: var(--v43-surface-2);
cursor: pointer;
transition: border-color 180ms cubic-bezier(.2, .72, .24, 1), background 180ms cubic-bezier(.2, .72, .24, 1), transform 120ms ease;
}
.kara-v43.k39-invite .k39-wizard-choice:hover { border-color: var(--v43-line-strong); background: var(--v43-surface-3); }
.kara-v43.k39-invite .k39-wizard-choice:active { transform: scale(.992); }
.kara-v43.k39-invite .k39-wizard-choice:has(input:checked) { border-color: color-mix(in srgb, var(--v43-accent) 58%, var(--v43-line)); background: color-mix(in srgb, var(--v43-accent) 7%, var(--v43-surface-2)); box-shadow: inset 2px 0 0 var(--v43-accent); }
.kara-v43.k39-invite .k39-wizard-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kara-v43.k39-invite .k39-wizard-choice:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--v43-accent) 72%, white); outline-offset: 2px; }
.kara-v43.k39-invite .k39-server-choice {
min-height: 72px;
padding: 10px;
display: grid;
grid-template-columns: 46px minmax(0, 1fr) 22px;
align-items: center;
gap: 11px;
}
.kara-v43.k39-invite .k39-server-choice-icon { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; color: var(--v43-accent); background: var(--v43-surface-3); }
.kara-v43.k39-invite .k39-server-choice-icon img { width: 100%; height: 100%; object-fit: cover; }
.kara-v43.k39-invite .k39-server-choice-copy { min-width: 0; }
.kara-v43.k39-invite .k39-server-choice-copy b,
.kara-v43.k39-invite .k39-server-choice-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43.k39-invite .k39-server-choice-copy b { color: var(--v43-ink); font-size: .73rem; }
.kara-v43.k39-invite .k39-server-choice-copy small { margin-top: 4px; color: var(--v43-dim); font-size: .58rem; }
.kara-v43.k39-invite .k39-server-choice-copy small span { margin-right: 4px; color: var(--v43-positive); }
.kara-v43.k39-invite .k39-choice-radio { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid var(--v43-line-strong); border-radius: 50%; background: var(--v43-surface); }
.kara-v43.k39-invite .k39-choice-radio i { width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.kara-v43.k39-invite .k39-wizard-choice:has(input:checked) .k39-choice-radio { border-color: var(--v43-accent); }
.kara-v43.k39-invite .k39-wizard-choice:has(input:checked) .k39-choice-radio i { background: var(--v43-accent); }
.kara-v43.k39-invite .k39-install-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kara-v43.k39-invite .k39-option-choice {
min-height: 112px;
padding: 15px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 22px;
align-items: center;
gap: 12px;
}
.kara-v43.k39-invite .k39-option-symbol { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; color: var(--v43-accent); background: var(--v43-surface-3); font-size: .66rem; font-weight: 820; }
.kara-v43.k39-invite .k39-option-symbol svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kara-v43.k39-invite .k39-option-choice > span:nth-child(3) { min-width: 0; }
.kara-v43.k39-invite .k39-option-choice b,
.kara-v43.k39-invite .k39-option-choice small { display: block; }
.kara-v43.k39-invite .k39-option-choice b { color: var(--v43-ink); font-size: .79rem; }
.kara-v43.k39-invite .k39-option-choice small { margin-top: 5px; color: var(--v43-muted); font-size: .63rem; line-height: 1.5; }
.kara-v43.k39-invite .k39-profile-choice { min-height: 176px; padding: 16px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: start; gap: 12px; }
.kara-v43.k39-invite .k39-profile-choice-copy { min-width: 0; }
.kara-v43.k39-invite .k39-profile-choice-copy b,
.kara-v43.k39-invite .k39-profile-choice-copy small { display: block; }
.kara-v43.k39-invite .k39-profile-choice-copy b { color: var(--v43-ink); font-size: .79rem; }
.kara-v43.k39-invite .k39-profile-choice-copy small { margin-top: 5px; font-size: .63rem; line-height: 1.5; }
.kara-v43.k39-invite .k39-profile-choice-copy > span { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 5px; }
.kara-v43.k39-invite .k39-profile-choice-copy i { padding: 4px 6px; border: 1px solid var(--v43-line); border-radius: 6px; color: var(--v43-muted); background: var(--v43-surface); font-size: .54rem; font-style: normal; white-space: nowrap; }
.kara-v43.k39-invite .k39-permission-choice { min-height: 142px; }
.kara-v43.k39-invite .k39-permission-choice em { width: fit-content; margin-top: 9px; padding: 4px 6px; display: block; border-radius: 5px; color: var(--v43-muted); background: var(--v43-surface-3); font-size: .51rem; font-style: normal; font-weight: 750; letter-spacing: .08em; }
.kara-v43.k39-invite .k39-permission-choice.is-recommended em { color: var(--v43-accent); }
.kara-v43.k39-invite .k39-install-note { margin-top: 12px; padding: 11px 12px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid var(--v43-line); border-radius: 10px; background: color-mix(in srgb, var(--v43-positive) 3%, var(--v43-surface-2)); }
.kara-v43.k39-invite .k39-install-note > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--v43-positive); background: color-mix(in srgb, var(--v43-positive) 10%, transparent); font-size: .65rem; font-weight: 800; }
.kara-v43.k39-invite .k39-install-note b,
.kara-v43.k39-invite .k39-install-note small { display: block; }
.kara-v43.k39-invite .k39-install-note b { color: var(--v43-ink-soft); font-size: .65rem; }
.kara-v43.k39-invite .k39-install-note small { margin-top: 2px; color: var(--v43-dim); font-size: .58rem; }
.kara-v43.k39-invite .k39-review-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 12px; }
.kara-v43.k39-invite .k39-review-selection,
.kara-v43.k39-invite .k39-discord-handoff { padding: 18px; border: 1px solid var(--v43-line); border-radius: 14px; background: var(--v43-surface-2); }
.kara-v43.k39-invite .k39-review-selection h3,
.kara-v43.k39-invite .k39-discord-handoff h3 { margin: 0; color: var(--v43-ink); font-size: .88rem; }
.kara-v43.k39-invite .k39-review-selection dl { margin: 14px 0 0; }
.kara-v43.k39-invite .k39-review-selection dl > div { min-height: 48px; display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 14px; border-bottom: 1px solid var(--v43-line); }
.kara-v43.k39-invite .k39-review-selection dl > div:last-child { border-bottom: 0; }
.kara-v43.k39-invite .k39-review-selection dt { color: var(--v43-dim); font-size: .61rem; }
.kara-v43.k39-invite .k39-review-selection dd { margin: 0; overflow: hidden; color: var(--v43-ink-soft); font-size: .68rem; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.kara-v43.k39-invite .k39-discord-handoff { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; gap: 12px; }
.kara-v43.k39-invite .k39-discord-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #b8c4ff; background: #5865f226; }
.kara-v43.k39-invite .k39-discord-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.kara-v43.k39-invite .k39-discord-handoff small { display: block; margin-bottom: 4px; color: #aeb9f5; font-size: .53rem; font-weight: 800; letter-spacing: .12em; }
.kara-v43.k39-invite .k39-discord-handoff p { margin: 6px 0 0; color: var(--v43-muted); font-size: .62rem; line-height: 1.55; }
.kara-v43.k39-invite .k39-discord-handoff ul { grid-column: 1 / -1; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.kara-v43.k39-invite .k39-discord-handoff li { min-height: 34px; display: flex; align-items: center; gap: 9px; color: var(--v43-muted); font-size: .62rem; }
.kara-v43.k39-invite .k39-discord-handoff li span { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border: 1px solid var(--v43-line); border-radius: 7px; color: var(--v43-ink-soft); background: var(--v43-surface-3); font-size: .54rem; }
.kara-v43.k39-invite .k39-install-empty { min-height: 260px; padding: 28px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed var(--v43-line-strong); border-radius: 14px; background: var(--v43-surface-2); text-align: center; }
.kara-v43.k39-invite .k39-install-empty > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--v43-accent); background: var(--v43-surface-3); }
.kara-v43.k39-invite .k39-install-empty svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.kara-v43.k39-invite .k39-install-empty b { color: var(--v43-ink); font-size: .82rem; }
.kara-v43.k39-invite .k39-install-empty p,
.kara-v43.k39-invite .k39-install-empty > span:not(:first-child) { max-width: 520px; margin: 0; color: var(--v43-muted); font-size: .65rem; }
.kara-v43.k39-invite .k39-install-empty.is-compact { min-height: 120px; }
.kara-v43.k39-invite .k39-install-validation { margin: 0 22px 12px; padding: 9px 11px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid color-mix(in srgb, var(--v43-danger) 32%, var(--v43-line)); border-radius: 10px; background: color-mix(in srgb, var(--v43-danger) 7%, var(--v43-surface-2)); }
.kara-v43.k39-invite .k39-install-validation > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--v43-danger); background: color-mix(in srgb, var(--v43-danger) 10%, transparent); font-weight: 800; }
.kara-v43.k39-invite .k39-install-validation b,
.kara-v43.k39-invite .k39-install-validation small { display: block; }
.kara-v43.k39-invite .k39-install-validation b { color: var(--v43-ink); font-size: .64rem; }
.kara-v43.k39-invite .k39-install-validation small { margin-top: 2px; color: var(--v43-muted); font-size: .58rem; }
.kara-v43.k39-invite .k39-install-validation[hidden] { display: none; }
.kara-v43.k39-invite .k39-install-actions {
min-height: 72px;
padding: 11px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-top: 1px solid var(--v43-line);
background: color-mix(in srgb, var(--v43-page) 35%, var(--v43-surface));
}
.kara-v43.k39-invite .k39-install-actions > div { display: flex; align-items: center; gap: 8px; }
.kara-v43.k39-invite .k39-install-actions .k39-btn { min-width: 112px; justify-content: center; }
.kara-v43.k39-invite .k39-install-actions .k39-btn.primary { min-width: 142px; }
.kara-v43.k39-invite .k39-install-cancel { color: var(--v43-muted); font-size: .66rem; }
.kara-v43.k39-invite .k39-install-cancel:hover { color: var(--v43-ink); }
@media (max-width: 940px) {
.kara-v43.k39-invite .k39-invite-shell { width: min(calc(100% - 28px), 760px); padding-top: calc(var(--v43-public-header-h, 88px) + 18px); }
.kara-v43.k39-invite .k39-install-intro { align-items: flex-start; }
.kara-v43.k39-invite .k39-install-trust { min-width: 200px; }
.kara-v43.k39-invite .k39-install-stepper { padding-inline: 12px; }
.kara-v43.k39-invite .k39-install-stepper button { grid-template-columns: 30px; justify-content: center; }
.kara-v43.k39-invite .k39-install-stepper button b { display: none; }
.kara-v43.k39-invite .k39-install-choice-grid,
.kara-v43.k39-invite .k39-review-grid { grid-template-columns: 1fr; }
.kara-v43.k39-invite .k39-profile-choice { min-height: 150px; }
}
@media (max-width: 640px) {
.kara-v43.k39-invite .k39-invite-shell { width: calc(100% - 20px); padding: calc(var(--v43-public-header-h, 88px) + 12px) 0 104px; }
.kara-v43.k39-invite .k39-install-intro { margin-bottom: 13px; display: block; }
.kara-v43.k39-invite .k39-install-intro h1 { font-size: 1.72rem; }
.kara-v43.k39-invite .k39-install-intro p { font-size: .72rem; }
.kara-v43.k39-invite .k39-install-trust { margin-top: 12px; padding: 8px 10px; border: 1px solid var(--v43-line); border-radius: 9px; }
.kara-v43.k39-invite .k39-install-wizard { border-radius: 15px; }
.kara-v43.k39-invite .k39-install-stepper { min-height: 62px; padding: 8px; gap: 2px; }
.kara-v43.k39-invite .k39-install-stepper button { min-height: 44px; padding: 4px; }
.kara-v43.k39-invite .k39-install-stepper button > span { width: 28px; height: 28px; }
.kara-v43.k39-invite .k39-install-stage { min-height: 0; padding: 17px 14px 20px; }
.kara-v43.k39-invite .k39-install-panel-head { margin-bottom: 16px; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.kara-v43.k39-invite .k39-install-step-icon { width: 40px; height: 40px; }
.kara-v43.k39-invite .k39-install-panel-head > em { grid-column: 2; width: fit-content; }
.kara-v43.k39-invite .k39-server-picker-toolbar { align-items: stretch; flex-direction: column; gap: 7px; }
.kara-v43.k39-invite .k39-server-picker-toolbar label { width: 100%; }
.kara-v43.k39-invite .k39-install-server-list { max-height: 330px; grid-template-columns: 1fr; }
.kara-v43.k39-invite .k39-option-choice { min-height: 104px; padding: 12px; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 10px; }
.kara-v43.k39-invite .k39-option-symbol { width: 40px; height: 40px; }
.kara-v43.k39-invite .k39-profile-choice { min-height: 160px; }
.kara-v43.k39-invite .k39-profile-choice-copy > span { margin-top: 10px; }
.kara-v43.k39-invite .k39-review-selection,
.kara-v43.k39-invite .k39-discord-handoff { padding: 14px; }
.kara-v43.k39-invite .k39-install-actions {
position: fixed;
z-index: 80;
right: 10px;
bottom: max(10px, env(safe-area-inset-bottom));
left: 10px;
min-height: 62px;
padding: 9px;
border: 1px solid var(--v43-line-strong);
border-radius: 14px;
background: color-mix(in srgb, var(--v43-surface) 94%, transparent);
box-shadow: 0 18px 44px #0008;
backdrop-filter: blur(14px);
}
.kara-v43.k39-invite .k39-install-actions > div { width: 100%; }
.kara-v43.k39-invite .k39-install-actions .k39-btn { min-width: 0; flex: 1; }
.kara-v43.k39-invite .k39-install-actions [data-invite-back]:not([hidden]) { flex: 0 0 84px; }
.kara-v43.k39-invite .k39-install-actions [data-invite-submit]:not([hidden]) { font-size: .74rem; }
.kara-v43.k39-invite .k39-install-cancel { display: none; }
.kara-v43.k39-invite .k39-install-validation { margin-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.kara-v43.k39-invite .k39-install-panel.is-entering { animation: none; }
.kara-v43.k39-invite .k39-install-progress i { transition: none; }
}
/* Ticket AI card's "Kullanıcı / KARA / Yetkili" row read as three unrelated
labels side by side — no visual sense that a request flows through them.
Markup now adds an connector between each step; style it as a short
arrow and give the middle "KARA" step an accent chip so the eye reads it
as a flow (user → KARA → yetkili), not a flat list. */
body.kara-page .kara36-ticket-flow {
gap: 8px;
}
body.kara-page .kara36-ticket-flow > span {
padding: 5px 10px;
border-radius: 999px;
color: var(--kara-ink-2, var(--muted));
background: color-mix(in srgb, var(--kara-line, var(--line)) 55%, transparent);
font-size: .72rem;
font-weight: 650;
white-space: nowrap;
}
body.kara-page .kara36-ticket-flow > span.is-kara {
color: var(--kara-accent-on, #061116);
background: var(--kara-accent, var(--accent));
font-weight: 780;
}
body.kara-page .kara36-ticket-flow > i {
flex: none;
width: 16px;
height: 1px;
background: var(--kara-line-strong, var(--line-strong));
position: relative;
}
body.kara-page .kara36-ticket-flow > i::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 6px;
height: 6px;
border-right: 1px solid var(--kara-line-strong, var(--line-strong));
border-top: 1px solid var(--kara-line-strong, var(--line-strong));
transform: translateY(-50%) rotate(45deg);
}
/* Plan card header (eyebrow + title + description) had no explicit rhythm:
the h3 inherited a ~26px UA-ish size right under a 11px eyebrow with no
gap, then the paragraph ran into it — read as one crowded block with no
clear reading order. Give each line its own fixed size/spacing so the
eye goes eyebrow → title → description in three distinct steps. */
body.kara-page .kara36-plan-card header {
display: flex;
flex-direction: column;
gap: 6px;
}
body.kara-page .kara36-plan-card header > span {
display: block;
color: var(--kara-accent, var(--accent));
font-size: .68rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body.kara-page .kara36-plan-card header h3 {
margin: 0;
font-size: 1.3rem;
line-height: 1.25;
}
body.kara-page .kara36-plan-card header p {
margin: 2px 0 0;
color: var(--kara-ink-2, var(--muted));
font-size: .82rem;
line-height: 1.5;
}
/* .kara36-hybrid-visual carried a fixed min-height:480px sized for a much
busier layout than the two stat cards it actually holds — it rendered
as a near-empty dark panel with the cards pinned near the top and the
health pill floating in a sea of blank space below ("boş kutu" /
gereksiz boşluk complaint). The two cards + connector now live in their
own row (.kara36-hybrid-row, markup updated in home.ejs) so the box's
height comes from real content, and the health pill sits in normal
flow under that row instead of being absolutely pinned to a tall
parent. */
body.kara-page .kara36-hybrid-visual {
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
padding: 30px;
}
body.kara-page .kara36-hybrid-row {
position: relative;
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: 70px;
}
body.kara-page .kara36-hybrid-fallback {
position: static;
transform: none;
}
@media (max-width: 720px) {
body.kara-page .kara36-hybrid-row { grid-template-columns: 1fr; gap: 50px; }
body.kara-page .kara36-hybrid-route { top: 50%; width: 60px; transform: translate(-50%, -50%) rotate(90deg); }
}
/* Hybrid box still read as "two flat boxes floating in a dark void" once
the min-height fix landed — no texture, no sense that it's a live
status readout. Add a masked grid-pattern + accent glow behind the
cards, and turn the previously unused trailing in each node into a
live-status pulse dot, so the panel reads as an actual dashboard
fragment instead of empty nested boxes. */
body.kara-page .kara36-hybrid-visual {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 28% 15%, color-mix(in srgb, var(--kara-accent) 12%, transparent), transparent 60%),
var(--kara-surface);
}
body.kara-page .kara36-hybrid-visual::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(color-mix(in srgb, var(--kara-line) 70%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--kara-line) 70%, transparent) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: radial-gradient(circle at 50% 40%, black, transparent 78%);
-webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 78%);
opacity: .6;
pointer-events: none;
}
body.kara-page .kara36-hybrid-node {
position: relative;
z-index: 1;
background: var(--kara-surface-2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 32px -22px color-mix(in srgb, var(--kara-accent) 40%, transparent);
}
body.kara-page .kara36-hybrid-node i {
position: absolute;
top: 14px;
right: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent);
}
body.kara-page .kara36-hybrid-fallback {
position: relative;
left: auto;
bottom: auto;
z-index: 1;
border: 1px solid var(--kara-line-strong);
background: var(--kara-surface-2);
}
/* Capability strip (01 Doğal Dille Yönetim / 02 KARA Guard / ...) sat in a
flat grey card behind the pills — read as a boxed bar rather than a
loose row of tags. Dropping just the outer background left it *too*
flush (no visual identity at all). Give each module its own small pill
instead: circular accent-numbered badge, its own border/background,
hover lift — so the row reads as five distinct tags floating on the
page, not a plain background swap. */
body.kara-page .kara36-proof-strip {
min-height: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
background: none;
border: none;
box-shadow: none;
}
body.kara-page .kara36-proof-strip > div {
min-width: 0;
flex: 0 1 auto;
padding: 10px 16px 10px 10px;
border: 1px solid var(--kara-line);
border-right: 1px solid var(--kara-line);
border-radius: 999px;
background: var(--kara-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1), border-color .3s ease, box-shadow .3s ease;
}
body.kara-page .kara36-proof-strip > div:hover {
transform: translateY(-2px);
border-color: var(--kara-line-strong);
box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--kara-accent) 50%, transparent);
}
body.kara-page .kara36-proof-strip > div::before {
display: none;
}
body.kara-page .kara36-proof-strip span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
border-radius: 50%;
background: color-mix(in srgb, var(--kara-accent) 16%, transparent);
color: var(--kara-accent);
font-size: .6rem;
font-weight: 800;
}
/* KARA Guard's "SAFE" readout was plain italic text sharing the flex row
with a two-line label — it centered technically but read as a stray
word, not a status indicator. Give it an actual badge treatment. */
body.kara-page .kara36-mini-metric {
align-items: center;
}
body.kara-page .kara36-mini-metric em {
align-self: center;
padding: 4px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--green) 16%, transparent);
color: var(--green);
font-style: normal;
font-weight: 800;
font-size: .68rem;
letter-spacing: .05em;
}
/* KARA Intelligence's 4-step intent map (İstek → Canlı analiz → Güvenli
plan → Doğrulama) used a 3-column grid built for 2 items and hid its
connector dashes entirely on the v43 layer — it rendered as a plain
unordered 2x2 box grid with no sense of sequence. Switch to a flex row
that fits all 4 steps + 3 connectors, number each step, and draw the
connectors as small arrows so it reads as a flow, matching the ticket
AI card's arrow treatment elsewhere on the page. */
/* This card lives in the "wide" bento layout, where the intent-map only
ever gets a ~250px-wide column (verified live: mapWidth 250px even at
1280px viewport) — nowhere near enough for the previous flex-wrap
attempt to lay 4 items + 3 arrow connectors out horizontally. Every
item wrapped to its own row anyway, and the now-orphaned arrow
connectors rendered as stray ">" marks floating next to each card
instead of sitting between them. Design for the vertical stack this
column actually gets: a plain divided list, no per-item card borders,
no horizontal connectors. */
body.kara-page .kara36-intent-map {
display: flex;
flex-direction: column;
counter-reset: intent-step;
}
body.kara-page .kara36-intent-map span {
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 2px;
border: none;
border-bottom: 1px solid var(--kara-line);
border-radius: 0;
background: none;
counter-increment: intent-step;
text-align: left;
}
body.kara-page .kara36-intent-map span:last-of-type {
border-bottom: none;
}
body.kara-page .kara36-intent-map span::before {
content: "0" counter(intent-step);
flex: none;
color: var(--kara-accent);
font-family: var(--kara-font-mono, ui-monospace, monospace);
font-size: .62rem;
font-weight: 800;
opacity: .7;
}
body.kara-page .kara36-intent-map span img {
flex: none;
width: 22px;
height: 22px;
}
body.kara-page .kara36-intent-map i {
display: none;
}
/* Non-centered section headers (capabilities, personas, reviews) used
align-items:end on a 2-column grid — a 3-line h2 and a 2-line p ended
up bottom-aligned, so the paragraph floated at the vertical middle of
the heading instead of reading as a normal top-aligned intro line.
Top-align both columns instead, which is how every "centered" header
on the page already reads. */
body.kara-page .kara36-section-head:not(.centered) {
align-items: start;
grid-template-columns: minmax(0, 1.8fr) minmax(200px, .8fr);
column-gap: clamp(24px, 4vw, 60px);
}
body.kara-page .kara36-section-head:not(.centered) > p {
margin-top: 12px;
}
body.kara-page .kara36-section-head:not(.centered) h2 {
font-size: clamp(1.8rem, 2.6vw, 2.7rem);
}
/* Pricing cards redesigned to match a clean reference: small corner tag
instead of a centered ribbon straddling the border (avoids the
clipping/overflow tug-of-war entirely), subdued border/shadow instead
of a heavy accent glow, and a consistent vertical rhythm between
header → divider → price → button → list. */
body.kara-page .kara36-plan-card {
gap: 0;
border-color: var(--kara-line);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
body.kara-page .kara36-plan-card.featured {
transform: translateY(-10px);
border-color: color-mix(in srgb, var(--kara-accent) 55%, var(--kara-line));
background:
linear-gradient(165deg, color-mix(in srgb, var(--kara-accent) 7%, transparent), transparent 55%),
var(--kara-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 30px 60px -26px color-mix(in srgb, var(--kara-accent) 55%, transparent);
}
body.kara-page .kara36-plan-card.featured:hover {
transform: translateY(-13px);
}
/* /plans (.k39-plan-card) never had a rule for its "recommended" state
at all — the badge was the only signal, the card itself looked
identical to Free/Enterprise next to it. Give it the same lift +
accent treatment as the home page's featured card. */
body.k39-page .k39-plan-card.recommended {
transform: translateY(-10px);
border-color: color-mix(in srgb, var(--kara-accent) 55%, var(--kara-line));
background:
linear-gradient(165deg, color-mix(in srgb, var(--kara-accent) 7%, transparent), transparent 55%),
var(--kara-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 30px 60px -26px color-mix(in srgb, var(--kara-accent) 55%, transparent);
}
body.k39-page .k39-plan-card.recommended:hover {
transform: translateY(-13px);
}
/* Önceki hâlde rozet position:absolute (v42 taban kural) ile kartın sağ üst
köşesine oturuyordu ve header'ın metin alanıyla AYNI dikdörtgende
yaşıyordu — dar viewport'larda veya rozet metni uzadığında eyebrow/başlık
üstüne biniyordu ("başlıklar üst üste duruyor" şikayetinin somut nedeni
buydu, yalnızca padding-right ile telafi edilmeye çalışılmıştı). Rozeti
normal akışa alıp header'ın ÜSTÜNE, kendi satırına koymak çakışmayı
herhangi bir genişlikte imkansız hale getiriyor. */
body.kara-page .kara36-plan-ribbon {
position: static;
display: inline-flex;
margin: 0 0 14px;
padding: 5px 12px;
border: 1px solid color-mix(in srgb, var(--kara-accent) 45%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--kara-accent) 14%, transparent);
color: var(--kara-accent);
box-shadow: none;
font-size: .58rem;
}
body.kara-page .kara36-plan-card header {
margin-bottom: 20px;
}
body.kara-page .kara36-price {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
body.kara-page .kara36-price span {
color: var(--kara-ink-2, var(--muted));
font-size: .78rem;
font-weight: 500;
}
body.kara-page .kara36-plan-card ul {
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 4px;
}
body.kara-page .kara36-plan-card li {
margin: 0;
padding: 8px 0;
}
body.kara-page .kara36-plan-card > a.kara36-button {
margin-top: 20px;
margin-bottom: 20px;
}
/* Site Assistant chat textarea: a same-specificity, later-declared
generic ".kara-v43 textarea" rule (written for dashboard/settings
forms) was winning the cascade tie-break by source order and forcing
min-height:118px + resize:vertical onto the compact chat composer —
the textarea ballooned far past what a one-line chat input needs.
Re-assert the compact sizing with an extra ancestor class so it wins
on specificity, not source order, and give it a bit more polish
(rounder corners, visible focus state) while at it. */
.kara-assistant-window .kara-assistant-form textarea {
min-height: 40px;
max-height: 84px;
resize: none;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--panel-2);
font-size: .76rem;
line-height: 1.4;
transition: border-color .2s ease, background .2s ease;
}
.kara-assistant-window .kara-assistant-form textarea:focus {
outline: none;
border-color: var(--accent);
background: var(--panel);
}
.kara-assistant-window .kara-assistant-form button {
transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .2s ease;
}
.kara-assistant-window .kara-assistant-form button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
/* Top header, round 2 — the first pass (background tint + active-nav
ring) was correct but too subtle to read as an intentional redesign
at a glance. Go further: stronger glass blur + a specular top edge
(the classic "glass panel" highlight), more breathing room, a clearer
nav pill track, and matching polish on the toggle/account controls so
the whole bar reads as one considered unit instead of default browser
chrome with a border. */
/* This whole block originally only targeted body.kara-page — the public
marketing pages built later (Features/Solutions/Plans/Support) use
body.k39-page instead, a separate class family from the same "premium
depth pass" era. Header polish landed only on kara-page pages (Home,
Community, About), leaving the header visibly plainer everywhere else
even though it's the exact same partial. Target both. */
body.kara-page .kara-header,
body.k39-page .kara-header {
min-height: 68px;
padding-block: 10px;
background: color-mix(in srgb, var(--kara-surface) 82%, transparent);
border: 1px solid var(--kara-line-strong);
border-radius: 20px;
box-shadow:
0 24px 60px rgba(0, 0, 0, .4),
inset 0 1px 0 rgba(255, 255, 255, .07),
inset 0 0 0 1px rgba(255, 255, 255, .02);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
}
body.kara-page .kara-wordmark-context,
body.k39-page .kara-wordmark-context {
color: var(--kara-ink-2, var(--muted));
}
body.kara-page .kara-nav,
body.k39-page .kara-nav {
padding: 5px;
border-color: var(--kara-line);
background: color-mix(in srgb, var(--kara-surface-2) 70%, transparent);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}
body.kara-page .kara-nav a,
body.k39-page .kara-nav a {
transition: background .2s ease, color .2s ease;
}
body.kara-page .kara-nav a.is-active,
body.k39-page .kara-nav a.is-active {
background: color-mix(in srgb, var(--kara-accent) 16%, var(--kara-surface-2));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kara-accent) 35%, transparent);
color: var(--text);
}
body.kara-page .kara-nav a.is-active::after,
body.k39-page .kara-nav a.is-active::after {
display: none;
}
body.kara-page .kara-theme-toggle,
body.kara-page .kara-language,
body.k39-page .kara-theme-toggle,
body.k39-page .kara-language {
border-color: var(--kara-line);
background: color-mix(in srgb, var(--kara-surface-2) 70%, transparent);
}
body.kara-page .kara-theme-toggle:hover,
body.k39-page .kara-theme-toggle:hover {
border-color: var(--kara-line-strong);
background: var(--kara-surface-2);
}
body.kara-page .kara-account-chip,
body.k39-page .kara-account-chip {
background: color-mix(in srgb, var(--kara-surface-2) 80%, transparent);
border-color: var(--kara-line);
transition: border-color .2s ease, background .2s ease;
}
body.kara-page .kara-account-chip:hover,
body.k39-page .kara-account-chip:hover {
border-color: var(--kara-line-strong);
background: var(--kara-surface-2);
}
body.kara-page .kara-account-chip-copy small,
body.k39-page .kara-account-chip-copy small {
display: inline-block;
padding: 1px 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--kara-accent) 16%, transparent);
color: var(--kara-accent);
font-weight: 700;
}
body.kara-page .kara-hub-button,
body.k39-page .kara-hub-button {
box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--kara-accent) 55%, transparent);
}
/* /plans cards (.k39-plan-card) are a separate template from the home
page's .kara36-plan-card and never got the same two fixes: the price
row's / pair had no gap at all, so "ÖZEL" and "satış
açıldığında" ran together as one word ("ÖZELsatış açıldığında"); the
"BAŞLANGIÇ"/"EN ÇOK TERCİH" badge had no background or border, just
bare text in the corner. */
body.k39-page .k39-plan-price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
body.k39-page .k39-plan-price small {
color: var(--kara-ink-2, var(--muted));
font-size: .78rem;
font-weight: 500;
}
/* /support's "system status" section reads real maintenance-mode flags
and the configured AI provider (res.locals.siteControl /
aiGlobalPublic — already computed globally per-request) instead of
hardcoded "operational" text. Small colored-dot indicator to match. */
body.k39-page .k39-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex: none;
}
body.k39-page .k39-status-dot.is-ok {
background: var(--green);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent);
}
body.k39-page .k39-status-dot.is-down {
background: #e2574c;
box-shadow: 0 0 0 4px color-mix(in srgb, #e2574c 18%, transparent);
}
body.k39-page .k39-status-dot.is-neutral {
background: var(--dim);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--dim) 14%, transparent);
}
body.k39-page .k39-status-tile .k39-card-index {
align-items: center;
}
/* Opening an FAQ item inside the 2-column .k39-issue-grid left its
neighbor sharing the same grid row — the row height is always set by
the tallest item in it (a CSS Grid rule, independent of align-items),
so the short closed neighbor got stretched into a tall, mostly-empty
card by the default align-items:stretch. A first attempt forced open
items to grid-column:1/-1, but that reflows every later card up a
row the instant you open one — clicking any item visibly shifts every
card below it, which reads as "broken", not "opened". Use
align-items:start instead: the row can still grow to fit the open
item, but the short neighbor now just sits at its own natural height
at the top of the row instead of being stretched — no reflow, no
empty stretched box. */
body.k39-page .k39-issue-grid {
align-items: start;
}
body.k39-page .k39-plan-badge {
padding: 5px 12px;
border: 1px solid color-mix(in srgb, var(--kara-accent) 45%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--kara-accent) 14%, transparent);
color: var(--kara-accent);
font-size: .58rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
/* KARA's custom-drawn emoji set (public/assets/emojis/*.png) was only
used inside Discord, never on the marketing site — swap a few generic
unicode/blank icons for the branded versions in spots that already
carry an icon slot, so the mascot's expressions show up where the
copy references KARA doing something (guarding, thinking, confirming). */
body.kara-page .kara36-floating-card.security > span {
display: grid;
place-items: center;
}
body.kara-page .kara36-floating-card.security img,
body.kara-page .kara36-mini-metric i img {
width: 22px;
height: 22px;
object-fit: contain;
}
body.kara-page .kara36-mini-metric i {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: none;
border-radius: 9px;
background: color-mix(in srgb, var(--kara-accent) 12%, transparent);
}
body.kara-page .kara36-review-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
body.kara-page .kara36-review-empty img {
width: 28px;
height: 28px;
object-fit: contain;
}
/* Site Asistanı promo section repeatedly read as filler — shrink it into
a compact single-line callout instead of a half-page block (the nested
quote card was removed in home.ejs; this just tightens the remaining
icon + copy pair). */
body.kara-page .kara36-assistant-showcase {
padding-block: 30px !important;
}
body.kara-page .kara36-assistant-showcase h2 {
font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
}
body.kara-page .kara36-assistant-showcase > div:last-child > p {
font-size: .88rem;
line-height: 1.6;
}
/* Footer's link grid used fixed narrow columns (110-150px) inside an
"auto"-sized second grid track, so it clustered tight next to the
brand block and left a dead gap filling the rest of the card's width
("çok gereksiz derecede büyük, boşluklar çok fazla" complaint). Let the
link columns stretch to fill the available width instead. */
@media (min-width: 941px) {
body.kara-page .kara-footer {
grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
gap: 48px;
}
body.kara-page .kara-footer-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
}
}
body.kara-page .kara-footer-brand {
max-width: none;
}
/* v43 legal centre: calm reading width, clear hierarchy and keyboard-safe links. */
.kara-legal-page { background: var(--v43-page, var(--bg)); }
.kara-legal-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:clamp(42px,7vw,96px) 0 24px; }
.kara-legal-hero { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:36px; align-items:end; padding:clamp(28px,5vw,68px); border:1px solid var(--v43-line); border-radius:28px; background:linear-gradient(135deg,color-mix(in srgb,var(--v43-accent) 12%,var(--v43-surface)),var(--v43-surface) 42%); }
.kara-legal-kicker { color:#d59a2e; font-size:.68rem; font-weight:800; letter-spacing:.18em; }
.kara-legal-hero h1,.kara-legal-document h1 { max-width:760px; margin:14px 0 12px; font-size:clamp(2.35rem,6vw,5.2rem); line-height:.98; letter-spacing:-.055em; text-wrap:balance; }
.kara-legal-hero p,.kara-legal-intro { max-width:64ch; color:var(--muted); line-height:1.75; font-size:1rem; }
.kara-legal-index { justify-self:end; width:136px; aspect-ratio:1; display:grid; place-content:center; text-align:center; border:1px solid rgba(213,154,46,.45); border-radius:50%; color:var(--muted); }
.kara-legal-index b { color:var(--text); font:700 2.4rem/1 ui-monospace,SFMono-Regular,monospace; }
.kara-legal-index span { margin-top:7px; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; }
.kara-legal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.kara-legal-card { display:grid; grid-template-columns:36px minmax(0,1fr) 20px; gap:16px; align-items:start; min-height:140px; padding:24px; color:inherit; border:1px solid var(--v43-line); border-radius:18px; background:color-mix(in srgb,var(--v43-surface) 88%,transparent); transition:transform .22s ease,border-color .22s ease,background .22s ease; }
.kara-legal-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--v43-accent) 65%,var(--v43-line)); background:var(--v43-surface-2); }
.kara-legal-card>span { color:#d59a2e; font:700 .75rem/1 ui-monospace,SFMono-Regular,monospace; }
.kara-legal-card h2 { margin:0 0 8px; font-size:1.05rem; }
.kara-legal-card p { margin:0; color:var(--muted); font-size:.83rem; line-height:1.6; }
.kara-legal-card>b { color:#d59a2e; font-size:1.1rem; }
.kara-legal-back { display:inline-flex; margin-bottom:20px; color:var(--muted); font-size:.82rem; }
.kara-legal-back:hover { color:var(--text); }
.kara-legal-document { max-width:940px; margin:0 auto; padding:clamp(28px,5vw,64px); border:1px solid var(--v43-line); border-radius:28px; background:color-mix(in srgb,var(--v43-surface) 92%,transparent); }
.kara-legal-document header { padding-bottom:34px; border-bottom:1px solid var(--v43-line,#263441); }
.kara-legal-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; color:var(--dim); font-size:.72rem; }
.kara-legal-sections { display:grid; gap:0; }
.kara-legal-sections section { display:grid; grid-template-columns:44px minmax(0,1fr); gap:18px; padding:28px 0; border-bottom:1px solid var(--v43-line); }
.kara-legal-section-number { color:#d59a2e; font:700 .72rem/1 ui-monospace,SFMono-Regular,monospace; padding-top:5px; }
.kara-legal-sections h2 { margin:0 0 8px; font-size:1.12rem; }
.kara-legal-sections p { max-width:68ch; margin:0; color:var(--muted); line-height:1.78; font-size:.92rem; }
.kara-legal-notice { margin-top:30px; padding:18px 20px; border-left:3px solid #d59a2e; background:rgba(213,154,46,.08); }
.kara-legal-notice strong { font-size:.82rem; }
.kara-legal-notice p { margin:6px 0 0; color:var(--muted); font-size:.78rem; line-height:1.6; }
.kara-legal-page a:focus-visible { outline:2px solid #e2ad4c; outline-offset:4px; }
body.kara-page.kara-v43 .kara-footer { grid-template-columns:minmax(240px,1fr) minmax(0,1.9fr); gap:clamp(28px,4vw,52px); }
body.kara-page.kara-v43 .kara-footer-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.8vw,44px); }
body.kara-page.kara-v43 .kara-footer-grid>div { min-width:0; }
body.kara-page.kara-v43 .kara-footer-grid > div { padding-top: 2px; }
body.kara-page.kara-v43 .kara-footer-grid > div:last-child { position: relative; }
body.kara-page.kara-v43 .kara-footer-grid > div:last-child::before {
content: '';
position: absolute;
left: -22px;
top: 2px;
bottom: 6px;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,.12), transparent);
pointer-events: none;
}
body.kara-page.kara-v43 .kara-footer-grid a { line-height:1.4; }
/* Shared public footer polish: one quiet surface, one warm accent, and a
compact status cue so every marketing/legal page ends with the same rhythm. */
body.kara-page.kara-v43 .kara-footer {
position: relative;
width: min(calc(100% - 48px), var(--v43-public-max, 1440px));
margin: clamp(56px, 8vw, 104px) auto 24px;
padding: 30px 28px 18px;
grid-template-columns: minmax(220px, .82fr) minmax(0, 1.8fr);
gap: clamp(28px, 4vw, 56px);
overflow: hidden;
border: 1px solid var(--v43-line);
border-radius: 24px;
background: linear-gradient(145deg, var(--v43-surface), var(--v43-surface-2));
box-shadow: var(--v43-shadow-1), inset 0 1px 0 color-mix(in srgb, var(--v43-ink) 4%, transparent);
}
body.kara-page.kara-v43 .kara-footer::before {
content: '';
position: absolute;
inset: 0 18% auto 0;
height: 1px;
background: linear-gradient(90deg, rgba(213,154,46,.8), rgba(213,154,46,.12), transparent);
}
body.kara-page.kara-v43 .kara-footer-brand { padding: 2px 0 0; }
body.kara-page.kara-v43 .kara-footer-brand-mark { display: inline-flex; align-items: center; }
body.kara-page.kara-v43 .kara-footer-brand img { width: 108px; height: auto; }
body.kara-page.kara-v43 .kara-footer-brand p { max-width: 31ch; margin: 14px 0 18px; color: var(--v43-muted); font-size: .76rem; line-height: 1.65; }
body.kara-page.kara-v43 .kara-footer-signal { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px 9px; color: var(--v43-muted); font-size: .63rem; }
body.kara-page.kara-v43 .kara-footer-signal i { width: 7px; height: 7px; border-radius: 50%; background: #55b596; box-shadow: 0 0 0 4px rgba(85,181,150,.12); }
body.kara-page.kara-v43 .kara-footer-signal em { color: #d59a2e; font-style: normal; }
body.kara-page.kara-v43 .kara-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 34px); align-content: start; padding-top: 3px; }
body.kara-page.kara-v43 .kara-footer-grid > div { gap: 7px; }
body.kara-page.kara-v43 .kara-footer-grid b { margin-bottom: 4px; color: var(--v43-ink); font-size: .69rem; letter-spacing: .04em; }
body.kara-page.kara-v43 .kara-footer-grid a { color: var(--v43-muted); font-size: .68rem; line-height: 1.35; transition: color .18s ease, transform .18s ease; }
body.kara-page.kara-v43 .kara-footer-grid a:hover { color: #f0c56b; transform: translateX(2px); }
body.kara-page.kara-v43 .kara-footer-legal { padding-left: clamp(14px, 2vw, 24px); border-left: 1px solid rgba(112,133,151,.2); }
body.kara-page.kara-v43 .kara-footer-bottom { margin-top: 26px; padding-top: 14px; color: var(--v43-dim); font-size: .61rem; }
@media (max-width: 760px) {
body.kara-page.kara-v43 .kara-footer { width: min(calc(100% - 24px), var(--v43-public-max, 1440px)); grid-template-columns: 1fr; gap: 24px; padding: 26px 20px 16px; border-radius: 20px; }
body.kara-page.kara-v43 .kara-footer-brand p { max-width: 44ch; }
body.kara-page.kara-v43 .kara-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
body.kara-page.kara-v43 .kara-footer-legal { padding-left: 0; border-left: 0; }
}
@media (max-width: 430px) {
body.kara-page.kara-v43 .kara-footer-grid { grid-template-columns: 1fr 1fr; }
body.kara-page.kara-v43 .kara-footer-bottom { align-items: flex-start; flex-direction: column; gap: 6px; }
}
/* The public v43 views use k39-page/kara-v43 (not kara-page). Keep the
contract on the version namespace so every public footer gets the same
four-column layout and the legal column never wraps onto a new row. */
body.kara-v43 .kara-footer {
width: min(calc(100% - 48px), var(--v43-public-max, 1440px));
margin: clamp(56px, 8vw, 104px) auto 24px;
padding: 30px 28px 18px;
grid-template-columns: minmax(220px, .82fr) minmax(0, 1.8fr);
gap: clamp(28px, 4vw, 56px);
overflow: hidden;
border: 1px solid var(--v43-line);
border-radius: 24px;
background: linear-gradient(145deg, var(--v43-surface), var(--v43-surface-2));
box-shadow: var(--v43-shadow-1), inset 0 1px 0 color-mix(in srgb, var(--v43-ink) 4%, transparent);
}
body.kara-v43 .kara-footer-brand { padding: 2px 0 0; }
body.kara-v43 .kara-footer-brand-mark { display: inline-flex; align-items: center; }
body.kara-v43 .kara-footer-brand img { width: 108px; height: auto; }
body.kara-v43 .kara-footer-brand p { max-width: 31ch; margin: 14px 0 18px; font-size: .76rem; line-height: 1.65; }
body.kara-v43 .kara-footer-signal { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px 9px; font-size: .63rem; }
body.kara-v43 .kara-footer-signal i { width: 7px; height: 7px; border-radius: 50%; background: #55b596; box-shadow: 0 0 0 4px rgba(85,181,150,.12); }
body.kara-v43 .kara-footer-signal em { color: #d59a2e; font-style: normal; }
body.kara-v43 .kara-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 34px); align-content: start; padding-top: 3px; }
body.kara-v43 .kara-footer-grid > div { min-width: 0; gap: 7px; }
body.kara-v43 .kara-footer-grid b { margin-bottom: 4px; font-size: .69rem; letter-spacing: .04em; }
body.kara-v43 .kara-footer-grid a { font-size: .68rem; line-height: 1.35; transition: color .18s ease, transform .18s ease; }
body.kara-v43 .kara-footer-grid a:hover { color: #f0c56b; transform: translateX(2px); }
body.kara-v43 .kara-footer-legal { padding-left: clamp(14px, 2vw, 24px); border-left: 1px solid rgba(112,133,151,.2); }
body.kara-v43 .kara-footer-bottom { margin-top: 26px; padding-top: 14px; font-size: .61rem; }
@media (max-width: 760px) {
body.kara-v43 .kara-footer { width: min(calc(100% - 24px), var(--v43-public-max, 1440px)); grid-template-columns: 1fr; gap: 24px; padding: 26px 20px 16px; border-radius: 20px; }
body.kara-v43 .kara-footer-brand p { max-width: 44ch; }
body.kara-v43 .kara-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
body.kara-v43 .kara-footer-legal { padding-left: 0; border-left: 0; }
}
@media (max-width: 430px) {
body.kara-v43 .kara-footer-grid { grid-template-columns: 1fr 1fr; }
body.kara-v43 .kara-footer-bottom { align-items: flex-start; flex-direction: column; gap: 6px; }
}
@media (max-width:700px) {
.kara-legal-shell { width:min(100% - 28px,1180px); padding-top:24px; }
.kara-legal-hero { grid-template-columns:1fr; padding:28px 22px; }
.kara-legal-index { justify-self:start; width:92px; }
.kara-legal-index b { font-size:1.8rem; }
.kara-legal-grid { grid-template-columns:1fr; }
.kara-legal-document { padding:26px 20px; border-radius:20px; }
.kara-legal-document h1 { font-size:clamp(2.25rem,12vw,3.7rem); }
.kara-legal-sections section { grid-template-columns:30px minmax(0,1fr); gap:10px; padding:22px 0; }
body.kara-page.kara-v43 .kara-footer { grid-template-columns:1fr; gap:28px; }
body.kara-page.kara-v43 .kara-footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
}
/* ==========================================================================
Founder Console — Abonelik ve Ödeme (billing-command-center) redesign.
Every selector below is either a class unique to this section
(billing-readiness-strip, billing-provider-fields, plan-field-*, …) or a
descendant selector rooted in one of those unique classes, so nothing
here touches the shared .founder-panel/.founder-form-grid/.billing-*
rules used by other admin sections. This block intentionally comes last
in the cascade so it always wins over the earlier v42/v43 layers for
these specific classes without needing !important. */
/* Zone rhythm: give SETUP WIZARD / PAYMENT PROVIDERS / PRODUCT CATALOG /
SUBSCRIPTIONS clearly different breathing room instead of a flat list of
same-weight cards. */
.billing-command-center .founder-section-head.billing-zone-head {
margin-top: 34px;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.billing-command-center .founder-section-head.billing-zone-head span {
color: var(--dim);
}
.billing-command-center .founder-section-head.billing-zone-head h2 {
font-size: 1.05rem;
}
.billing-command-center .billing-readiness-strip {
margin-top: 14px;
}
.billing-command-center .billing-provider-grid {
margin-top: 14px;
}
.billing-provider-column { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Setup wizard: read as a slim, glanceable status strip, not a big card
competing for attention with the provider cards below it. */
.billing-readiness-strip {
padding: 15px 18px 16px;
}
.billing-readiness-strip .founder-card-head {
margin-bottom: 10px;
}
.billing-readiness-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.billing-readiness-grid > div {
min-height: 0;
padding: 9px 10px;
display: flex;
align-items: center;
gap: 9px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel-2);
}
.billing-readiness-grid > div > i {
width: 20px;
height: 20px;
flex: none;
display: grid;
place-items: center;
border-radius: 7px;
background: var(--panel-3);
font-style: normal;
}
.billing-readiness-grid > div > i::before {
content: "–";
color: var(--dim);
font-size: .68rem;
font-weight: 800;
}
.billing-readiness-grid > div.ready {
border-color: rgba(78, 156, 134, .3);
background: rgba(78, 156, 134, .06);
}
.billing-readiness-grid > div.ready > i {
background: rgba(78, 156, 134, .18);
}
.billing-readiness-grid > div.ready > i::before {
content: "✓";
color: var(--green);
}
.billing-readiness-grid > div.missing > i::before {
content: "!";
color: var(--amber);
}
.billing-readiness-grid > div > span {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.billing-readiness-grid > div b {
font-size: .74rem;
}
.billing-readiness-grid > div small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .62rem;
color: var(--dim);
}
.billing-readiness-strip .vault-note {
margin-top: 10px;
padding: 9px 11px;
font-size: .66rem;
}
.billing-readiness-strip > form {
margin-top: 8px;
}
@media (max-width: 760px) {
.billing-readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.billing-command-center .billing-provider-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.billing-readiness-grid { grid-template-columns: 1fr; }
}
/* Provider cards: the active/default provider should visually lead —
stronger border, warm wash, filled AKTİF badge. */
.billing-provider-card.active-provider {
border-color: var(--line-strong);
background: linear-gradient(165deg, rgba(192, 138, 46, .09), transparent 60%), var(--panel-2);
box-shadow: 0 0 0 1px rgba(192, 138, 46, .1), var(--shadow);
}
.billing-provider-card.active-provider .founder-card-head h3 {
color: var(--text);
}
.billing-provider-card .health-tag {
font-weight: 750;
}
.billing-provider-card.active-provider .health-tag {
border-color: transparent;
color: var(--accent-on);
background: var(--accent);
}
.billing-provider-setup-link {
margin: -2px 0 4px;
width: fit-content;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent);
font-size: .68rem;
font-weight: 750;
text-decoration: none;
}
.billing-provider-setup-link:hover { color: var(--text); }
.billing-provider-setup-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* Inactive/unconfigured providers: collapse their credential fields behind
a disclosure instead of always showing a wall of empty password inputs.
Native / — no JS, form fields keep posting normally
whether the block is open or closed. */
.billing-provider-fields {
margin-top: 2px;
}
.billing-provider-fields > summary {
list-style: none;
cursor: pointer;
padding: 9px 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel-2);
color: var(--muted);
font-size: .72rem;
font-weight: 700;
transition: border-color var(--transition), background var(--transition);
}
.billing-provider-fields > summary::-webkit-details-marker {
display: none;
}
.billing-provider-fields > summary::after {
content: "Yapılandır +";
color: var(--dim);
font-size: .64rem;
font-weight: 750;
letter-spacing: .02em;
}
.billing-provider-fields[open] > summary::after {
content: "Gizle –";
}
.billing-provider-fields[open] > summary {
border-radius: 10px 10px 0 0;
border-bottom-color: transparent;
background: var(--panel-3);
}
.billing-provider-fields > summary:hover {
border-color: var(--line-strong);
}
.billing-provider-fields > summary em {
color: var(--green);
font-style: normal;
font-weight: 750;
font-size: .62rem;
}
.billing-provider-fields-body {
padding: 12px 11px;
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid var(--line);
border-top: 0;
border-radius: 0 0 10px 10px;
background: rgba(255, 255, 255, .014);
}
/* Plan editor cards: split "touched often" fields (name, price, trial,
active) from "touched once at setup" provider-reference IDs, instead of
one flat 13-field grid where both read with equal weight. */
.billing-plan-form {
gap: 12px;
}
.plan-field-core.founder-form-grid {
gap: 12px;
}
.plan-field-refs {
margin-top: 2px;
padding: 12px 12px 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255, 255, 255, .014);
}
.plan-refs-heading {
margin: 0 0 10px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.plan-refs-heading b {
color: var(--muted);
font-size: .66rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.plan-refs-heading small {
color: var(--dim);
font-size: .62rem;
font-weight: 600;
text-align: right;
}
.plan-refs-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.plan-refs-grid .founder-field {
gap: 4px;
}
.plan-refs-grid .founder-field > span {
color: var(--dim);
font-size: .64rem;
font-weight: 650;
}
.plan-refs-grid input {
min-height: 36px;
padding: 7px 9px;
font-size: .74rem;
}
@media (max-width: 640px) {
.plan-refs-grid { grid-template-columns: 1fr; }
}
/* Home pricing comparison — compact, aligned and intentionally quieter
than three independent "tower" cards. The shared frame makes the tiers
read as one product comparison, while the recommended tier is expressed
through surface and type hierarchy instead of oversized elevation. */
body.kara-page .kara36-plans {
position: relative;
}
body.kara-page .kara36-plans .kara36-section-head {
max-width: 880px;
margin-bottom: clamp(28px, 4vw, 46px);
}
body.kara-page .kara36-plans .kara36-section-head h2 {
text-wrap: balance;
}
body.kara-page .kara36-plans .kara36-section-head p {
max-width: 650px;
margin-top: 14px;
text-wrap: pretty;
}
body.kara-page .kara36-plan-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
align-items: stretch;
overflow: hidden;
border: 1px solid var(--kara-line-strong, var(--line-strong));
border-radius: 24px;
background: var(--kara-line, var(--line));
box-shadow: 0 28px 80px -54px color-mix(in srgb, var(--kara-accent) 42%, transparent);
}
body.kara-page .kara36-plan-card,
body.kara-page .kara36-plan-card.featured,
body.kara-page .kara36-plan-card.featured:hover {
min-height: 0;
padding: clamp(22px, 1.9vw, 30px) !important;
overflow: hidden;
border: 0 !important;
border-radius: 0 !important;
background: var(--kara-surface, var(--panel));
box-shadow: none;
transform: none;
transition: background-color .25s ease;
}
body.kara-page .kara36-plan-card.featured,
body.kara-page .kara36-plan-card.featured:hover {
background:
radial-gradient(circle at 50% 0, color-mix(in srgb, var(--kara-accent) 13%, transparent), transparent 18rem),
color-mix(in srgb, var(--kara-accent) 3%, var(--kara-surface, var(--panel)));
}
body.kara-page .kara36-plan-card.corporate {
background:
radial-gradient(circle at 100% 0, color-mix(in srgb, var(--kara-accent) 6%, transparent), transparent 18rem),
var(--kara-surface, var(--panel));
}
body.kara-page .kara36-plan-card:hover {
background-color: color-mix(in srgb, var(--kara-accent) 2.5%, var(--kara-surface, var(--panel)));
}
body.kara-page .kara36-plan-card::after {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 2px;
background: transparent;
pointer-events: none;
}
body.kara-page .kara36-plan-card.featured::after {
background: var(--kara-accent, var(--accent));
}
body.kara-page .kara36-plan-index {
min-height: 26px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: var(--kara-ink-3, var(--dim));
font-family: var(--kara-font-mono, ui-monospace, monospace);
font-size: .64rem;
font-variant-numeric: tabular-nums;
}
body.kara-page .kara36-plan-index > span {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border: 1px solid var(--kara-line, var(--line));
border-radius: 8px;
background: color-mix(in srgb, var(--kara-surface-2, var(--panel-2)) 82%, transparent);
color: var(--kara-ink-2, var(--muted));
font-weight: 700;
}
body.kara-page .kara36-plan-index > small {
color: var(--kara-ink-3, var(--dim));
font-size: .62rem;
font-weight: 650;
letter-spacing: .06em;
text-transform: uppercase;
}
body.kara-page .kara36-plan-ribbon {
position: static;
margin: 0;
padding: 5px 9px;
border-radius: 7px;
font-family: var(--kara-font-sans, sans-serif);
letter-spacing: .08em;
}
body.kara-page .kara36-plan-card header {
min-height: 112px;
margin: 0;
gap: 8px;
}
body.kara-page .kara36-plan-card header > span {
font-size: .65rem;
letter-spacing: .14em;
}
body.kara-page .kara36-plan-card header h3 {
font-size: clamp(1.42rem, 1.7vw, 1.72rem);
letter-spacing: -.035em;
line-height: 1.12;
}
body.kara-page .kara36-plan-card header p {
max-width: 34ch;
margin-top: 2px;
font-size: .79rem;
line-height: 1.6;
text-wrap: pretty;
}
body.kara-page .kara36-price {
min-height: 76px;
margin: 0 0 19px;
padding: 14px 0;
justify-content: center;
border-top: 1px solid var(--kara-line, var(--line));
border-bottom: 1px solid var(--kara-line, var(--line));
}
body.kara-page .kara36-price b {
color: var(--kara-ink, var(--text));
font-family: var(--kara-font-display, var(--font-display));
font-size: clamp(1.55rem, 2vw, 2rem);
font-weight: 760;
letter-spacing: -.035em;
line-height: 1;
}
body.kara-page .kara36-price span {
margin-top: 5px;
font-family: var(--kara-font-mono, ui-monospace, monospace);
font-size: .65rem;
letter-spacing: .025em;
}
body.kara-page .kara36-plan-includes {
margin: 0 0 13px;
color: var(--kara-ink, var(--text));
font-size: .7rem;
font-weight: 760;
letter-spacing: .035em;
}
body.kara-page .kara36-plan-card ul {
flex: 1;
margin: 0;
padding: 0;
gap: 0;
}
body.kara-page .kara36-plan-card li {
min-height: 35px;
margin: 0;
padding: 7px 0 7px 28px;
display: flex;
align-items: center;
border-top: 1px solid color-mix(in srgb, var(--kara-line, var(--line)) 72%, transparent);
color: var(--kara-ink-2, var(--text-soft));
font-size: .75rem;
line-height: 1.45;
}
body.kara-page .kara36-plan-card li::before {
content: "✓";
top: 50%;
width: 17px;
height: 17px;
display: grid;
place-items: center;
border-radius: 50%;
background: color-mix(in srgb, var(--green) 13%, transparent);
color: var(--green);
font-size: .59rem;
font-weight: 900;
transform: translateY(-50%);
}
body.kara-page .kara36-plan-card li.is-unavailable {
color: var(--kara-ink-3, var(--dim));
}
body.kara-page .kara36-plan-card li.is-unavailable::before {
content: "–";
background: color-mix(in srgb, var(--kara-line, var(--line)) 70%, transparent);
color: var(--kara-ink-3, var(--dim));
}
body.kara-page .kara36-plan-card > a.kara36-button {
min-height: 44px;
margin: 20px 0 0;
padding-inline: 17px;
justify-content: space-between;
border-radius: 11px;
}
body.kara-page .kara36-plan-card > a.kara36-button b {
font-size: .9rem;
transition: transform .22s cubic-bezier(.2, .75, .25, 1);
}
body.kara-page .kara36-plan-card > a.kara36-button:hover b {
transform: translate(2px, -2px);
}
body.kara-page .kara36-plan-card > a.kara36-button:focus-visible {
outline: 2px solid var(--kara-accent, var(--accent));
outline-offset: 3px;
}
@media (max-width: 1020px) {
body.kara-page .kara36-plan-grid {
grid-template-columns: 1fr;
}
body.kara-page .kara36-plan-grid > article:last-child {
grid-column: auto;
}
body.kara-page .kara36-plan-card header {
min-height: 0;
margin-bottom: 24px;
}
body.kara-page .kara36-price {
min-height: 0;
}
}
@media (max-width: 560px) {
body.kara-page .kara36-plan-grid { border-radius: 18px; }
body.kara-page .kara36-plan-card,
body.kara-page .kara36-plan-card.featured { padding: 22px !important; }
body.kara-page .kara36-plan-index { margin-bottom: 22px; }
}
/* Plans page — a single comparison system rather than three unrelated
pricing towers. This keeps all server-side CTA and billing behaviour
intact while making capacity, inclusion and recommendation scannable. */
html { scroll-behavior: smooth; }
body.k39-page.k39-plans :where(#packages, #comparison, #questions) {
scroll-margin-top: 118px;
}
body.k39-page.k39-plans .k39-plan-jump {
position: sticky;
top: 92px;
z-index: 35;
width: max-content;
max-width: 100%;
margin: 18px auto 0;
padding: 5px;
display: flex;
gap: 4px;
overflow-x: auto;
border: 1px solid var(--kara-line, var(--line));
border-radius: 14px;
background: color-mix(in srgb, var(--kara-surface, var(--panel)) 88%, transparent);
box-shadow: 0 14px 34px -26px color-mix(in srgb, var(--kara-accent) 45%, transparent);
backdrop-filter: blur(18px);
}
body.k39-page.k39-plans .k39-plan-jump a {
min-height: 39px;
padding: 0 13px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 9px;
color: var(--kara-ink-soft, var(--muted));
font-size: .71rem;
font-weight: 690;
white-space: nowrap;
transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
body.k39-page.k39-plans .k39-plan-jump a:hover {
color: var(--kara-ink, var(--text));
background: var(--kara-surface-2, var(--panel-2));
}
body.k39-page.k39-plans .k39-plan-jump a:active { transform: translateY(1px); }
body.k39-page.k39-plans .k39-plan-jump a:focus-visible {
outline: 2px solid var(--kara-accent, var(--accent));
outline-offset: 2px;
}
body.k39-page.k39-plans .k39-plan-jump span {
color: var(--kara-accent, var(--accent));
font-family: var(--kara-font-mono, ui-monospace, monospace);
font-size: .59rem;
}
body.k39-page.k39-plans .k39-packages { margin-top: 42px; }
body.k39-page.k39-plans .k39-section {
margin-top: 0;
padding-block: clamp(62px, 6.5vw, 94px);
}
body.k39-page.k39-plans .k39-packages { padding-top: 54px; }
body.k39-page.k39-plans .k39-plan-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid var(--kara-line-strong, var(--line-strong));
border-radius: 24px;
background: var(--kara-line, var(--line));
box-shadow: 0 30px 90px -58px color-mix(in srgb, var(--kara-accent) 48%, transparent);
}
body.k39-page.k39-plans .k39-plan-card,
body.k39-page.k39-plans .k39-plan-card.recommended,
body.k39-page.k39-plans .k39-plan-card.recommended:hover,
body.k39-page.k39-plans .k39-plan-card:hover {
min-height: 0;
padding: clamp(24px, 2vw, 31px);
overflow: hidden;
border: 0 !important;
border-radius: 0 !important;
background: var(--kara-surface, var(--panel));
box-shadow: none;
transform: none;
}
body.k39-page.k39-plans .k39-plan-card.recommended,
body.k39-page.k39-plans .k39-plan-card.recommended:hover {
background:
radial-gradient(circle at 50% 0, color-mix(in srgb, var(--kara-accent) 14%, transparent), transparent 19rem),
color-mix(in srgb, var(--kara-accent) 3%, var(--kara-surface, var(--panel)));
}
body.k39-page.k39-plans .k39-plan-card.corporate {
background:
radial-gradient(circle at 100% 0, color-mix(in srgb, var(--kara-accent) 7%, transparent), transparent 20rem),
var(--kara-surface, var(--panel));
}
body.k39-page.k39-plans .k39-plan-card::after {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 2px;
background: transparent;
}
body.k39-page.k39-plans .k39-plan-card.recommended::after {
background: var(--kara-accent, var(--accent));
}
body.k39-page.k39-plans .k39-plan-topline {
min-height: 28px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
body.k39-page.k39-plans .k39-plan-topline > span:first-child {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 1px solid var(--kara-line, var(--line));
border-radius: 8px;
color: var(--kara-ink-soft, var(--muted));
background: var(--kara-surface-2, var(--panel-2));
font-family: var(--kara-font-mono, ui-monospace, monospace);
font-size: .61rem;
font-weight: 700;
}
body.k39-page.k39-plans .k39-plan-badge {
position: static;
padding: 5px 9px;
border-radius: 7px;
font-size: .57rem;
letter-spacing: .075em;
}
body.k39-page.k39-plans .k39-plan-heading {
min-height: 112px;
display: flex;
flex-direction: column;
gap: 7px;
}
body.k39-page.k39-plans .k39-plan-heading > span {
color: var(--kara-accent, var(--accent));
font-size: .64rem;
font-weight: 780;
letter-spacing: .13em;
text-transform: uppercase;
}
body.k39-page.k39-plans .k39-plan-heading h2 {
margin: 0;
font-size: clamp(1.45rem, 1.65vw, 1.72rem);
letter-spacing: -.035em;
line-height: 1.15;
}
body.k39-page.k39-plans .k39-plan-heading p {
max-width: 40ch;
margin: 2px 0 0;
font-size: .77rem;
line-height: 1.58;
text-wrap: pretty;
}
body.k39-page.k39-plans .k39-plan-price {
min-height: 74px;
margin: 0 0 15px;
padding: 12px 0;
justify-content: center;
border-top: 1px solid var(--kara-line, var(--line));
border-bottom: 1px solid var(--kara-line, var(--line));
}
body.k39-page.k39-plans .k39-plan-price b {
font-family: var(--kara-font-display, var(--font-display));
font-size: clamp(1.65rem, 2vw, 2rem);
font-weight: 760;
letter-spacing: -.035em;
line-height: 1;
}
body.k39-page.k39-plans .k39-plan-price small {
margin-top: 6px;
font-family: var(--kara-font-mono, ui-monospace, monospace);
font-size: .64rem;
letter-spacing: .02em;
}
body.k39-page.k39-plans .k39-capacity-grid {
margin: 0 0 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid var(--kara-line, var(--line));
border-radius: 12px;
background: var(--kara-line, var(--line));
}
body.k39-page.k39-plans .k39-capacity-grid > span {
min-height: 56px;
padding: 8px 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
background: color-mix(in srgb, var(--kara-surface-2, var(--panel-2)) 90%, transparent);
}
body.k39-page.k39-plans .k39-capacity-grid small,
body.k39-page.k39-plans .k39-capacity-grid b { display: block; }
body.k39-page.k39-plans .k39-capacity-grid small {
color: var(--kara-ink-soft, var(--muted));
font-size: .61rem;
line-height: 1.2;
}
body.k39-page.k39-plans .k39-capacity-grid b {
color: var(--kara-ink, var(--text));
font-family: var(--kara-font-mono, ui-monospace, monospace);
font-size: .72rem;
font-weight: 500;
line-height: 1.35;
}
body.k39-page.k39-plans .k39-plan-includes {
margin: 0 0 10px;
color: var(--kara-ink, var(--text));
font-size: .7rem;
font-weight: 760;
letter-spacing: .035em;
}
body.k39-page.k39-plans .k39-plan-card .k39-list {
flex: 1;
margin: 0;
padding: 0;
list-style: none;
}
body.k39-page.k39-plans .k39-plan-card .k39-list li {
position: relative;
min-height: 33px;
margin: 0;
padding: 6px 0 6px 28px;
display: flex;
align-items: center;
border-top: 1px solid color-mix(in srgb, var(--kara-line, var(--line)) 72%, transparent);
color: var(--kara-ink-soft, var(--text-soft));
font-size: .73rem;
line-height: 1.42;
}
body.k39-page.k39-plans .k39-plan-card .k39-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 50%;
width: 17px;
height: 17px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--green);
background: color-mix(in srgb, var(--green) 13%, transparent);
font-size: .58rem;
font-weight: 900;
transform: translateY(-50%);
}
body.k39-page.k39-plans .k39-plan-card > .k39-btn {
min-height: 45px;
margin-top: 20px;
padding-inline: 17px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 11px;
}
body.k39-page.k39-plans .k39-plan-card > .k39-btn b {
font-size: .88rem;
transition: transform .22s cubic-bezier(.2, .75, .25, 1);
}
body.k39-page.k39-plans .k39-plan-card > .k39-btn:hover b {
transform: translate(2px, -2px);
}
body.k39-page.k39-plans .k39-plan-card > .k39-btn:focus-visible {
outline: 2px solid var(--kara-accent, var(--accent));
outline-offset: 3px;
}
/* Capability matrix */
body.k39-page.k39-plans .k39-compare {
padding: 0 !important;
border-color: var(--kara-line-strong, var(--line-strong));
border-radius: 20px !important;
background: var(--kara-surface, var(--panel));
box-shadow: 0 24px 70px -52px color-mix(in srgb, var(--kara-accent) 44%, transparent);
}
body.k39-page.k39-plans .k39-compare:hover {
transform: none;
}
body.k39-page.k39-plans .k39-compare-head,
body.k39-page.k39-plans .k39-compare-row {
grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(130px, .55fr));
}
body.k39-page.k39-plans .k39-compare-head {
min-width: 790px;
min-height: 68px;
align-items: stretch;
border-bottom: 1px solid var(--kara-line-strong, var(--line-strong));
background: var(--kara-surface-2, var(--panel-2));
}
body.k39-page.k39-plans .k39-compare-head > b {
padding: 14px 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
border-left: 1px solid var(--kara-line, var(--line));
font-size: .71rem;
}
body.k39-page.k39-plans .k39-compare-head > b:first-child { border-left: 0; }
body.k39-page.k39-plans .k39-compare-head > b:nth-child(3) {
color: var(--kara-accent, var(--accent));
background: color-mix(in srgb, var(--kara-accent) 7%, transparent);
}
body.k39-page.k39-plans .k39-compare-head small {
color: var(--kara-ink-soft, var(--muted));
font-size: .54rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
body.k39-page.k39-plans .k39-compare-group { min-width: 790px; }
body.k39-page.k39-plans .k39-compare-group > header {
min-height: 38px;
padding: 11px 18px;
border-bottom: 1px solid var(--kara-line, var(--line));
color: var(--kara-accent, var(--accent));
background: color-mix(in srgb, var(--kara-accent) 4%, var(--kara-surface-2, var(--panel-2)));
font-family: var(--kara-font-mono, ui-monospace, monospace);
font-size: .62rem;
font-weight: 500;
letter-spacing: .09em;
text-transform: uppercase;
}
body.k39-page.k39-plans .k39-compare-row {
min-height: 52px;
border-bottom: 1px solid var(--kara-line, var(--line));
transition: background-color .18s ease;
}
body.k39-page.k39-plans .k39-compare-row:hover {
background: color-mix(in srgb, var(--kara-accent) 2.5%, transparent);
}
body.k39-page.k39-plans .k39-compare-row > span {
padding: 12px 18px;
display: flex;
align-items: center;
border-left: 1px solid var(--kara-line, var(--line));
}
body.k39-page.k39-plans .k39-compare-row > span:first-child {
border-left: 0;
color: var(--kara-ink, var(--text));
font-weight: 610;
}
body.k39-page.k39-plans .k39-compare-row > span:nth-child(3) {
background: color-mix(in srgb, var(--kara-accent) 4%, transparent);
}
body.k39-page.k39-plans .k39-access {
--access-tone: var(--kara-ink-soft, var(--muted));
padding: 0;
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
border-radius: 0;
background: none;
font-size: .67rem;
font-style: normal;
font-weight: 670;
}
body.k39-page.k39-plans .k39-access::before {
content: "✓";
width: 16px;
height: 16px;
flex: none;
display: grid;
place-items: center;
border-radius: 50%;
color: #061116;
background: var(--access-tone);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--access-tone) 12%, transparent);
font-size: .55rem;
font-weight: 900;
line-height: 1;
}
body.k39-page.k39-plans .k39-access.yes,
body.k39-page.k39-plans .k39-access.enterprise {
--access-tone: #4fbf8f;
}
body.k39-page.k39-plans .k39-access.no {
--access-tone: #d9636b;
}
body.k39-page.k39-plans .k39-access.no::before {
content: "–";
color: #fff8f8;
}
/* Decision notes and final CTA */
body.k39-page.k39-plans .k39-questions-head {
margin-bottom: 22px;
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
align-items: end;
gap: 28px;
}
body.k39-page.k39-plans .k39-questions-head h2 {
max-width: 720px;
margin: 0;
font-size: clamp(1.8rem, 3vw, 3rem);
letter-spacing: -.04em;
line-height: 1.08;
text-wrap: balance;
}
body.k39-page.k39-plans .k39-plan-questions .k39-grid.three {
gap: 1px;
overflow: hidden;
border: 1px solid var(--kara-line-strong, var(--line-strong));
border-radius: 20px;
background: var(--kara-line, var(--line));
}
body.k39-page.k39-plans .k39-plan-questions .k39-card,
body.k39-page.k39-plans .k39-plan-questions .k39-card:hover {
min-height: 250px;
padding: 25px;
border: 0 !important;
border-radius: 0 !important;
background: var(--kara-surface, var(--panel));
box-shadow: none;
transform: none;
}
body.k39-page.k39-plans .k39-plan-questions .k39-card h3 {
margin: 42px 0 10px;
font-size: 1.12rem;
letter-spacing: -.02em;
}
body.k39-page.k39-plans .k39-plan-questions .k39-card p {
margin: 0;
font-size: .77rem;
line-height: 1.65;
}
body.k39-page.k39-plans .k39-ticket-cta {
border-color: var(--kara-line-strong, var(--line-strong));
background:
radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--kara-accent) 12%, transparent), transparent 20rem),
var(--kara-surface, var(--panel));
}
@media (max-width: 1080px) {
body.k39-page.k39-plans .k39-plan-grid { grid-template-columns: 1fr; }
body.k39-page.k39-plans .k39-plan-card,
body.k39-page.k39-plans .k39-plan-card.recommended { padding: 28px; }
body.k39-page.k39-plans .k39-plan-heading { min-height: 0; margin-bottom: 22px; }
body.k39-page.k39-plans .k39-plan-questions .k39-grid.three { grid-template-columns: 1fr; }
body.k39-page.k39-plans .k39-plan-questions .k39-card { min-height: 0; }
}
@media (max-width: 720px) {
body.k39-page.k39-plans .k39-plan-jump {
position: static;
width: 100%;
justify-content: flex-start;
}
body.k39-page.k39-plans .k39-plan-jump a { flex: 1 0 auto; justify-content: center; }
body.k39-page.k39-plans .k39-plan-grid { border-radius: 18px; }
body.k39-page.k39-plans .k39-plan-card,
body.k39-page.k39-plans .k39-plan-card.recommended { padding: 22px; }
body.k39-page.k39-plans .k39-compare { overflow: hidden; }
body.k39-page.k39-plans .k39-compare-head { display: none; }
body.k39-page.k39-plans .k39-compare-group { min-width: 0; }
body.k39-page.k39-plans .k39-compare-group > header {
padding: 13px 14px;
}
body.k39-page.k39-plans .k39-compare-row {
min-width: 0;
padding: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
body.k39-page.k39-plans .k39-compare-row > span {
min-width: 0;
padding: 7px 3px;
display: block;
border-left: 0;
font-size: .64rem;
}
body.k39-page.k39-plans .k39-compare-row > span:first-child {
grid-column: 1 / -1;
padding: 0 3px 10px;
border-bottom: 1px solid var(--kara-line, var(--line));
font-size: .72rem;
}
body.k39-page.k39-plans .k39-compare-row > span:not(:first-child)::before {
content: attr(data-plan);
display: block;
margin-bottom: 7px;
color: var(--kara-ink-soft, var(--muted));
font-size: .54rem;
font-weight: 650;
}
body.k39-page.k39-plans .k39-compare-row > span:nth-child(3) {
padding-inline: 7px;
border-radius: 8px;
}
body.k39-page.k39-plans .k39-access {
gap: 5px;
font-size: .61rem;
}
body.k39-page.k39-plans .k39-access::before {
width: 15px;
height: 15px;
}
body.k39-page.k39-plans .k39-questions-head { grid-template-columns: 1fr; gap: 10px; }
body.k39-page.k39-plans .k39-plan-questions .k39-grid.three { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/