/*
 * ANKAHUKUK PLATFORM COMPONENTS 1.0.0
 * Ortak, erişilebilir ve modüller arası kullanılabilir bileşenler.
 */
.anka-design-system-active {
    --anka-ui-accent: var(--anka-color-wine-700);
    --anka-ui-accent-hover: var(--anka-color-wine-800);
    --anka-ui-surface: var(--anka-color-surface);
    --anka-ui-line: var(--anka-color-line);
    --anka-ui-ink: var(--anka-color-ink);
    --anka-ui-muted: var(--anka-color-muted);
}

.anka-ui-scope,
.anka-platform-app-shell,
.anka-platform-launchpad,
.cmk-application {
    font-family: var(--anka-font-sans);
}

.anka-ui-button,
.anka-ui-field input,
.anka-ui-field select,
.anka-ui-field textarea,
.anka-ui-tab,
.anka-ui-icon-button {
    font: inherit;
}

.anka-ui-button,
.anka-ui-icon-button,
.anka-ui-tab,
.anka-ui-card,
.anka-ui-list-item {
    transition:
        border-color var(--anka-duration-fast) var(--anka-ease-standard),
        background-color var(--anka-duration-fast) var(--anka-ease-standard),
        color var(--anka-duration-fast) var(--anka-ease-standard),
        box-shadow var(--anka-duration-fast) var(--anka-ease-standard),
        transform var(--anka-duration-fast) var(--anka-ease-standard);
}

.anka-ui-button:focus-visible,
.anka-ui-icon-button:focus-visible,
.anka-ui-tab:focus-visible,
.anka-ui-field input:focus-visible,
.anka-ui-field select:focus-visible,
.anka-ui-field textarea:focus-visible,
.anka-ui-card:focus-visible,
.anka-ui-list-item:focus-visible,
.anka-ui-dialog [data-anka-ui-close]:focus-visible,
.anka-ui-drawer [data-anka-ui-close]:focus-visible {
    outline: 0;
    box-shadow: var(--anka-focus-ring);
}

.anka-ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--anka-space-2);
    min-height: 2.45rem;
    padding: .55rem .85rem;
    border: 1px solid var(--anka-color-line);
    border-radius: var(--anka-radius-sm);
    background: var(--anka-color-surface);
    color: var(--anka-color-ink);
    font-size: var(--anka-text-12);
    font-weight: 850;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
}

.anka-ui-button:hover {
    border-color: rgba(130, 37, 54, .34);
    color: var(--anka-color-wine-700);
}

.anka-ui-button.is-primary {
    border-color: var(--anka-color-wine-700);
    background: var(--anka-color-wine-700);
    color: #fff;
}

.anka-ui-button.is-primary:hover {
    border-color: var(--anka-color-wine-800);
    background: var(--anka-color-wine-800);
    color: #fff;
}

.anka-ui-button.is-quiet {
    border-color: transparent;
    background: var(--anka-color-surface-soft);
}

.anka-ui-button.is-danger {
    border-color: var(--anka-color-red-700);
    background: var(--anka-color-red-700);
    color: #fff;
}

.anka-ui-button[disabled],
.anka-ui-button[aria-disabled="true"] {
    opacity: .48;
    pointer-events: none;
}

.anka-ui-icon-button {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--anka-color-line);
    border-radius: var(--anka-radius-sm);
    background: var(--anka-color-surface);
    color: var(--anka-color-ink);
    cursor: pointer;
}

.anka-ui-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: .22rem .48rem;
    border-radius: var(--anka-radius-pill);
    background: var(--anka-color-surface-soft);
    color: var(--anka-color-muted);
    font-size: var(--anka-text-10);
    font-weight: 850;
    line-height: 1;
}

