/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(marketing)/yillik-plan/[[...slug]]/yillik-plan.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
/* /yillik-plan — MEB yearly plans rendered as readable, printable, crawlable HTML.
   Everything is `yp-` prefixed so it cannot collide with the vendored Bootstrap
   or appie styles the marketing layout loads on every page.

   Surface strategy: the page sits on a soft tinted ground and every block of
   content is a white panel on top of it. An earlier pass had white content on a
   white page — technically clean, physically tiring to read down 42 weeks. */

.yp-page {
  --yp-red: #ff4245;
  --yp-red-soft: #fff1f1;
  --yp-navy: #0e1133;
  --yp-ink: #303a4d;
  --yp-muted: #6f7688;
  --yp-line: #e6e9f1;
  --yp-line-soft: #eef0f6;
  --yp-ground: #f4f6fa;
  --yp-tint: #f8f9fc;
  --yp-shadow: 0 1px 2px rgba(14, 17, 51, 0.04), 0 6px 18px rgba(14, 17, 51, 0.05);
  background: var(--yp-ground);
}

.yp-root {
  padding: 0 0 56px;
}

/* The site header turns sticky on scroll and then occupies the top 120px of the
   viewport (94px at rest, taller once the sticky class lands — measured, not
   assumed: an earlier 112px guess still tucked the target 8px under the bar).
   Anything an in-page link jumps to has to clear that. Two rules used to carry a
   90px margin and applied to only two selectors, so every other anchor in these
   sections (#uygulama, #program, the week jump nav, the section titles) landed
   behind the header. One rule for every id instead — scroll-margin only takes
   effect on the element actually being scrolled to, so a blanket [id] is safe. */
.yp-page [id] {
  scroll-margin-top: 136px;
}

.yp-container {
  max-width: 940px;
  margin: 0 auto;
  color: var(--yp-ink);
  font-size: 16px;
  line-height: 1.62;
}

/* ── Hero band ──────────────────────────────────────────────────
   Doubles as the surface the shared site header expects: that header is
   position:absolute with white nav everywhere else on the site, so giving this
   section a dark band keeps it consistent instead of overriding its colours. */

.yp-hero-band {
  background:
    radial-gradient(900px 320px at 88% -30%, rgba(255, 66, 69, 0.28), transparent 60%),
    linear-gradient(135deg, #171c44 0%, #0e1133 58%, #1a1240 100%);
  color: #fff;
  padding: 148px 0 92px;
}

.yp-hero-band .container {
  max-width: 940px;
}

.yp-hero-band h1 {
  color: #fff;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.yp-hero-band .yp-lead {
  color: rgba(255, 255, 255, 0.76);
  font-size: 16.5px;
  max-width: 720px;
  margin: 0;
}

.yp-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.yp-tag {
  display: inline-block;
  background: var(--yp-red);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
}

.yp-tag-quiet {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}

/* ── Breadcrumb (lives inside the dark band) ────────────────────── */

.yp-breadcrumb {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}

.yp-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.yp-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

.yp-breadcrumb-sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.3);
}

/* ── Stat tiles — lifted over the hem of the hero band ──────────── */

.yp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px;
  background: var(--yp-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--yp-shadow);
  margin: -52px 0 30px;
}

.yp-stat {
  background: #fff;
  padding: 15px 16px 16px;
}

.yp-stat dt {
  font-size: 12.5px;
  color: var(--yp-muted);
  font-weight: 500;
  margin: 0 0 3px;
}

.yp-stat dd {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  color: var(--yp-navy);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.yp-stat-hint {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--yp-muted);
}

/* ── Section titles ─────────────────────────────────────────────── */

.yp-section-title {
  margin: 40px 0 16px;
}

.yp-section-title h2 {
  position: relative;
  font-size: 21px;
  font-weight: 700;
  color: var(--yp-navy);
  margin: 0 0 4px;
  padding-left: 14px;
  letter-spacing: -0.01em;
}

.yp-section-title h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 2px;
  background: var(--yp-red);
}

.yp-section-title p {
  margin: 0;
  padding-left: 14px;
  font-size: 14px;
  color: var(--yp-muted);
}

.yp-section-title a {
  color: #2563eb;
  text-decoration: none;
}

/* ── Generic white panel ────────────────────────────────────────── */

.yp-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
  padding: 22px 24px;
}

/* ── "Bu hafta" box ─────────────────────────────────────────────── */

.yp-now {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
  border-left: 4px solid var(--yp-red);
  padding: 20px 24px;
  margin: 0 0 28px;
}

.yp-now h2 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--yp-red);
  font-weight: 700;
  margin: 0 0 10px;
}

.yp-now-week {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--yp-navy);
}

.yp-now-week a {
  color: var(--yp-navy);
  text-decoration: none;
  border-bottom: 2px solid #ffd3d4;
}

.yp-now-dates {
  font-size: 14px;
  font-weight: 500;
  color: var(--yp-muted);
}

.yp-now-topic {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 600;
  color: var(--yp-navy);
}

.yp-now-theme {
  margin: 0;
  font-size: 13px;
  color: var(--yp-muted);
}

.yp-now-outcomes {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 15px;
  color: #4a5468;
}

.yp-now-outcomes li {
  margin-bottom: 4px;
}

.yp-now-note {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--yp-muted);
}

.yp-now-closed {
  border-left-color: #aab2c4;
}

.yp-now-closed h2 {
  color: #5b6478;
}

.yp-now-closed p {
  margin: 0 0 8px;
  font-size: 15px;
}

.yp-now-closed p:last-child {
  margin-bottom: 0;
}

/* ── Search ─────────────────────────────────────────────────────── */

.yp-search {
  margin: 0 0 28px;
}

.yp-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.yp-search-field input {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 18px;
  border: 1px solid var(--yp-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--yp-shadow);
  font-size: 16px;
  color: var(--yp-ink);
  outline: none;
}

.yp-search-field input::placeholder {
  color: #a3a9b8;
}

/* WebKit adds its own clear affordance to type="search"; ours is the one that
   also resets state, so suppress the native twin rather than show two crosses. */
.yp-search-field input[type='search']::-webkit-search-cancel-button,
.yp-search-field input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.yp-search-field input:focus {
  border-color: var(--yp-red);
  box-shadow: 0 0 0 3px rgba(255, 66, 69, 0.12);
}

