/*
    TSE Akademi course catalog (style guide: Eğitim kartı, Kapak sistemi). Used by the home page and the learner Eğitimler page.
    Grid: 4 columns from 1200 px, 3 from 992 px, 2 from 576 px; phones get a one-column list with the cover as a thumbnail.
    Markup: Views/Shared/_ProgramCard.cshtml and _ProgramCover.cshtml.
*/

/* ---------- Cover ---------- */
.ak-cover {
    --ak-cover-line: rgba(255, 255, 255, 0.075);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 124px;
    padding: 18px calc(20px * var(--ak-d));
    overflow: hidden;
    background-color: var(--ak-navy-900);
    color: var(--ak-white);
    isolation: isolate;
}

.ak-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: transform 600ms var(--ak-ease-out);
}

/* One pattern per standard family, drawn with CSS only */
.ak-cover-p0::before { background: repeating-radial-gradient(circle at 110% 120%, transparent 0 18px, var(--ak-cover-line) 18px 19px); }
.ak-cover-p1::before { background: repeating-linear-gradient(135deg, transparent 0 14px, var(--ak-cover-line) 14px 15px); }
.ak-cover-p2::before {
    background:
        linear-gradient(var(--ak-cover-line) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, var(--ak-cover-line) 1px, transparent 1px) 0 0 / 22px 22px;
}
.ak-cover-p3::before { background: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.6px) 0 0 / 16px 16px; }
.ak-cover-p4::before { background: repeating-conic-gradient(from 0deg at 100% 100%, transparent 0 4deg, var(--ak-cover-line) 4deg 5deg); }
.ak-cover-p5::before { background: radial-gradient(circle, transparent 7px, var(--ak-cover-line) 7px 8px, transparent 8px) 0 0 / 34px 34px; }
.ak-cover-p6::before { background: repeating-linear-gradient(0deg, transparent 0 10px, var(--ak-cover-line) 10px 11px); }
.ak-cover-p7::before {
    background:
        repeating-linear-gradient(45deg, transparent 0 16px, var(--ak-cover-line) 16px 17px),
        repeating-linear-gradient(-45deg, transparent 0 16px, var(--ak-cover-line) 16px 17px);
}

/* Uploaded image: the photo in its own colours, a little crisper, under a light ice-white sheen (strongest at the top) */
.ak-cover.has-photo::before {
    background: linear-gradient(180deg, rgba(240, 247, 255, 0.30) 0%, rgba(240, 247, 255, 0.11) 55%, rgba(240, 247, 255, 0.03) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    z-index: -1;
}

.ak-cover-photo {
    /* Shown once loaded; a photo that fails is removed and the pattern shows (_ProgramCover.cshtml) */
    opacity: 0;
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.06) brightness(1.03);
    transition: transform 600ms var(--ak-ease-out);
}

.ak-cover-photo.is-loaded { opacity: 1; }

/* Large cover (detail window) */
.ak-cover-lg { min-height: 100%; padding: calc(28px * var(--ak-d)) calc(28px * var(--ak-d)); }

/* ---------- Card ---------- */
/* Until home.js has applied the address's search, filter or order only the placeholders show */
.ak-course-grid[data-ak-catalog-pending] > .ak-course { display: none; }

.ak-course-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(24px * var(--ak-d));
    margin: 0;
    padding: 0;
}

.ak-course {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius-card);
    background: var(--ak-white);
    box-shadow: var(--ak-shadow-card);
    transition: box-shadow var(--ak-duration-base) var(--ak-ease-standard), transform var(--ak-duration-base) var(--ak-ease-standard),
                opacity var(--ak-duration-slow) var(--ak-ease-out);
}

.ak-course:hover { box-shadow: var(--ak-shadow-card-hover); transform: translateY(-4px); }
.ak-course:hover .ak-cover::before,
.ak-course:hover .ak-cover-photo { transform: scale(1.04); }
.ak-course.is-hidden { display: none; }