.anka-ui-status.is-success { background: #e4f1ed; color: var(--anka-color-green-700); }
.anka-ui-status.is-warning { background: #f4ecdf; color: var(--anka-color-orange-700); }
.anka-ui-status.is-danger { background: #f6e7ea; color: var(--anka-color-red-700); }
.anka-ui-status.is-info { background: #e7edf2; color: var(--anka-color-navy-700); }

.anka-ui-card {
    display: block;
    padding: var(--anka-space-4);
    border: 1px solid var(--anka-color-line);
    border-radius: var(--anka-radius-md);
    background: var(--anka-color-surface);
    color: var(--anka-color-ink);
    box-shadow: var(--anka-shadow-xs);
}

.anka-ui-card.is-interactive:hover {
    border-color: rgba(130, 37, 54, .28);
    box-shadow: var(--anka-shadow-sm);
    transform: translateY(-1px);
}

.anka-ui-card-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--anka-space-3);
    margin-bottom: var(--anka-space-3);
}

.anka-ui-card-title {
    margin: 0;
    font-size: var(--anka-text-14);
}

.anka-ui-card-copy {
    margin: 0;
    color: var(--anka-color-muted);
    font-size: var(--anka-text-12);
    line-height: 1.55;
}

.anka-ui-field {
    display: grid;
    gap: .4rem;
}

.anka-ui-field > span {
    color: var(--anka-color-ink-soft);
    font-size: var(--anka-text-11);
    font-weight: 800;
}

.anka-ui-field input,
.anka-ui-field select,
.anka-ui-field textarea {
    width: 100%;
    min-height: 2.55rem;
    padding: .58rem .68rem;
    border: 1px solid #cfd5d8;
    border-radius: var(--anka-radius-sm);
    background: var(--anka-color-surface);
    color: var(--anka-color-ink);
    font-size: var(--anka-text-12);
}

.anka-ui-field textarea {
    min-height: 6rem;
    resize: vertical;
}

.anka-ui-field small {
    color: var(--anka-color-muted);
    font-size: var(--anka-text-10);
}

.anka-ui-progress {
    height: .45rem;
    overflow: hidden;
    border-radius: var(--anka-radius-pill);
    background: #e0e4e6;
}

.anka-ui-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--anka-color-wine-700),
        var(--anka-color-gold-600)
    );
}

.anka-ui-tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--anka-color-line);
}

.anka-ui-tab {
    position: relative;
    flex: 0 0 auto;
    padding: .7rem .65rem;
    border: 0;
    background: transparent;
    color: var(--anka-color-muted);
    font-size: var(--anka-text-11);
    font-weight: 850;
    cursor: pointer;
}

.anka-ui-tab::after {
    content: "";
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: -1px;
    height: 2px;
    background: transparent;
}

.anka-ui-tab[aria-selected="true"] {
    color: var(--anka-color-wine-700);
}

.anka-ui-tab[aria-selected="true"]::after {
    background: var(--anka-color-wine-700);
}

.anka-ui-tab-panel {
    padding-top: var(--anka-space-4);
}

.anka-ui-notice {
    display: grid;
    grid-template-columns: .3rem minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--anka-color-line);
    border-radius: var(--anka-radius-md);
    background: var(--anka-color-surface);
}

.anka-ui-notice::before {
    content: "";
    background: var(--anka-color-navy-700);
}

.anka-ui-notice.is-warning::before { background: var(--anka-color-gold-600); }
.anka-ui-notice.is-danger::before { background: var(--anka-color-red-700); }
.anka-ui-notice.is-success::before { background: var(--anka-color-green-600); }

.anka-ui-notice > div {
    padding: var(--anka-space-3) var(--anka-space-4);
}

.anka-ui-notice strong {
    display: block;
    margin-bottom: .2rem;
    font-size: var(--anka-text-12);
}

.anka-ui-notice span {
    color: var(--anka-color-muted);
    font-size: var(--anka-text-11);
    line-height: 1.45;
}