.yp-search-field button {
  position: absolute;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--yp-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.yp-search-field button:hover {
  background: var(--yp-tint);
  color: var(--yp-navy);
}

.yp-search-hint {
  margin: 10px 2px 0;
  font-size: 13.5px;
  color: var(--yp-muted);
}

.yp-search-results {
  margin-top: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
  overflow: hidden;
}

.yp-search-group + .yp-search-group {
  border-top: 1px solid var(--yp-line);
}

.yp-search-group h3 {
  margin: 0;
  padding: 12px 20px 8px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yp-muted);
  font-weight: 700;
}

.yp-search-group ul {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}

.yp-search-group a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.yp-search-group a:hover {
  background: var(--yp-tint);
  border-left-color: var(--yp-red);
  text-decoration: none;
}

.yp-search-primary {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--yp-navy);
}

.yp-search-secondary {
  display: block;
  font-size: 12.5px;
  color: var(--yp-muted);
  margin-top: 1px;
}

.yp-search-outcome {
  display: block;
  font-size: 13px;
  color: #55607a;
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--yp-line);
}

.yp-search-group .yp-search-hint {
  padding: 0 20px 10px;
  margin: 0;
}

@media print {
  .yp-search {
    display: none !important;
  }
}

/* ── Download panel ─────────────────────────────────────────────── */

.yp-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
  border-left: 4px solid var(--yp-navy);
  padding: 20px 24px;
  margin: 0 0 28px;
}

.yp-download-text {
  flex: 1 1 320px;
  min-width: 0;
}

.yp-download h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--yp-navy);
  margin: 0 0 5px;
}

.yp-download p {
  margin: 0;
  font-size: 14px;
  color: var(--yp-muted);
}

.yp-download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.yp-btn-outline {
  border: 1px solid var(--yp-line);
  color: var(--yp-navy);
  background: #fff;
}

.yp-btn-outline:hover {
  border-color: var(--yp-navy);
  color: var(--yp-navy);
  text-decoration: none;
}

@media print {
  .yp-download {
    display: none !important;
  }
}

/* ── CTA card ───────────────────────────────────────────────────── */

.yp-cta-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
  border-left: 4px solid var(--yp-navy);
  padding: 18px 24px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.yp-cta-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(14, 17, 51, 0.1);
}

.yp-cta-kicker {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--yp-red);
  font-weight: 700;
  margin-bottom: 5px;
}

.yp-cta-title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--yp-navy);
  margin-bottom: 3px;
}

.yp-cta-desc {
  display: block;
  font-size: 14px;
  color: var(--yp-muted);
}

/* ── Grade + type grids ─────────────────────────────────────────── */

.yp-grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}

.yp-grade-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--yp-shadow);
  padding: 16px 18px;
  text-decoration: none;
  border-top: 3px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.yp-grade-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-top-color: var(--yp-red);
}

.yp-grade-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--yp-navy);
}

.yp-grade-meta {
  display: block;
  font-size: 13px;
  color: var(--yp-muted);
  margin-top: 2px;
}

.yp-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 12px;
}

.yp-type-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--yp-shadow);
  padding: 17px 19px;
}

.yp-type-card h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--yp-navy);
  margin: 0 0 5px;
}

.yp-type-card p {
  margin: 0;
  font-size: 14px;
  color: var(--yp-muted);
}

/* ── Subject list ───────────────────────────────────────────────── */

.yp-subject-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 10px;
}

.yp-subject-list a {
  display: block;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--yp-shadow);
  padding: 13px 16px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: border-color 0.15s ease;
}

.yp-subject-list a:hover {
  border-left-color: var(--yp-red);
  text-decoration: none;
}

.yp-subject-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--yp-navy);
}

.yp-subject-meta {
  display: block;
  font-size: 12.5px;
  color: var(--yp-muted);
  margin-top: 2px;
}

/* ── Tables ─────────────────────────────────────────────────────── */

.yp-table-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
}

.yp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0;
}

.yp-table thead th {
  background: var(--yp-tint);
  text-align: left;
  font-size: 12.5px;
  color: var(--yp-muted);
  font-weight: 600;
  padding: 11px 16px;
  border-bottom: 1px solid var(--yp-line);
  white-space: nowrap;
}

.yp-table tbody th,
.yp-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--yp-line-soft);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}

.yp-table tbody tr:last-child th,
.yp-table tbody tr:last-child td {
  border-bottom: none;
}

.yp-table tbody th {
  font-weight: 600;
  color: var(--yp-navy);
}

/* Columns of numbers align; standalone stat values do not (see stat tiles). */
.yp-table .yp-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--yp-muted);
}

.yp-table a {
  color: var(--yp-navy);
  text-decoration: none;
}

.yp-table a:hover {
  color: var(--yp-red);
}

.yp-table-topics {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--yp-muted);
  margin-top: 3px;
}

/* ── Week jump nav ──────────────────────────────────────────────── */

.yp-jump {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--yp-shadow);
  padding: 13px 16px;
  margin: 0 0 18px;
}

.yp-jump-label {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--yp-muted);
  font-weight: 600;
  padding-top: 6px;
}

.yp-jump-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.yp-jump-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--yp-tint);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #4a5468;
  text-decoration: none;
}

.yp-jump-chip:hover {
  background: var(--yp-red-soft);
  color: var(--yp-red);
  text-decoration: none;
}

.yp-jump-chip.is-holiday {
  background: transparent;
  color: #aab2c4;
}

.yp-jump-chip.is-current {
  background: var(--yp-red);
  color: #fff;
}

/* ── Week groups ────────────────────────────────────────────────── */

.yp-weeks {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.yp-week-group {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
  overflow: hidden;
  scroll-margin-top: 90px;
}

.yp-week-group-head {
  padding: 16px 24px 14px;
  background: linear-gradient(180deg, var(--yp-tint) 0%, #fff 100%);
  border-bottom: 1px solid var(--yp-line);
}

.yp-week-group-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--yp-navy);
  margin: 0 0 3px;
  line-height: 1.35;
}

.yp-week-group-head p {
  margin: 0;
  font-size: 13px;
  color: var(--yp-muted);
}

.yp-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  margin: 0 8px;
  vertical-align: middle;
}

.yp-week-group-body {
  padding: 4px 0;
}

/* ── Week rows ──────────────────────────────────────────────────── */

.yp-week {
  padding: 18px 24px;
  border-top: 1px solid var(--yp-line-soft);
  scroll-margin-top: 90px;
}