.ak-course-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px calc(20px * var(--ak-d)) calc(20px * var(--ak-d));
}

.ak-course-title {
    display: -webkit-box;
    margin: 0 0 18px;
    overflow: hidden;
    color: var(--ak-text-900);
    font-family: var(--ak-font-body);
    font-size: var(--ak-fs-body);
    font-weight: 600;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.ak-course-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--ak-line);
}

.ak-course-price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ak-course-price-label { color: var(--ak-text-500); font-size: var(--ak-fs-xs); }

.ak-course-price-value {
    color: var(--ak-navy-900);
    font-family: var(--ak-font-heading);
    font-size: var(--ak-fs-h4);
    font-weight: 600;
    white-space: nowrap;
}

/* Free programs: Ücretsiz instead of 0,00 ₺ */
.ak-course-price-value.is-free,
.ak-course-buy-price b.is-free { color: var(--ak-success); }

.ak-course-foot .ak-btn { flex-shrink: 0; padding: 0 16px; }

/* ---------- Catalog head: title, lead, search ---------- */
.ak-catalog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(24px * var(--ak-d));
    margin-bottom: calc(28px * var(--ak-d));
}

.ak-catalog-head .ak-section-lead { max-width: 640px; margin-bottom: 0; }

.ak-catalog-meta {
    margin: 0 0 16px;
    color: var(--ak-text-500);
    font-size: var(--ak-fs-ui);
    text-align: right;
}

.ak-catalog-more { display: flex; justify-content: center; margin-top: calc(28px * var(--ak-d)); }
.ak-catalog-more .ak-btn .bi { width: 16px; height: 16px; }

/* Learner card (panel Eğitimler): price on one row, two buttons or "Satın alındı" + Programa Git */
.ak-course-foot-stack { flex-direction: column; align-items: stretch; gap: 14px; }
.ak-course-price-row { flex-direction: row; align-items: baseline; justify-content: space-between; }
.ak-course-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ak-course-actions .ak-btn { padding: 0 12px; }

.ak-course-owned {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin: 0;
    color: var(--ak-success);
    font-size: var(--ak-fs-body);
    font-weight: 600;
}

.ak-course-owned .bi { width: 18px; height: 18px; }

.ak-progress-head { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--ak-text-500); font-size: var(--ak-fs-label); }
.ak-progress-head b { color: var(--ak-navy-900); font-weight: 600; }
.ak-progress-track { height: 6px; overflow: hidden; border-radius: 3px; background: var(--ak-line); }
.ak-progress-track span { display: block; height: 100%; border-radius: 3px; background: var(--ak-navy-900); transition: width 600ms var(--ak-ease-out); }
.ak-progress-track span.is-complete { background: var(--ak-success); }

/* ---------- Three cards: Anasayfa "Öne çıkan eğitimler", "Diğer eğitimler" on a program page ---------- */
.ak-course-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Eğitimler page: search, Ücretsiz / Ücretli filter, sort ---------- */
.ak-catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: calc(20px * var(--ak-d));
}

.ak-catalog-toolbar .ak-search { flex: 1 1 320px; max-width: 460px; }
.ak-catalog-filter { grid-auto-columns: auto; }
.ak-catalog-filter button { padding: 0 14px; gap: 6px; font-size: var(--ak-fs-ui); }
.ak-catalog-filter button span { color: var(--ak-text-500); font-size: var(--ak-fs-label); font-weight: 500; font-variant-numeric: tabular-nums; }
.ak-catalog-filter button.is-active span { color: var(--ak-navy-900); }

.ak-catalog-sort { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ak-catalog-sort-label { color: var(--ak-text-500); font-size: var(--ak-fs-ui); white-space: nowrap; }
.ak-catalog-sort .ak-input { width: auto; min-width: 180px; height: var(--ak-control-lg); font-size: var(--ak-fs-input); }

/* ---------- Program page (/Egitimler/{id}/) ---------- */
.ak-program-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "cover buy" "about buy";
    gap: calc(24px * var(--ak-d)) calc(28px * var(--ak-d));
    align-items: start;
}