.anka-ui-empty {
    padding: var(--anka-space-8);
    border: 1px dashed #cbd1d4;
    border-radius: var(--anka-radius-lg);
    background: rgba(255, 255, 255, .58);
    text-align: center;
}

.anka-ui-empty strong {
    display: block;
    font-size: var(--anka-text-14);
}

.anka-ui-empty span {
    display: block;
    max-width: 35rem;
    margin: .35rem auto 0;
    color: var(--anka-color-muted);
    font-size: var(--anka-text-11);
    line-height: 1.5;
}

.anka-ui-tooltip {
    position: relative;
    display: inline-flex;
}

.anka-ui-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + .5rem);
    z-index: var(--anka-z-dropdown);
    width: max-content;
    max-width: 16rem;
    padding: .45rem .55rem;
    border-radius: var(--anka-radius-xs);
    background: var(--anka-color-navy-950);
    color: #fff;
    font-size: var(--anka-text-10);
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, .2rem);
    transition:
        opacity var(--anka-duration-fast),
        transform var(--anka-duration-fast);
}

.anka-ui-tooltip:hover::after,
.anka-ui-tooltip:focus-within::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.anka-ui-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--anka-z-modal);
    display: grid;
    place-items: center;
    padding: var(--anka-space-4);
    background: var(--anka-color-overlay);
}

.anka-ui-overlay[hidden] {
    display: none !important;
}

.anka-ui-dialog {
    width: min(36rem, 100%);
    max-height: min(80vh, 48rem);
    overflow: auto;
    border-radius: var(--anka-radius-lg);
    background: var(--anka-color-surface);
    box-shadow: var(--anka-shadow-lg);
}

.anka-ui-dialog-header,
.anka-ui-drawer-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--anka-space-3);
    padding: var(--anka-space-4);
    border-bottom: 1px solid var(--anka-color-line);
}

.anka-ui-dialog-header h2,
.anka-ui-drawer-header h2 {
    margin: 0;
    font-size: var(--anka-text-16);
}

.anka-ui-dialog-body,
.anka-ui-drawer-body {
    padding: var(--anka-space-4);
    color: var(--anka-color-muted);
    font-size: var(--anka-text-12);
    line-height: 1.55;
}

.anka-ui-drawer-layer {
    position: fixed;
    inset: 0;
    z-index: var(--anka-z-drawer);
    background: var(--anka-color-overlay);
}

.anka-ui-drawer-layer[hidden] {
    display: none !important;
}

.anka-ui-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: min(25rem, 92vw);
    height: 100%;
    overflow: auto;
    background: var(--anka-color-surface);
    box-shadow: var(--anka-shadow-lg);
}

.anka-ui-dialog [data-anka-ui-close],
.anka-ui-drawer [data-anka-ui-close] {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--anka-color-line);
    border-radius: var(--anka-radius-sm);
    background: var(--anka-color-surface);
    cursor: pointer;
}

body.anka-ui-locked {
    overflow: hidden;
}