.yp-week-group-body > .yp-week:first-child {
  border-top: none;
}

.yp-week.is-current {
  background: var(--yp-red-soft);
  box-shadow: inset 3px 0 0 var(--yp-red);
}

.yp-week.is-past .yp-week-topic {
  color: #55607a;
}

.yp-week-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.yp-week-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--yp-tint);
  color: #55607a;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.yp-week.is-current .yp-week-badge {
  background: var(--yp-red);
  color: #fff;
}

.yp-week-headings {
  flex: 1 1 auto;
  min-width: 0;
}

.yp-week-topic {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--yp-navy);
  line-height: 1.35;
}

/* A repeated topic stays readable but stops competing with the week that
   introduced it, so a multi-week unit reads as one block instead of four. */
.yp-week-topic.is-continued {
  font-weight: 500;
  color: #5e6880;
}

.yp-week-cont {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--yp-tint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #99a0b2;
  vertical-align: 2px;
}

.yp-week-dates {
  display: block;
  font-size: 13px;
  color: var(--yp-muted);
  margin-top: 1px;
}

.yp-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: auto;
}

.yp-badge-now {
  background: var(--yp-red);
  color: #fff;
}

.yp-badge-holiday {
  background: #eceff5;
  color: #5b6478;
}

.yp-week-body {
  padding-left: 40px;
}

.yp-week-block + .yp-week-block {
  margin-top: 12px;
}

.yp-week-block h4 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yp-muted);
  font-weight: 700;
  margin: 0 0 6px;
}

.yp-week-block-soft {
  background: var(--yp-tint);
  border-radius: 10px;
  padding: 12px 14px;
}

.yp-week-block.is-repeat .yp-outcomes {
  color: #8a90a1;
  font-size: 14px;
}

.yp-week-block.is-repeat .yp-outcomes li::marker {
  color: #d7dbe4;
}

/* The vendored appie CSS resets `ul { list-style: none }` site-wide, so every
   list in this section has to re-declare its marker explicitly. */
.yp-outcomes,
.yp-components,
.yp-now-outcomes,
.yp-app-list {
  list-style: disc outside;
}

.yp-outcomes li::marker,
.yp-components li::marker,
.yp-now-outcomes li::marker {
  color: #c2c8d6;
}

.yp-outcomes,
.yp-components {
  margin: 0;
  padding-left: 17px;
  font-size: 15px;
  color: #3d4759;
}

.yp-outcomes li,
.yp-components li {
  margin-bottom: 5px;
}

.yp-outcomes li:last-child,
.yp-components li:last-child {
  margin-bottom: 0;
}

.yp-components {
  color: #56607a;
  font-size: 14.5px;
}

/* Holiday weeks collapse to one quiet line — they carry no content. */
.yp-week.is-holiday {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--yp-tint);
}

.yp-week-holiday-name {
  font-size: 14.5px;
  font-weight: 600;
  color: #5b6478;
}

.yp-week.is-holiday .yp-week-dates {
  margin: 0 0 0 auto;
}

/* ── Chips ──────────────────────────────────────────────────────── */

.yp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--yp-shadow);
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--yp-navy);
  text-decoration: none;
}

.yp-chip:hover {
  color: var(--yp-red);
  text-decoration: none;
}

.yp-chip-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--yp-muted);
}

.yp-chip-more {
  background: var(--yp-navy);
  color: #fff;
}

.yp-chip-more:hover {
  color: #fff;
}

/* ── FAQ ────────────────────────────────────────────────────────── */

.yp-faq details {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--yp-shadow);
  margin-bottom: 8px;
}

.yp-faq summary {
  cursor: pointer;
  padding: 15px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--yp-navy);
  list-style: none;
}

.yp-faq summary::-webkit-details-marker {
  display: none;
}

.yp-faq summary::after {
  content: '+';
  float: right;
  color: var(--yp-red);
  font-weight: 700;
}

.yp-faq details[open] summary::after {
  content: '−';
}

.yp-faq-body {
  padding: 0 20px 16px;
  font-size: 15px;
  color: #4a5468;
}

.yp-faq-body p {
  margin: 0 0 8px;
}

.yp-faq-body p:last-child {
  margin-bottom: 0;
}

/* ── App section ────────────────────────────────────────────────── */

.yp-app {
  margin: 40px 0 0;
  padding: 26px 28px;
  border-radius: 16px;
  background:
    radial-gradient(700px 240px at 92% -40%, rgba(255, 66, 69, 0.22), transparent 62%),
    linear-gradient(135deg, #171c44 0%, #0e1133 60%, #1a1240 100%);
  color: rgba(255, 255, 255, 0.82);
}

.yp-app h2 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}

/* Colours are set per element, not inherited: the vendored `p { color:#505056 }`
   would otherwise beat inheritance and paint dark grey text on this navy panel. */
.yp-app-lead,
.yp-app p,
.yp-app li {
  color: rgba(255, 255, 255, 0.86);
}

.yp-app-lead {
  font-size: 15px;
  margin: 0 0 14px;
}

.yp-app-list {
  margin: 0 0 14px;
  padding-left: 19px;
  font-size: 15px;
}

.yp-app-list li {
  margin-bottom: 8px;
}

.yp-app-list li::marker {
  color: rgba(255, 255, 255, 0.4);
}

.yp-app-list strong {
  color: #fff;
}

.yp-app p.yp-app-note {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 18px;
}

.yp-app-note strong {
  color: rgba(255, 255, 255, 0.85);
}

.yp-app-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.yp-btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.yp-btn-primary {
  background: var(--yp-red);
  color: #fff;
}

.yp-btn-primary:hover {
  background: #ef3538;
  color: #fff;
  text-decoration: none;
}

.yp-btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

.yp-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  text-decoration: none;
}

/* ── Notes + small print ────────────────────────────────────────── */

.yp-note,
.yp-print-hint {
  font-size: 14px;
  color: var(--yp-muted);
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--yp-shadow);
  padding: 13px 18px;
  margin: 18px 0 0;
}

/* The disclaimer: present, readable, and the least loud thing on the page. */
.yp-source {
  margin: 26px 0 0;
  padding: 0 2px;
}

.yp-source p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: #8a90a1;
}

.yp-source strong {
  color: #6f7688;
  font-weight: 600;
}