.ak-program-cover { grid-area: cover; overflow: hidden; border-radius: var(--ak-radius-panel); box-shadow: var(--ak-shadow-card); }
.ak-program-cover .ak-cover { min-height: 240px; border-radius: 0; }

.ak-program-buy { grid-area: buy; position: sticky; top: calc(var(--ak-header-height) + 24px); display: flex; flex-direction: column; gap: calc(20px * var(--ak-d)); }
.ak-program-price span { display: block; color: var(--ak-text-500); font-size: var(--ak-fs-ui); }
.ak-program-price b { color: var(--ak-navy-900); font-family: var(--ak-font-heading); font-size: var(--ak-fs-h1); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ak-program-price b.is-free { color: var(--ak-success); }

.ak-program-facts { display: grid; gap: 14px; margin: 0; padding: 16px 0; border-top: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); list-style: none; }
.ak-program-facts li { display: flex; align-items: flex-start; gap: 12px; color: var(--ak-text-500); font-size: var(--ak-fs-ui); line-height: 1.5; }
.ak-program-facts b { display: block; color: var(--ak-text-900); font-size: var(--ak-fs-body); font-weight: 600; }

.ak-program-fact-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ak-blue-50);
    color: var(--ak-blue);
}

.ak-program-fact-icon .bi { width: 18px; height: 18px; }
.ak-program-buy-note { margin: -8px 0 0; color: var(--ak-text-500); font-size: var(--ak-fs-ui); line-height: 1.6; text-align: center; }
.ak-program-buy-note > .bi { width: 14px; height: 14px; margin-right: 6px; color: var(--ak-success); vertical-align: -2px; }

.ak-program-about { grid-area: about; }
.ak-program-about-title { margin: 0 0 16px; color: var(--ak-navy-900); font-family: var(--ak-font-heading); font-size: var(--ak-fs-h4); font-weight: 600; }
.ak-program-about .ak-prose ul, .ak-program-about .ak-prose ol { margin: 0 0 16px; padding-left: calc(22px * var(--ak-d)); }

.ak-program-faq {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: calc(24px * var(--ak-d)) 0 0;
    padding: 14px 16px;
    border-radius: var(--ak-radius-field);
    background: var(--ak-gray-light);
    color: var(--ak-text-700);
    font-size: var(--ak-fs-ui);
    line-height: 1.6;
}

.ak-program-faq .bi { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--ak-blue); }

/* ---------- Sizes ---------- */
@media (max-width: 1199.98px) {
    .ak-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .ak-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ak-search { flex-basis: 100%; }
    .ak-catalog-meta { text-align: left; }

    /* Two columns: two cards, so no card sits alone on a row */
    .ak-course-grid-3 > :nth-child(3) { display: none; }

    .ak-catalog-toolbar .ak-search { max-width: none; }
    .ak-catalog-sort { margin-left: auto; }
    /* The filter takes the room its row leaves: next to Sırala it fills the gap, alone it spans the row */
    .ak-catalog-filter { flex: 1 1 auto; }

    /* Program page: cover, then price and the button, then the description */
    .ak-program-layout { grid-template-columns: 1fr; grid-template-areas: "cover" "buy" "about"; }
    .ak-program-buy { position: static; }
    .ak-program-cover .ak-cover { min-height: 170px; }
}