@media (max-width: 650px) {
    .anka-ui-button {
        min-height: 2.7rem;
    }

    .anka-ui-dialog {
        max-height: 88vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anka-ui-button,
    .anka-ui-icon-button,
    .anka-ui-tab,
    .anka-ui-card,
    .anka-ui-list-item,
    .anka-ui-tooltip::after {
        transition: none !important;
    }
}


/* Design System live catalog */
.anka-ds-page{min-height:70vh;background:var(--anka-color-surface-soft);color:var(--anka-color-ink)}
.anka-ds-hero{padding:2.3rem 0;background:linear-gradient(135deg,var(--anka-color-navy-950),var(--anka-color-navy-700));color:#fff}
.anka-ds-hero p{margin:0 0 .35rem;color:var(--anka-color-gold-400);font-size:var(--anka-text-10);font-weight:900;letter-spacing:.14em}
.anka-ds-hero h1{margin:0;font-family:var(--anka-font-serif);font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.05}
.anka-ds-hero span{display:block;max-width:50rem;margin-top:.7rem;color:#d6e0e7;font-size:var(--anka-text-13);line-height:1.55}
.anka-ds-layout{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1rem;padding-top:2rem;padding-bottom:4rem}
.anka-ds-nav{position:sticky;top:1rem;align-self:start;display:grid;padding:.65rem;border:1px solid var(--anka-color-line);border-radius:var(--anka-radius-md);background:#fff}
.anka-ds-nav a{padding:.55rem .6rem;border-radius:var(--anka-radius-sm);color:var(--anka-color-muted);font-size:var(--anka-text-11);font-weight:750}
.anka-ds-nav a:hover{background:var(--anka-color-surface-soft);color:var(--anka-color-wine-700)}
.anka-ds-content{display:grid;gap:.8rem}
.anka-ds-section{scroll-margin-top:1rem;padding:1.25rem;border:1px solid var(--anka-color-line);border-radius:var(--anka-radius-lg);background:#fff;box-shadow:var(--anka-shadow-xs)}
.anka-ds-heading{display:flex;align-items:start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.anka-ds-heading p{margin:0 0 .25rem;color:var(--anka-color-wine-700);font-size:var(--anka-text-10);font-weight:900;letter-spacing:.12em}
.anka-ds-heading h2{margin:0;font-family:var(--anka-font-serif);font-size:var(--anka-text-22)}
.anka-ds-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem}
.anka-ds-swatches>div{overflow:hidden;border:1px solid var(--anka-color-line);border-radius:var(--anka-radius-sm)}
.anka-ds-swatches i{display:block;height:3.2rem}
.anka-ds-swatches strong,.anka-ds-swatches code{display:block;padding:.35rem .45rem}
.anka-ds-swatches strong{font-size:var(--anka-text-11)}
.anka-ds-swatches code{padding-top:0;color:var(--anka-color-muted);font-size:.55rem}
.anka-ds-spacing{display:flex;flex-wrap:wrap;align-items:end;gap:1rem;margin-top:1rem}
.anka-ds-spacing span{display:grid;gap:.35rem}
.anka-ds-spacing i{display:block;min-width:.25rem;height:1.4rem;background:var(--anka-color-wine-700)}
.anka-ds-spacing code{font-size:.6rem}
.anka-ds-type h1,.anka-ds-type h2,.anka-ds-type h3{font-family:var(--anka-font-serif)}
.anka-ds-type h1{font-size:var(--anka-text-36)}
.anka-ds-type h2{font-size:var(--anka-text-28)}
.anka-ds-type h3{font-size:var(--anka-text-18)}
.anka-ds-type p{max-width:46rem;color:var(--anka-color-muted);font-size:var(--anka-text-14);line-height:1.7}
.anka-ds-type small{color:var(--anka-color-muted-light)}
.anka-ds-demo-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.anka-ds-demo-row+.anka-ds-demo-row{margin-top:.8rem}
.anka-ds-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.anka-ds-form-grid .is-wide{grid-column:1/-1}
.anka-ds-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:.8rem}
.anka-ds-progress-demo{display:grid;gap:.5rem;margin-bottom:1rem}
.anka-ds-progress-demo>span{font-size:var(--anka-text-11);font-weight:800}
.anka-ds-tabs-demo{margin-bottom:1rem}
.anka-ui-tab-panel{color:var(--anka-color-muted);font-size:var(--anka-text-12);line-height:1.5}
@media(max-width:900px){
.anka-ds-layout{grid-template-columns:1fr}
.anka-ds-nav{position:static;grid-auto-flow:column;overflow-x:auto}
.anka-ds-nav a{white-space:nowrap}
.anka-ds-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:650px){
.anka-ds-swatches,.anka-ds-form-grid,.anka-ds-card-grid{grid-template-columns:1fr}
.anka-ds-form-grid .is-wide{grid-column:auto}
}