.yp-source a {
  color: #8a90a1;
  text-decoration: underline;
}

.yp-source a:hover {
  color: var(--yp-red);
}

/* ── Download nudge ─────────────────────────────────────────────
   Non-modal by construction: no backdrop, no scroll lock, always dismissible,
   and anchored to a corner so the plan stays readable behind it. */

.yp-nudge {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 20px 22px 18px;
  border-radius: 16px;
  background:
    radial-gradient(520px 200px at 100% -30%, rgba(255, 66, 69, 0.25), transparent 60%),
    linear-gradient(135deg, #191e48 0%, #0e1133 60%, #1b1341 100%);
  box-shadow: 0 18px 48px rgba(14, 17, 51, 0.32);
  color: rgba(255, 255, 255, 0.82);
  animation: yp-nudge-in 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes yp-nudge-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yp-nudge {
    animation: none;
  }
}

.yp-nudge-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}

.yp-nudge-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.yp-nudge p.yp-nudge-title {
  margin: 0 22px 7px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

.yp-nudge p.yp-nudge-body {
  margin: 0 0 15px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.yp-nudge-body strong {
  color: rgba(255, 255, 255, 0.92);
}

.yp-nudge-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.yp-nudge-btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--yp-red, #ff4245);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.yp-nudge-btn:hover {
  background: #ef3538;
  color: #fff;
  text-decoration: none;
}

.yp-nudge-btn-alt {
  background: rgba(255, 255, 255, 0.12);
}

.yp-nudge-btn-alt:hover {
  background: rgba(255, 255, 255, 0.2);
}

.yp-nudge-later {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  cursor: pointer;
  padding: 6px 2px;
}

.yp-nudge-later:hover {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

@media (max-width: 575px) {
  .yp-nudge {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    padding: 18px 18px 16px;
  }
}

@media print {
  .yp-nudge {
    display: none !important;
  }
}

/* ── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .yp-hero-band {
    padding: 120px 0 84px;
  }

  .yp-hero-band h1 {
    font-size: 25px;
  }

  .yp-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .yp-stat dd {
    font-size: 20px;
  }

  .yp-week,
  .yp-week.is-holiday {
    padding-left: 16px;
    padding-right: 16px;
  }

  .yp-week-group-head {
    padding: 14px 16px 12px;
  }

  .yp-week-body {
    padding-left: 0;
  }

  .yp-badge {
    margin-left: 0;
  }

  .yp-jump {
    flex-direction: column;
    gap: 8px;
  }

  .yp-jump-label {
    padding-top: 0;
  }

  .yp-app {
    padding: 22px 18px;
  }
}

/* ── Print: a teacher pressing Ctrl+P gets the plan, not the site ── */

@media print {
  .appie-header-area,
  .appie-footer-area,
  .yp-jump,
  .yp-cta-card,
  .yp-app,
  .yp-faq,
  .yp-breadcrumb,
  .yp-now,
  .back-to-top {
    display: none !important;
  }

  .yp-page,
  .yp-hero-band {
    background: #fff !important;
    color: #000;
  }

  .yp-hero-band {
    padding: 0 0 12pt;
  }

  .yp-hero-band h1 {
    color: #000;
    font-size: 18pt;
  }

  .yp-hero-band .yp-lead,
  .yp-tag,
  .yp-tag-quiet {
    color: #333 !important;
    background: none !important;
    padding: 0;
  }

  .yp-root {
    padding: 0;
  }

  .yp-container {
    max-width: none;
    font-size: 10.5pt;
  }

  /* One compact band instead of a two-column grid that ate a third of page 1. */
  .yp-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18pt;
    margin-top: 0;
    box-shadow: none;
    border: 0;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-radius: 0;
    padding: 6pt 0;
  }

  .yp-stats .yp-stat {
    padding: 0;
  }

  .yp-stat dt {
    display: inline;
    font-size: 8.5pt;
  }

  .yp-stat dd {
    display: inline;
    font-size: 9.5pt;
    margin-left: 4pt;
  }

  /* A 19-week unit cannot fit on one page, so only the individual week rows are
     kept whole; the group flows and its header refuses to be orphaned. */
  .yp-week {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .yp-week-group {
    break-inside: auto;
    box-shadow: none;
    border: 1px solid #bbb;
    margin-bottom: 10pt;
  }

  .yp-week-group-head {
    break-inside: avoid;
    break-after: avoid;
    background: none;
  }

  .yp-table a,
  .yp-week-group a {
    text-decoration: none;
    color: #000;
  }

  .yp-week.is-current {
    background: none;
    box-shadow: none;
  }

  a {
    text-decoration: none;
    color: #000;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/(marketing)/calisma-programi/[[...slug]]/calisma-programi.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
/* /calisma-programi and /konular.

   Layered on top of yillik-plan.css, which supplies the tokens, the dark hero
   band, the lifted stat strip and the panel surfaces. Only what is new to these
   two sections lives here, `cp-` prefixed so it cannot collide with the vendored
   Bootstrap/appie styles the marketing layout loads on every page.

   The vendored CSS has two traps this file has to answer explicitly:
   `ul { list-style: none }` (so topic bullets vanish) and a global
   `p { color: #505056 }` that beats inheritance on dark panels. */

.cp-page {
  --cp-accent: #2f6bff;
  --cp-good: #1f9d63;
  --cp-good-soft: #edfaf3;
  --cp-warn: #b7791f;
  --cp-warn-soft: #fdf6e7;
  --cp-bad: #c8322f;
  --cp-bad-soft: #fdf0f0;
}

/* ── Planner controls ──────────────────────────────────────────── */

.cp-planner {
  margin: 0 0 34px;
}

/* Three selects on one row, the day picker on its own full-width row below.
   An earlier auto-fit grid let the day picker span two tracks, which pushed the
   second date field onto a ragged third row. */
.cp-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  background: #fff;
  border: 1px solid var(--yp-line);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--yp-shadow);
}

.cp-control {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.cp-control-days {
  grid-column: 1 / -1;
  order: 2;
}

.cp-control label,
.cp-control .cp-control-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--yp-muted);
  text-transform: none;
}

.cp-control select,
.cp-control input[type='date'] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--yp-navy);
  background: var(--yp-tint);
  border: 1px solid var(--yp-line);
  border-radius: 9px;
  padding: 9px 11px;
  line-height: 1.3;
}

