/* ============================================================
   23 Nisan Ulusal Egemenlik ve Çocuk Bayramı
   Sadece 23 Nisan'da görünür (blade tarafında kontrol)
   ============================================================ */

/* ---------- HEADER FLAG (logo yanına iliştiriliyor) ---------- */
.april23-header-flag {
    display: inline-block;
    width: 38px;
    height: 26px;
    border-radius: 2px;
    overflow: hidden;
    margin-left: .65rem;
    flex-shrink: 0;
    transform-origin: left center;
    animation: april23-wave 2.4s ease-in-out infinite;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
    cursor: default;
}
.april23-header-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes april23-wave {
    0%, 100% { transform: rotate(-5deg) skewY(-2deg); }
    50%      { transform: rotate(5deg)  skewY(2deg); }
}

/* ---------- FLOATING BALLOONS ---------- */
.april23-balloons {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9998;
}
.april23-balloon {
    position: absolute;
    bottom: -80px;
    width: 30px;
    height: 40px;
    border-radius: 50% 50% 48% 48%;
    animation: april23-float linear infinite;
    opacity: 0;
    will-change: transform, opacity;
}
.april23-balloon::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .45);
    transform: translateX(-50%);
}
.april23-balloon::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 6px;
    height: 5px;
    background: inherit;
    transform: translateX(-50%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.april23-balloon-0 { background: radial-gradient(circle at 30% 25%, #ff7b7b, #E30A17); }
.april23-balloon-1 { background: radial-gradient(circle at 30% 25%, #ffffff, #e8e8e8); }
.april23-balloon-2 { background: radial-gradient(circle at 30% 25%, #ffd166, #f1a208); }
.april23-balloon-3 { background: radial-gradient(circle at 30% 25%, #84d2f6, #3a86ff); }

@keyframes april23-float {
    0%   { transform: translateY(0) translateX(0) rotate(0);     opacity: 0; }
    10%  { opacity: .85; }
    50%  { transform: translateY(-55vh) translateX(28px) rotate(6deg); }
    90%  { opacity: .85; }
    100% { transform: translateY(-115vh) translateX(-36px) rotate(-8deg); opacity: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .april23-header-flag { width: 28px; height: 19px; margin-left: .5rem; }
    .april23-balloon { width: 24px; height: 32px; }
}

/* Reduced motion — animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
    .april23-header-flag,
    .april23-balloon {
        animation: none !important;
    }
}