/* Phones: list rows, cover as a thumbnail on the left; the title and price sit next to it */
@media (max-width: 575.98px) {
    .ak-course-grid { grid-template-columns: 1fr; gap: 12px; }
    .ak-course-grid-3 > :nth-child(3) { display: flex; }
    .ak-course { flex-direction: row; }
    .ak-course > .ak-cover { flex: 0 0 100px; min-height: 0; padding: 10px; }
    .ak-course-body { min-width: 0; padding: 12px 14px; }
    .ak-course-title { margin-bottom: 10px; -webkit-line-clamp: 2; }
    .ak-course-foot { gap: 8px; padding-top: 10px; }
    .ak-course-actions .ak-btn { padding: 0 8px; }
    .ak-catalog-filter { display: flex; flex: 1 1 100%; flex-wrap: wrap; }
    .ak-catalog-filter button { flex: 1 1 auto; }
    .ak-catalog-sort { flex: 1 1 100%; margin-left: 0; }
    .ak-catalog-sort .ak-input { flex: 1 1 auto; min-width: 0; }
    .ak-program-cover .ak-cover { min-height: 120px; }
    .ak-cover { min-height: 116px; }
    .ak-search { min-width: 0; }
}

@media (hover: none) {
    .ak-course:hover { transform: none; box-shadow: var(--ak-shadow-card); }
    .ak-course:hover .ak-cover::before, .ak-course:hover .ak-cover-photo { transform: none; }
}

/*
    ---------- Eğitimlerim (panel) ----------
    One row per program: cover, name with dates and progress, actions.
    Desktop: actions on the right. Tablets: actions under the text. Phones: small cover, actions share the full row.
*/
/* Eğitimlerim tabs (ui.js [data-ak-tabs]) */
/* The tabs are alone on their row: they take all of it and share it evenly */
.ak-mine-tabs { display: grid; margin-bottom: 16px; }
.ak-mine-tabs button { padding: 0 16px; gap: 6px; }
.ak-mine-tabs button span { color: var(--ak-text-500); font-size: var(--ak-fs-label); font-weight: 500; font-variant-numeric: tabular-nums; }
.ak-mine-tabs button.is-active span { color: var(--ak-navy-900); }
.ak-mine-panel { animation: ak-fade-up var(--ak-duration-base) var(--ak-ease-out); }
/* An empty tab (panel.css .ak-empty: icon, title, hint) */
.ak-mine-none { margin: 0; padding: 28px 24px; border: 1px dashed var(--ak-line); border-radius: var(--ak-radius-card); background: var(--ak-white); }

/* Panel Anasayfa: counters in the page head, empty "continue" box */
.ak-dash-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: calc(32px * var(--ak-d)) 0 0; padding: 0; list-style: none; }
.ak-dash-stats a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 150px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--ak-radius-card);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ak-white);
    text-decoration: none;
    transition: background-color var(--ak-transition-hover), border-color var(--ak-transition-hover);
}
.ak-dash-stats a:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.12); color: var(--ak-white); text-decoration: none; }
.ak-dash-stats b { font-family: var(--ak-font-heading); font-size: var(--ak-fs-h3); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ak-dash-stats span { color: rgba(255, 255, 255, 0.78); font-size: var(--ak-fs-label); }

.ak-dash-empty { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px dashed var(--ak-line); border-radius: var(--ak-radius-card); background: var(--ak-white); }
.ak-dash-empty .ak-catalog-empty-icon { flex-shrink: 0; margin: 0; }
.ak-dash-empty h3 { margin: 0 0 2px; color: var(--ak-text-900); font-size: var(--ak-fs-h4); }
.ak-dash-empty p { margin: 0; color: var(--ak-text-500); font-size: var(--ak-fs-ui); }
.ak-dash-empty .ak-btn { flex-shrink: 0; margin-left: auto; }
.ak-dash-mine .ak-catalog-head { margin-bottom: 16px; }
.ak-dash-mine + .ak-section { padding-top: 0; }

.ak-mine-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; color: var(--ak-navy-900); font-size: var(--ak-fs-h3); }
.ak-mine-title span { color: var(--ak-text-500); font-family: var(--ak-font-body); font-size: var(--ak-fs-body); font-weight: 500; }
.ak-mine-list + .ak-mine-title { margin-top: calc(40px * var(--ak-d)); }