.cp-control select {
  background-image: linear-gradient(45deg, transparent 50%, var(--yp-muted) 50%),
    linear-gradient(135deg, var(--yp-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.cp-control select:focus,
.cp-control input[type='date']:focus {
  outline: none;
  border-color: var(--yp-red);
  box-shadow: 0 0 0 3px rgba(255, 66, 69, 0.13);
}

.cp-daypicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-day {
  min-width: 44px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--yp-muted);
  background: var(--yp-tint);
  border: 1px solid var(--yp-line);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.cp-day:hover {
  border-color: #cfd5e4;
  color: var(--yp-ink);
}

.cp-day-on {
  background: var(--yp-navy);
  border-color: var(--yp-navy);
  color: #fff;
}

.cp-deadline-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--yp-muted);
  background: var(--cp-warn-soft);
  border-left: 3px solid var(--cp-warn);
  border-radius: 0 8px 8px 0;
  padding: 9px 13px;
}

/* ── Verdict ───────────────────────────────────────────────────── */

.cp-verdict {
  margin: 16px 0 0;
  padding: 14px 17px;
  border-radius: 11px;
  font-size: 15px;
  line-height: 1.6;
  border: 1px solid transparent;
}

.cp-verdict strong {
  color: inherit;
}

.cp-verdict-fits {
  background: var(--cp-good-soft);
  border-color: #cdeddd;
  color: #14603e;
}

.cp-verdict-tight {
  background: var(--cp-warn-soft);
  border-color: #f0e0bc;
  color: #7a5410;
}

.cp-verdict-short {
  background: var(--cp-bad-soft);
  border-color: #f2cfce;
  color: #8f2321;
}

.cp-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 26px;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.14s, background 0.14s;
}

.cp-btn-primary {
  background: var(--yp-red);
  color: #fff;
}

.cp-btn-primary:hover {
  filter: brightness(0.94);
  color: #fff;
}

.cp-btn-ghost {
  background: #fff;
  border-color: var(--yp-line);
  color: var(--yp-navy);
}

.cp-btn-ghost:hover {
  border-color: #cfd5e4;
  color: var(--yp-navy);
}

.cp-empty {
  background: #fff;
  border: 1px dashed var(--yp-line);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  color: var(--yp-muted);
}

/* ── The calendar ──────────────────────────────────────────────── */

.cp-weeks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-week {
  list-style: none;
}

.cp-week > details {
  background: #fff;
  border: 1px solid var(--yp-line);
  border-radius: 13px;
  box-shadow: var(--yp-shadow);
  overflow: hidden;
}

.cp-week > details > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.cp-week > details > summary::-webkit-details-marker {
  display: none;
}

.cp-week > details[open] > summary {
  border-bottom: 1px solid var(--yp-line-soft);
}

.cp-week-no {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--yp-navy);
}

.cp-week-range {
  font-size: 13.5px;
  color: var(--yp-muted);
}

.cp-week-meta {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--yp-muted);
  background: var(--yp-tint);
  border-radius: 20px;
  padding: 3px 11px;
}

.cp-days {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: grid;
  gap: 6px;
}

.cp-day-card {
  list-style: none;
  border: 1px solid var(--yp-line-soft);
  border-radius: 10px;
  padding: 11px 13px;
  background: var(--yp-tint);
}

.cp-day-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 8px;
}

.cp-day-date {
  font-weight: 700;
  font-size: 14px;
  color: var(--yp-navy);
}

.cp-day-weekday {
  font-size: 12.5px;
  color: var(--yp-muted);
}

.cp-day-total {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--yp-muted);
}

.cp-blocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cp-block {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(84px, 118px) 1fr auto;
  grid-template-areas: 'subject topic minutes' 'subject unit minutes';
  align-items: baseline;
  gap: 0 12px;
  background: #fff;
  border: 1px solid var(--yp-line-soft);
  border-radius: 8px;
  padding: 8px 11px;
}

.cp-block-subject {
  grid-area: subject;
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--yp-red);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.cp-block-topic {
  grid-area: topic;
  font-size: 14.5px;
  color: var(--yp-navy);
  font-weight: 600;
}

.cp-block-part {
  display: inline-block;
  margin-left: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--yp-muted);
  background: var(--yp-tint);
  border-radius: 10px;
  padding: 1px 7px;
  vertical-align: 1px;
}

.cp-block-unit {
  grid-area: unit;
  font-size: 12.5px;
  color: var(--yp-muted);
}

.cp-block-minutes {
  grid-area: minutes;
  align-self: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--yp-muted);
  white-space: nowrap;
}

.cp-block-review {
  background: #fbfaf5;
  border-color: #efe9d8;
}

.cp-block-review .cp-block-subject {
  color: var(--cp-warn);
}

.cp-block-practice {
  background: #f6f8fd;
  border-color: #dfe6f5;
}

.cp-block-practice .cp-block-subject {
  color: var(--cp-accent);
}

.cp-day-final .cp-final-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--yp-muted);
}

.cp-day-final {
  background: #f7f8fc;
  border-style: dashed;
}

/* ── Composition table ─────────────────────────────────────────── */

.cp-table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--yp-line);
  border-radius: 13px;
  box-shadow: var(--yp-shadow);
  margin: 0 0 30px;
}

.cp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 520px;
}

.cp-table th,
.cp-table td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--yp-line-soft);
}

.cp-table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--yp-muted);
  background: var(--yp-tint);
}

.cp-table tbody th {
  font-weight: 600;
  color: var(--yp-navy);
}

.cp-table tbody th a {
  color: var(--yp-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 17, 51, 0.18);
}

.cp-table tbody th a:hover {
  color: var(--yp-red);
  border-bottom-color: var(--yp-red);
}

.cp-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp-table tfoot th,
.cp-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--yp-line);
  font-weight: 700;
  color: var(--yp-navy);
  background: var(--yp-tint);
}

/* ── Topic lists ───────────────────────────────────────────────── */

.cp-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 30px;
}

.cp-unit {
  background: #fff;
  border: 1px solid var(--yp-line);
  border-radius: 13px;
  box-shadow: var(--yp-shadow);
  padding: 16px 20px 18px;
}

.cp-unit h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--yp-navy);
  margin: 0 0 12px;
}

.cp-unit-source {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--yp-muted);
  background: var(--yp-tint);
  border-radius: 20px;
  padding: 3px 10px;
}

