/* ============================================================
   Cumhuriyet Koşusu hub — hero varyantı 2 (/cumhuriyet-2)
   Bitiş direğini geçen çizgisel safkan Arap atı; direk aynı zamanda
   dalgalanan bayrağın göndeği. Yalnız hero değişir; sayfanın geri
   kalanı cumhuriyet.css ile aynıdır. Bu dosya yalnız varyantta yüklenir.
   Çizgi dili: ince beyaz hairline (non-scaling), dolgu yalnız ay-yıldızda.
   Hareket: çizgiler açılışta çizilir (CSS); bayrak kumaşı partial içindeki
   küçük betikle dalgalanır (requestAnimationFrame). prefers-reduced-motion:
   bayrak durgun kalır.
   ============================================================ */

/* ---------- Hero düzeni ---------- */
.cm-variant-2 .cm-hero-art {
    width: min(54vw, 940px, calc((100svh - 300px) * 1.42)); right: var(--cm-gutter); top: 50%;
    transform: translateY(-50%);
}

/* ---------- Çizgi sınıfları ---------- */
.cm-art2 { display: block; width: 100%; height: auto; overflow: visible; }
.cm-art2 .ln {
    stroke: var(--cm-white); stroke-width: 1; vector-effect: non-scaling-stroke;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: cm2-draw 1.4s var(--cm-ease) forwards; animation-delay: var(--d, 0s);
}
.cm-art2 .c1 { stroke-width: 1.6; }
.cm-art2 .c2 { stroke-width: 1.1; stroke: rgba(255, 255, 255, .74); }
.cm-art2 .c3 { stroke-width: 1; stroke: rgba(255, 255, 255, .82); }
.cm-art2-guides .ln { stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
.cm-art2 .ln.dash { stroke-dasharray: .004 .004; stroke-dashoffset: 0; opacity: 0; animation: cm2-fade .8s ease forwards .3s; }
.cm-art2 .fl-out { stroke-width: 1.4; animation-duration: 1.8s; }
.cm-art2 .fl-fold { stroke: rgba(255, 255, 255, .38); }
.cm-art2 .fl-cres, .cm-art2 .fl-star { fill: var(--cm-white); opacity: 0; animation: cm2-fade 1s ease forwards 1.4s; }
.cm-art2-labels text { fill: rgba(255, 255, 255, .72); font: 500 10.5px var(--cm-sans); letter-spacing: .08em; opacity: 0; animation: cm2-fade .8s ease forwards 2.4s; }
@keyframes cm2-draw { to { stroke-dashoffset: 0; } }
@keyframes cm2-fade { to { opacity: 1; } }

/* ---------- Bayrak (2026-10-26): kumaş dolgulu, şerit gölgeli; dalga partial içindeki betikle ---------- */
.cm-art2 .cm2f-cloth { fill: #e0193a; opacity: 0; animation: cm2-fade 1s ease forwards 1.1s; }
.cm-art2 .cm2f-emblem { fill: var(--cm-white); opacity: 0; animation: cm2-fade 1s ease forwards 1.4s; }
.cm-art2 .cm2f-shade { opacity: 0; animation: cm2-fade 1s ease forwards 1.4s; }
.cm-art2 .cm2f-edge { fill: none; stroke-width: 1.4; animation-duration: 1.8s; }

/* ---------- At: Muybridge'in 11 karesi sırayla (steps); 1. kare önce kendini çizer ----------
   Dolgu zemin kırmızısı: at, direği ve zemin çizgisini örter (mürekkep gibi). --cm2-stride = bir adım süresi. */
.cm-art2 { --cm2-stride: 1.1s; --cm2-start: 3s; }
.cm-art2 .hf {
    stroke: var(--cm-white); stroke-width: 1.5; vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round;
    fill: var(--cm-red); fill-opacity: 0; opacity: 0;
    animation-name: cm2-gallop, cm2-fillin;
    animation-duration: var(--cm2-stride), .4s;
    animation-timing-function: steps(1, end), linear;
    animation-iteration-count: infinite, 1;
    animation-fill-mode: none, forwards;
    animation-delay: calc(var(--cm2-start) + var(--k) * var(--cm2-stride) / 11), 2.6s;
}
.cm-art2 .hf-first {
    opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1;
    animation-name: cm2-draw, cm2-gallop, cm2-fillin;
    animation-duration: 1.7s, var(--cm2-stride), .4s;
    animation-timing-function: var(--cm-ease), steps(1, end), linear;
    animation-iteration-count: 1, infinite, 1;
    animation-fill-mode: forwards, none, forwards;
    animation-delay: .9s, var(--cm2-start), 2.6s;
}
@keyframes cm2-gallop { 0% { opacity: 1; } 9.0909% { opacity: 0; } 100% { opacity: 0; } }
@keyframes cm2-fillin { to { fill-opacity: 1; } }
.cm-art2-credit { margin: 6px 0 0; text-align: right; font: 400 11.5px/1.4 var(--cm-sans); color: var(--cm-on-red); letter-spacing: .01em; }
.cm-art2-credit i { font-style: italic; }

/* ---------- Dar masaüstü / tablet: at başlık paragrafına değmesin ---------- */
@media (max-width: 1280px) and (min-width: 861px) {
    .cm-variant-2 .cm-hero-art { width: min(46vw, calc((100svh - 300px) * 1.42)); transform: translateY(-56%); }
}
@media (max-width: 1100px) and (min-width: 861px) {
    .cm-variant-2 .cm-hero-art { width: min(42vw, calc((100svh - 300px) * 1.42)); }
}

/* ---------- Çok geniş ekran (2560): at, içerik sütununun sağ kenarına bağlı; metinle aynı hizada ---------- */
@media (min-width: 2300px) {
    .cm-variant-2 .cm-hero-art { right: calc((100% - var(--cm-wrap)) / 2 - 260px); width: min(1000px, calc((100svh - 300px) * 1.42)); }
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
    .cm-variant-2 .cm-hero { padding-top: var(--cm-header-h); }
    .cm-variant-2 .cm-hero-art {
        position: relative; z-index: 0; opacity: 1;
        width: 108vw; right: auto; left: -8vw; top: auto; transform: none;
        margin: 30px 0 0;
    }
    .cm-variant-2 .cm-hero-art .cm-art2-labels { display: none; }
    .cm-variant-2 .cm-art2-credit { margin: 2px var(--cm-gutter) 0 0; padding-left: 8vw; font-size: 11px; }
    .cm-variant-2 .cm-hero-inner { padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-art2 .ln, .cm-art2 .ln.dash, .cm-art2 .cm2f-cloth, .cm-art2 .cm2f-emblem, .cm-art2 .cm2f-shade, .cm-art2-labels text { animation: none; stroke-dashoffset: 0; opacity: 1; }
    .cm-art2 .hf { animation: none; opacity: 0; fill-opacity: 1; stroke-dashoffset: 0; }
    .cm-art2 .hf-still { opacity: 1; }
}