.ak-mine-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

.ak-mine {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(24px * var(--ak-d));
    padding: 10px calc(24px * var(--ak-d)) 10px 10px;
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius-card);
    background: var(--ak-white);
    box-shadow: var(--ak-shadow-card);
    transition: border-color var(--ak-duration-base) var(--ak-ease-standard), box-shadow var(--ak-duration-base) var(--ak-ease-standard);
}

.ak-mine:hover { border-color: #C6CFDD; box-shadow: var(--ak-shadow-card-hover); }

.ak-mine > .ak-cover { align-self: stretch; min-height: 96px; padding: 12px 14px; border-radius: calc(var(--ak-radius-card) - 4px); }
.ak-mine.is-ended > .ak-cover { filter: grayscale(1); opacity: 0.7; }

.ak-mine-body { min-width: 0; }
.ak-mine-name { margin: 0 0 6px; color: var(--ak-text-900); font-family: var(--ak-font-body); font-size: var(--ak-fs-md); font-weight: 600; line-height: 1.4; }

.ak-mine-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 10px; color: var(--ak-text-500); font-size: var(--ak-fs-label); }
.ak-mine-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.ak-mine-meta .bi { width: 14px; height: 14px; }
.ak-mine-meta .is-soon { color: var(--ak-warning); font-weight: 600; }
.ak-mine-free { padding: 1px 8px; border-radius: var(--ak-radius-pill); background: var(--ak-success-50); color: var(--ak-success); font-weight: 600; }

.ak-mine .ak-progress { max-width: 360px; }
/* Completed, but the certificate time is over (Views/Shared/_MyProgramRow.cshtml) */
.ak-mine-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: var(--ak-text-500); font-size: var(--ak-fs-label); line-height: 1.5; }
.ak-mine-note .bi { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; }
.ak-mine-actions { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.ak-mine.no-actions { grid-template-columns: 168px minmax(0, 1fr); }

/* Ended programs are history: a short row with a small cover */
.ak-mine.is-ended { grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; }
.ak-mine.is-ended.no-actions { grid-template-columns: 112px minmax(0, 1fr); }
.ak-mine.is-ended > .ak-cover { min-height: 64px; padding: 8px 10px; }
.ak-mine.is-ended .ak-mine-name { margin-bottom: 2px; font-size: var(--ak-fs-body); }
.ak-mine.is-ended .ak-mine-meta { margin-bottom: 0; }
.ak-mine.is-ended .ak-progress { margin-top: 8px; }

@media (max-width: 991.98px) {
    .ak-mine, .ak-mine.no-actions { grid-template-columns: 132px minmax(0, 1fr); align-items: start; padding-right: 16px; }
    .ak-mine-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .ak-mine.is-ended, .ak-mine.is-ended.no-actions { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
}

@media (max-width: 767.98px) {
    .ak-dash-empty { flex-wrap: wrap; }
    .ak-dash-empty > div { flex: 1 1 0; min-width: 0; }
    .ak-dash-empty .ak-btn { flex: 1 1 100%; margin-left: 0; }
}

@media (max-width: 575.98px) {
    .ak-mine, .ak-mine.no-actions { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px; }
    .ak-mine > .ak-cover { min-height: 84px; padding: 8px; }
    .ak-mine-meta { gap: 2px 12px; }
    .ak-mine .ak-progress { max-width: none; }
    .ak-mine-actions { grid-column: 1 / -1; }
    .ak-mine-actions .ak-btn { flex: 1 1 0; }
    .ak-mine.is-ended, .ak-mine.is-ended.no-actions { grid-template-columns: 64px minmax(0, 1fr); }
    .ak-mine-tabs button { padding: 0 8px; }
    .ak-dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .ak-dash-stats a { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 8px 10px; }
    .ak-mine.is-ended > .ak-cover { min-height: 56px; padding: 6px; }
}