/* The vendored CSS kills list markers site-wide; restore them here. */
.cp-topics {
  list-style: decimal;
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cp-topics > li {
  list-style: decimal;
}

.cp-topic-name {
  font-weight: 600;
  color: var(--yp-navy);
  font-size: 15px;
}

.cp-outcomes {
  list-style: disc;
  margin: 6px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-outcomes > li {
  list-style: disc;
  font-size: 13.5px;
  color: var(--yp-muted);
  line-height: 1.55;
}

.cp-callout {
  background: var(--cp-warn-soft);
  border-left: 3px solid var(--cp-warn);
  border-radius: 0 9px 9px 0;
  padding: 12px 15px;
  color: #7a5410 !important;
  font-size: 14.5px;
}

/* ── Track cards + rails ───────────────────────────────────────── */

.cp-track-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 30px;
}

.cp-track-card {
  background: #fff;
  border: 1px solid var(--yp-line);
  border-radius: 13px;
  box-shadow: var(--yp-shadow);
  padding: 16px 18px;
}

.cp-track-card h3 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 16px;
  margin: 0 0 4px;
}

.cp-track-card h3 a {
  color: var(--yp-navy);
  text-decoration: none;
  font-weight: 700;
}

.cp-track-card h3 a:hover {
  color: var(--yp-red);
}

.cp-track-q {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--yp-red);
  background: var(--yp-red-soft);
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}

.cp-track-meta {
  font-size: 12.5px;
  color: var(--yp-muted) !important;
  margin: 0 0 10px;
}

.cp-track-units {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-track-units > li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--yp-ink);
  border-bottom: 1px dotted var(--yp-line-soft);
  padding-bottom: 3px;
}

.cp-track-unit-count {
  font-variant-numeric: tabular-nums;
  color: var(--yp-muted);
  font-size: 12px;
}

.cp-track-more {
  margin: 10px 0 0;
  font-size: 13px;
}

.cp-track-more a {
  color: var(--yp-red);
  text-decoration: none;
  font-weight: 600;
}

.cp-other-tracks,
.cp-hub-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.cp-other-tracks {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.cp-other-tracks > li,
.cp-hub-list > li {
  list-style: none;
}

.cp-other-tracks a,
.cp-hub-list a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #fff;
  border: 1px solid var(--yp-line);
  border-radius: 11px;
  padding: 13px 16px;
  text-decoration: none;
  color: var(--yp-navy);
  box-shadow: var(--yp-shadow);
  transition: border-color 0.14s, transform 0.14s;
}

.cp-other-tracks a:hover,
.cp-hub-list a:hover {
  border-color: #cfd5e4;
  transform: translateY(-1px);
  color: var(--yp-navy);
}

.cp-other-meta,
.cp-hub-meta {
  font-size: 12.5px;
  color: var(--yp-muted);
}

.cp-hub-name {
  font-weight: 700;
  font-size: 16px;
}

.cp-hub-intro {
  font-size: 13.5px;
  color: var(--yp-ink);
  margin-top: 3px;
}

.cp-hub-group {
  margin: 0 0 26px;
}

.cp-hub-group > h3,
.cp-rail-group > h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yp-muted);
  margin: 0 0 10px;
}

.cp-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 24px;
  background: #fff;
  border: 1px solid var(--yp-line);
  border-radius: 13px;
  box-shadow: var(--yp-shadow);
  padding: 20px 22px;
  margin: 0 0 30px;
}

.cp-rail-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cp-rail-group li {
  list-style: none;
  font-size: 14.5px;
}

.cp-rail-group a {
  color: var(--yp-navy);
  text-decoration: none;
}

.cp-rail-group a:hover {
  color: var(--yp-red);
}

.cp-rail-current {
  color: var(--yp-muted);
  font-weight: 600;
}

/* ── Prose ─────────────────────────────────────────────────────── */

.cp-prose {
  margin: 0 0 30px;
  font-size: 15.5px;
  line-height: 1.68;
}

.cp-prose p {
  color: var(--yp-ink) !important;
  margin: 0 0 12px;
}

.cp-prose ul {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cp-prose li {
  list-style: disc;
}

.cp-prose a {
  color: var(--yp-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 66, 69, 0.35);
}

/* ── App section ───────────────────────────────────────────────── */

.cp-app {
  background:
    radial-gradient(700px 260px at 92% -40%, rgba(255, 66, 69, 0.22), transparent 62%),
    linear-gradient(135deg, #171c44 0%, #0e1133 60%, #1a1240 100%);
  border-radius: 16px;
  padding: 32px 30px 30px;
  margin: 8px 0 34px;
  color: #fff;
}

.cp-app h2 {
  color: #fff;
  font-size: 23px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.28;
}

/* The vendored global `p { color: #505056 }` wins over inheritance here. */
.cp-app .cp-app-lead,
.cp-app .cp-app-note {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 15.5px;
  margin: 0 0 14px;
  max-width: 680px;
}

.cp-app .cp-app-lead strong {
  color: #fff;
}

.cp-app-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px 22px;
}

.cp-app-list > li {
  list-style: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  line-height: 1.58;
  padding-left: 15px;
  position: relative;
}

.cp-app-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yp-red);
}

.cp-app-list strong {
  color: #fff;
  display: block;
}

.cp-app .cp-app-note {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6) !important;
}

.cp-app-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cp-app-buttons .cp-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}

.cp-app-buttons .cp-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ── Source note (deliberately the quietest thing here) ────────── */

.cp-source {
  border-top: 1px solid var(--yp-line);
  padding: 18px 0 0;
  margin: 8px 0 0;
}

.cp-source p {
  font-size: 12.5px;
  line-height: 1.62;
  color: #8b93a5 !important;
  margin: 0;
}

.cp-source a {
  color: #8b93a5;
  text-decoration: underline;
}

/* ── Narrow screens ───────────────────────────────────────────── */

@media (max-width: 620px) {
  .cp-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-block {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'subject minutes' 'topic topic' 'unit unit';
    gap: 2px 10px;
  }

  .cp-app {
    padding: 26px 20px 24px;
  }

  .cp-app h2 {
    font-size: 20px;
  }
}

/* ── Print: the plan, nothing else ─────────────────────────────── */

