/* Countdown pages (/yks/, /ramazan-bayrami/, ...) and the hub /geri-sayim/, built by scripts/build-countdown-pages.py.
   They reuse the home page's language from home.css (header pill, buttons, glow, reveal, FAQ); this file adds the
   countdown pieces. Every animation is off under Reduce Motion. */

/* Page accent follows the template's band: red for holidays, blue for exams and school. */
.cd-red { --accent: #C8201A; --accent-text: #A31A15; --accent-2: #E9A23B; }
.cd-blue { --accent: #2D5BA8; --accent-text: #24498A; --accent-2: #4FB3C9; }
@media (prefers-color-scheme: dark) {
  .cd-red { --accent: #E5483F; --accent-text: #F07A72; --accent-on: #15130F; }
  .cd-blue { --accent: #5B8DE0; --accent-text: #8FB3EE; --accent-on: #15130F; }
}
.cd-page { --band: var(--accent); --band-text: var(--accent-text); }
.cd-page .hero-glow span:nth-child(1) { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.cd-page .hero-glow span:nth-child(2) { background: color-mix(in srgb, var(--accent-2) 40%, transparent); }
.cd-page .title em, .cd-page h1 em { font-style: normal; color: var(--accent); }
.cd-narrow { max-width: 860px; }
.cd-small { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.cd-page .btn svg { width: 20px; height: 20px; }

/* Hero */
.cd-hero { position: relative; overflow: hidden; padding: 124px 0 64px; }
.cd-hero h1 { font-size: clamp(44px, 7.4vw, 88px); line-height: 1; margin-bottom: 22px; }
.cd-hero .lead strong { color: var(--ink); }
.cd-hero-grid { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
.cd-stage { display: grid; justify-items: center; gap: 18px; }
/* Phones: the leaf sits right under the question, above the fold. */
@media (max-width: 899px) {
  .cd-hero-grid { gap: 0; }
  .cd-hero-copy { display: contents; }
  .cd-hero-copy .pill { justify-self: start; }
  .cd-hero .cd-stage { order: 1; margin: 4px 0 36px; }
  .cd-hero .lead { order: 2; }
  .cd-hero .cta-row { order: 3; }
  .cd-hero .trust { order: 4; }
  .cd-stat { min-height: 120px; }
}
@media (min-width: 900px) {
  .cd-hero { padding: 150px 0 96px; min-height: min(92svh, 900px); display: flex; align-items: center; }
  .cd-hero-grid { grid-template-columns: 1.15fr .85fr; width: 100%; }
}

/* The tear-off calendar */
.cd-cal3d { width: min(86vw, 360px); perspective: 1200px; animation: cd-sway 7s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes cd-sway { 50% { transform: rotate(-1.2deg); } }
.cd-rings { display: flex; justify-content: center; gap: 130px; height: 18px; position: relative; z-index: 5; margin-bottom: -9px; }
.cd-rings span { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(#8A8378, #4C473F); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .3); }
.cd-leaves { position: relative; display: grid; cursor: pointer; border-radius: 10px 10px 3px 3px; outline-offset: 6px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.cd-leaf {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--paper); border-top: 16px solid var(--accent); border-radius: 10px 10px 3px 3px;
  padding: 24px 24px 22px; box-shadow: var(--leaf-shadow); transform-origin: 10% 0; will-change: transform;
}
.cd-leaf-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--ink-soft); }
.cd-leaf-title { margin-top: 10px; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.cd-leaf-value {
  font: 700 clamp(112px, 30vw, 172px)/.95 "Oswald", "Arial Narrow", sans-serif; letter-spacing: -.03em;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 4px;
}
.cd-today .cd-leaf-value { font-size: clamp(80px, 20vw, 120px); }
.cd-leaf-unit { font: 600 21px/1.5 "Oswald", "Arial Narrow", sans-serif; letter-spacing: .14em; }
.cd-leaf-note { margin-top: 6px; font-size: 14px; color: var(--ink-soft); }
.cd-leaf.torn { animation: cd-tear 1s cubic-bezier(.55, 0, .75, .2) forwards; pointer-events: none; z-index: 3; }
@keyframes cd-tear {
  0% { transform: none; }
  20% { transform: rotate(-8deg) translate(-4px, 8px); }
  100% { transform: rotate(-36deg) translate(-70px, 140%); opacity: 0; }
}
.cd-leaf.enter .cd-leaf-value { animation: pop .6s var(--spring); }
.cd-stack {
  height: 18px; margin: 0 5px; border-radius: 0 0 5px 5px;
  background: repeating-linear-gradient(var(--paper) 0 2px, var(--stack) 2px 3px);
  box-shadow: var(--leaf-shadow);
}
.cd-hint {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
}
.cd-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: cd-blink 1.6s ease-in-out infinite; }
@keyframes cd-blink { 50% { opacity: .25; } }

/* Live clock */
.cd-clock-sec {
  position: relative; overflow: hidden; margin: 0 8px; border-radius: 40px; padding: 96px 0;
  background: var(--night); color: var(--on-night);
}
.cd-clock-sec::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 120%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%);
  animation: drift 16s ease-in-out infinite alternate;
}
.cd-clock-sec .wrap { position: relative; }
.cd-clock-sec .eyebrow { color: var(--on-night-soft); }
.cd-clock-sec .title em { color: color-mix(in srgb, var(--accent) 70%, white); }
.cd-clock { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.cd-clock div {
  position: relative; overflow: hidden; border-radius: 24px; padding: 22px 20px 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.cd-clock div::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .35); }
.cd-clock b { display: block; font: 700 clamp(56px, 12vw, 120px)/1 "Oswald", "Arial Narrow", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cd-clock b.tick { animation: cd-flip .45s var(--out); }
@keyframes cd-flip { from { transform: translateY(-18%) scaleY(.85); opacity: .3; } }
.cd-clock span { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-soft); }
.cd-clock-note { margin-top: 20px; color: var(--on-night-soft); font-size: 15px; }
@media (min-width: 760px) { .cd-clock { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 900px) { .cd-clock-sec { margin: 0 16px; padding: 120px 0; } }

/* Bento */
.cd-bento { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.cd-tile {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 24px; margin: 0;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--border);
}
.cd-tile h3 { font-size: 22px; margin-bottom: 14px; }
.cd-tile-cal, .cd-tile-dots, .cd-facts, .cd-tile-wait { grid-column: 1 / -1; }
.cd-stat { display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; }
.cd-stat b { font: 700 clamp(36px, 5vw, 52px)/1 "Oswald", "Arial Narrow", sans-serif; font-variant-numeric: tabular-nums; color: var(--accent); }
.cd-stat span { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.cd-stat::before {
  content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent); transition: transform .6s var(--out);
}
.cd-stat:hover::before { transform: scale(1.5); }
@media (min-width: 900px) {
  .cd-bento { grid-template-columns: repeat(4, 1fr); }
  .cd-tile-cal { grid-column: span 2; grid-row: span 2; }
  .cd-tile-dots { grid-column: span 4; }
}

/* Month grid */
.cd-cal + .cd-cal { margin-top: 18px; }
.cd-cal-title { font: 600 15px/1.4 "Oswald", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.cd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cd-cal-grid b { font-size: 12px; font-weight: 700; color: var(--ink-soft); padding-bottom: 4px; }
.cd-cal-grid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; }
.cd-cal-grid .is-weekend { color: var(--ink-soft); }
.cd-cal-grid .is-holiday { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.cd-cal-grid .is-eve { background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--accent) 22%, transparent) 50%); }
.cd-cal-grid .is-target { background: var(--accent); color: var(--accent-on, #FFFDF7); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.cd-cal-grid .is-target::after { content: ""; position: absolute; inset: -4px; border-radius: 13px; border: 2px solid var(--accent); animation: ping 2s var(--out) infinite; }
.js .cd-tile-cal:not(.in) .cd-cal-grid span { opacity: 0; transform: scale(.6); }
.cd-cal-grid span { transition: opacity .4s var(--out), transform .5s var(--spring); transition-delay: calc(var(--i, 0) * 14ms + 200ms); }
.cd-legend { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-soft); }
.cd-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cd-legend i { width: 14px; height: 14px; border-radius: 4px; }
.cd-legend .is-target { background: var(--accent); }
.cd-legend .is-holiday { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cd-legend .is-eve { background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--accent) 35%, transparent) 50%); box-shadow: inset 0 0 0 1px var(--border); }

/* Leaves ahead */
.cd-tile-dots p { color: var(--ink-soft); font-size: 15px; margin: -6px 0 18px; }
.cd-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-dots i { width: 10px; height: 13px; border-radius: 2px 2px 1px 1px; background: color-mix(in srgb, var(--accent) 30%, var(--paper)); border-top: 3px solid var(--accent); }
.cd-dots i.we { background: color-mix(in srgb, var(--accent) 60%, var(--paper)); }
.cd-dots i.last { background: var(--accent); transform: scale(1.4); margin: 0 4px; }
@media (min-width: 900px) { .cd-dots { gap: 6px; } .cd-dots i { width: 13px; height: 17px; } }
.cd-dots i.more { width: auto; height: auto; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.js .cd-tile-dots:not(.in) .cd-dots i { opacity: 0; transform: translateY(-8px) rotate(-10deg); }
.cd-dots i { transition: opacity .3s var(--out), transform .5s var(--spring); transition-delay: calc(var(--i, 0) * 4ms); }

/* Facts */
.cd-facts { display: grid; gap: 0; padding: 8px 24px; }
.cd-facts div { display: grid; gap: 2px 24px; padding: 14px 0; border-top: 1px solid var(--border); }
.cd-facts div:first-child { border-top: 0; }
.cd-facts dt { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.cd-facts dd { margin: 0; font-weight: 600; }
@media (min-width: 700px) { .cd-facts div { grid-template-columns: 160px 1fr; } }

/* Waiting for a date */
.cd-tile-wait { padding: 32px; display: grid; gap: 10px; }
.cd-tile-wait p { color: var(--ink-soft); max-width: 40em; }
.cd-wait-mark { font: 700 96px/1 "Oswald", sans-serif; color: var(--accent); animation: cd-bob 3s ease-in-out infinite; }
@keyframes cd-bob { 50% { transform: translateY(-8px) rotate(6deg); } }

/* App */
.cd-app { padding: 96px 0; position: relative; }
.cd-app-grid { display: grid; gap: 48px; align-items: center; }
.cd-phone { justify-self: center; transform: rotate(4deg); }
@media (min-width: 900px) { .cd-app-grid { grid-template-columns: 1.2fr .8fr; } }

/* Mini leaves: the related rail and the hub grid */
.cd-mini {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 26px 20px 18px; border-radius: 18px 18px 8px 8px; background: var(--paper); color: var(--ink); text-decoration: none;
  border-top: 10px solid var(--accent); box-shadow: var(--leaf-shadow);
  transition: transform .45s var(--spring), box-shadow .3s var(--out);
}
.cd-mini:hover { transform: translateY(-6px) rotate(-1deg); }
.cd-mini-rings { position: absolute; top: -16px; left: 0; right: 0; display: flex; justify-content: center; gap: 64px; }
.cd-mini-rings i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-soft); }
.cd-mini-cat { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.cd-mini-title { font-weight: 700; font-size: 17px; }
.cd-mini-value { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.cd-mini-value b { font: 700 52px/1 "Oswald", "Arial Narrow", sans-serif; font-variant-numeric: tabular-nums; color: var(--accent); }
.cd-mini-value small { font-weight: 600; color: var(--ink-soft); }
.cd-mini-date { font-size: 13px; color: var(--ink-soft); }

.cd-rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px max(16px, calc((100vw - 1120px) / 2 + 16px)) 32px;
  scrollbar-width: none;
}
.cd-rail::-webkit-scrollbar { display: none; }
.cd-rail .cd-mini { flex: none; width: 220px; scroll-snap-align: start; }

/* Hub */
.cd-next-label { font: 600 14px/1 "Oswald", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.cd-mini-hero { width: min(86vw, 340px); padding: 34px 28px 26px; border-top-width: 16px; animation: cd-sway 7s ease-in-out infinite; transform-origin: 50% 0; }
.cd-mini-hero .cd-mini-rings { top: -20px; gap: 120px; }
.cd-mini-hero .cd-mini-rings i { width: 16px; height: 16px; }
.cd-mini-hero .cd-mini-title { font-size: 24px; }
.cd-mini-hero .cd-mini-value b { font-size: clamp(96px, 26vw, 140px); }
.cd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.cd-chip {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600;
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color .25s var(--out), color .25s var(--out), transform .3s var(--spring);
}
.cd-chip:active { transform: scale(.95); }
.cd-chip[aria-pressed="true"] { background: var(--ink); color: var(--wall); box-shadow: none; }
.cd-grid { display: grid; gap: 34px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); padding-top: 14px; }
.cd-grid .cd-mini.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js .cd-tile-cal:not(.in) .cd-cal-grid span, .js .cd-tile-dots:not(.in) .cd-dots i { opacity: 1; transform: none; }
}