@media print {
  .cp-page {
    background: #fff;
  }

  .yp-hero-band {
    background: #fff !important;
    color: #000 !important;
    padding: 0 0 12px !important;
  }

  .yp-hero-band h1 {
    color: #000 !important;
    font-size: 20pt;
  }

  .yp-hero-band .yp-lead,
  .yp-breadcrumb,
  .cp-controls,
  .cp-plan-actions,
  .cp-app,
  .cp-rail,
  .cp-track-cards,
  .cp-other-tracks,
  .yp-faq,
  .cp-source a {
    display: none !important;
  }

  .cp-verdict {
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* Every week must be printed, whether or not the reader expanded it. */
  .cp-week > details {
    box-shadow: none;
    border-color: #bbb;
    break-inside: auto;
  }

  .cp-week > details > summary {
    break-after: avoid;
  }

  .cp-weeks details:not([open]) > *:not(summary) {
    display: revert !important;
  }

  .cp-day-card {
    break-inside: avoid;
    background: #fff;
    border-color: #ccc;
  }

  .cp-block {
    border-color: #ddd;
  }

  .cp-unit {
    box-shadow: none;
    border-color: #bbb;
    break-inside: auto;
  }

  .cp-topics > li {
    break-inside: avoid;
  }
}

/* ── Koç ────────────────────────────────────────────────────────
   The cat is the same character the app uses. On the web it is always paired
   with a sentence — a decorative cat is a sticker, a cat next to a sentence is
   a speaker. */

.koc-cat {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  user-select: none;
}

.koc-say {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--yp-line);
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
  padding: 16px 20px;
  margin: 0 0 22px;
}

.koc-say-body {
  min-width: 0;
}

/* The vendored global `p { color: #505056 }` beats inheritance everywhere. */
.koc-say-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--yp-ink) !important;
}

.koc-say-body p + p {
  margin-top: 9px;
}

.koc-say-good {
  background: var(--cp-good-soft);
  border-color: #cdeddd;
}

.koc-say-warn {
  background: var(--cp-warn-soft);
  border-color: #f0e0bc;
}

.koc-say-warn .koc-say-body p {
  color: #7a5410 !important;
}

.koc-say-bad {
  background: var(--cp-bad-soft);
  border-color: #f2cfce;
}

.koc-say-bad .koc-say-body p {
  color: #8f2321 !important;
}

.koc-name {
  font-weight: 700;
  color: var(--yp-red);
}

/* Verdict now speaks with a cat beside it. */
.cp-verdict {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.cp-verdict > p {
  margin: 0;
  color: inherit !important;
  font-size: inherit;
  line-height: 1.6;
}

/* ── Today ─────────────────────────────────────────────────────
   Deliberately the loudest block between the controls and the calendar: it is
   the only part of the page that asks for an action today. */

.cp-today {
  background: linear-gradient(180deg, #fff 0%, var(--yp-tint) 100%);
  border: 1px solid var(--yp-line);
  border-left: 4px solid var(--yp-red);
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
  padding: 18px 22px 20px;
  margin: 16px 0 0;
}

.cp-today-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 13px;
}

.cp-today-kicker {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--yp-red) !important;
}

.cp-today-head h3 {
  margin: 1px 0 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--yp-navy);
}

.cp-today-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-today-list > li {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(90px, 140px) 1fr auto;
  align-items: baseline;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--yp-line-soft);
  border-radius: 9px;
  padding: 10px 13px;
}

.cp-today-subject {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--yp-red);
  overflow-wrap: anywhere;
}

.cp-today-topic {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--yp-navy);
}

.cp-today-minutes {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--yp-muted);
  white-space: nowrap;
}

.cp-today-note {
  margin: 0;
  font-size: 13.5px;
  color: var(--yp-muted) !important;
}

/* ── The nudge ─────────────────────────────────────────────────
   First version was a white card on a light-grey page full of white cards, and
   it genuinely vanished — the owner could not find it in a screenshot. Contrast
   is what fixes that, not volume: this is the same navy Koç already speaks from
   in the app section, so it reads as the character arriving rather than as an
   advert. The cat breaks the top edge for the same reason — a rectangle in the
   corner is furniture, a shape that overflows its own box is not.
   Bottom-right, above the page but never over the consent banner (which is a
   precondition for showing this at all). */

.koc-nudge {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  width: min(372px, calc(100vw - 32px));
  background:
    radial-gradient(520px 200px at 88% -30%, rgba(255, 66, 69, 0.34), transparent 62%),
    linear-gradient(135deg, #1b2150 0%, #0e1133 58%, #1d1445 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(14, 17, 51, 0.22), 0 26px 60px rgba(14, 17, 51, 0.34);
  padding: 20px 22px 17px;
  animation:
    koc-nudge-in 420ms cubic-bezier(0.16, 1.16, 0.28, 1) both,
    koc-nudge-attention 1.5s ease-out 460ms 3;
}

/* Three pulses, then silence. An animation that never stops is an advert. */
@keyframes koc-nudge-attention {
  0%,
  100% {
    box-shadow: 0 6px 16px rgba(14, 17, 51, 0.22), 0 26px 60px rgba(14, 17, 51, 0.34),
      0 0 0 0 rgba(255, 66, 69, 0);
  }
  35% {
    box-shadow: 0 6px 16px rgba(14, 17, 51, 0.22), 0 26px 60px rgba(14, 17, 51, 0.34),
      0 0 0 8px rgba(255, 66, 69, 0.22);
  }
}

@keyframes koc-nudge-in {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.94);
  }
}

.koc-nudge-closing {
  animation: koc-nudge-out 180ms ease-in both;
}

@keyframes koc-nudge-out {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

/* The cat lands a beat after the card, so the eye catches the movement even if
   it was elsewhere when the card arrived. */
.koc-nudge-cat {
  position: absolute;
  top: -34px;
  left: 16px;
  filter: drop-shadow(0 8px 14px rgba(14, 17, 51, 0.35));
  animation: koc-cat-pop 520ms cubic-bezier(0.18, 1.5, 0.3, 1) 120ms both;
}

@keyframes koc-cat-pop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .koc-nudge,
  .koc-nudge-closing,
  .koc-nudge-cat {
    animation: none;
  }
}

.koc-nudge-close {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 28px;
  height: 28px;
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.koc-nudge-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.koc-nudge-head {
  margin: 26px 0 9px;
  padding-right: 24px;
}

.koc-nudge-who {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #ff6d70 !important;
}

.koc-nudge-title {
  margin: 3px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.28;
  color: #fff !important;
}

.koc-nudge-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.8) !important;
}

.koc-nudge-soon {
  color: rgba(255, 255, 255, 0.52);
}

.koc-nudge-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 15px 0 11px;
}

.koc-nudge-cta {
  flex: 1 1 auto;
  text-align: center;
  background: var(--yp-red);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 11px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 66, 69, 0.4);
}

.koc-nudge-cta:hover {
  filter: brightness(1.06);
  color: #fff;
}

.koc-nudge-later {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 6px;
  cursor: pointer;
}

.koc-nudge-later:hover {
  color: #fff;
}

.koc-nudge-foot {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42) !important;
}

@media (max-width: 620px) {
  .koc-nudge {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }

  .koc-nudge-cat {
    width: 74px;
    height: 74px;
    top: -28px;
  }

  .cp-today-list > li {
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
  }

  .cp-today-subject {
    grid-column: 1 / -1;
  }
}

@media print {
  .koc-nudge,
  .koc-cat {
    display: none !important;
  }

  .cp-today {
    break-inside: avoid;
    background: #fff;
  }
}

/* Koç presenting the app section. The cat sits with the heading so the block
   reads as him speaking; a mascot parked in a corner would read as decoration. */
.cp-app-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.cp-app-head h2 {
  margin: 0;
}

.cp-app-cat {
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
}

@media (max-width: 620px) {
  .cp-app-head {
    gap: 13px;
    align-items: flex-start;
  }

  .cp-app-cat {
    width: 64px;
    height: 64px;
  }
}

/* The honest-limits paragraph. Set apart from the method list but deliberately
   not styled as a warning: it is study guidance that happens to also be a
   disclaimer, and a yellow box would make readers skip it as legalese. */
.cp-limits {
  margin: 18px 0 0;
  padding: 15px 18px;
  background: var(--yp-tint);
  border-left: 3px solid var(--yp-line);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--yp-muted) !important;
}

.cp-limits strong {
  color: var(--yp-ink);
}

/* Multi-paragraph source note; still the quietest block on the page. */
.cp-source p + p {
  margin-top: 9px;
}

.cp-source strong {
  color: #7d8496;
}

/* ── Plan composition ──────────────────────────────────────────
   The accountability block: the reader checks the weeks against these numbers
   instead of taking a paragraph's word for it. */

.cp-mix {
  background: #fff;
  border: 1px solid var(--yp-line);
  border-radius: 14px;
  box-shadow: var(--yp-shadow);
  padding: 18px 22px 16px;
  margin: 16px 0 0;
}

.cp-mix-head h3 {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 700;
  color: var(--yp-navy);
}

.cp-mix-head p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--yp-muted) !important;
}

.cp-mix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cp-mix-table th,
.cp-mix-table td {
  padding: 8px 10px 8px 0;
  text-align: left;
  border-bottom: 1px solid var(--yp-line-soft);
}

.cp-mix-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--yp-muted);
  border-bottom-color: var(--yp-line);
}

.cp-mix-table tbody th {
  font-weight: 600;
  color: var(--yp-navy);
}

.cp-mix-table tbody tr:last-child th,
.cp-mix-table tbody tr:last-child td {
  border-bottom: none;
}

.cp-mix-bar-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 130px;
}

.cp-mix-bar {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 4px;
  background: var(--yp-line-soft);
  overflow: hidden;
}

.cp-mix-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--yp-red);
}

.cp-mix-pct {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--yp-muted);
  min-width: 34px;
  text-align: right;
}

.cp-mix-foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--yp-muted) !important;
}

/* ── Weekly view ───────────────────────────────────────────────
   The default grain. A week answers "which subjects, how long, which topics". */

.cp-week-mix {
  display: flex;
  gap: 2px;
  flex: 0 0 84px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-left: auto;
}

.cp-week-mix-bar {
  display: block;
  background: var(--yp-red);
  opacity: 0.9;
  border-radius: 2px;
}

.cp-week-mix-bar:nth-child(2) { opacity: 0.72; }
.cp-week-mix-bar:nth-child(3) { opacity: 0.56; }
.cp-week-mix-bar:nth-child(4) { opacity: 0.42; }
.cp-week-mix-bar:nth-child(5) { opacity: 0.3; }
.cp-week-mix-bar:nth-child(6) { opacity: 0.2; }

.cp-week-mix + .cp-week-meta {
  margin-left: 12px;
}

.cp-week-subjects {
  list-style: none;
  margin: 0;
  padding: 6px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-wsubject {
  list-style: none;
  padding: 10px 12px;
  border-radius: 10px;
}

.cp-wsubject:nth-child(odd) {
  background: var(--yp-tint);
}

.cp-wsubject-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.cp-wsubject-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--yp-navy);
}

.cp-wsubject-minutes {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--yp-muted);
  white-space: nowrap;
}

.cp-wsubject-minutes em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.cp-wsubject-topics {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--yp-ink) !important;
}

.cp-wsubject-cont,
.cp-wsubject-drill {
  color: var(--yp-muted) !important;
}

.cp-week-final {
  margin: 0;
  padding: 14px 20px 16px;
  font-size: 14px;
  color: var(--yp-muted) !important;
}

@media (max-width: 620px) {
  .cp-week-mix {
    display: none;
  }

  .cp-mix-table thead th:nth-child(4),
  .cp-mix-table tbody td:nth-child(4) {
    display: none;
  }
}

@media print {
  .cp-mix {
    box-shadow: none;
    break-inside: avoid;
  }

  .cp-wsubject {
    break-inside: avoid;
  }
}

/* ── The exam's answer sheet, session by session ────────────────
   Separate from the plan's own table on purpose: one is the exam's shape, the
   other is the study's. Merging them is what produced a "Matematik · 80 soru"
   row under a name neither paper uses. */

.cp-exam {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 30px;
}

.cp-exam-session > h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--yp-navy);
}

.cp-exam-total {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--yp-red);
  background: var(--yp-red-soft);
  border-radius: 20px;
  padding: 3px 11px;
}

.cp-exam .cp-table-wrap {
  margin: 0;
}

.cp-exam-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--yp-muted) !important;
}

/* The plan table merges papers; the question column says which papers made the
   number, so "80" is never a figure the reader has to take on trust. */
.cp-mix-split {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--yp-muted);
  white-space: nowrap;
}

.cp-today-practice .cp-today-subject {
  color: var(--cp-accent);
}