/* ADAU THİK — Vətən teması: Zəfər Günü (rəsmi, təmkinli) */
:root{--vt-b:#00B5E2;--vt-r:#EF3340;--vt-g:#509E2F;--vt-navy:#071A3A;--vt-gold:#E9C46A}

/* üçrəngli zolaq — səhifənin ən yuxarısında və footer üstündə */
body.vt::before{content:"";display:block;height:6px;background:linear-gradient(180deg,var(--vt-b) 0 33.34%,var(--vt-r) 33.34% 66.67%,var(--vt-g) 66.67% 100%)}
body.vt .ftr{position:relative}
body.vt .ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--vt-b) 0 33.34%,var(--vt-r) 33.34% 66.67%,var(--vt-g) 66.67% 100%)}

/* Xarıbülbül */
.vt-xb{display:inline-block;width:26px;height:26px;flex:none}

/* ---------- başlığın altındakı Zəfər zolağı ---------- */
.vt-ribbon{background:linear-gradient(90deg,#061633,#0B2A5C 50%,#061633);color:#fff;border-bottom:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.vt-ribbon::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--vt-b) 0 33.34%,var(--vt-r) 33.34% 66.67%,var(--vt-g) 66.67% 100%)}
.vt-ribbon::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);animation:vtShine 7s ease-in-out infinite}
@keyframes vtShine{0%,55%{left:-40%}100%{left:120%}}
.vt-ribbon__in{display:flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding-top:8px;padding-bottom:11px;text-align:center}
.vt-ribbon__date{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--vt-gold)}
.vt-ribbon__sep{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5)}
.vt-ribbon__txt{font-family:var(--font-head);font-size:17px;font-weight:800;letter-spacing:.01em}
@media (max-width:640px){
  .vt-ribbon__in{flex-wrap:wrap;gap:4px 10px}
  .vt-ribbon__sep,.vt-ribbon__xb--r{display:none}
  .vt-ribbon__date{font-size:11px;width:100%;order:-1}
  .vt-ribbon__txt{font-size:15px}
}

/* ---------- loqonun yanında bayraq ---------- */
.vt-hflag{display:inline-block;flex:none;width:52px;height:30px;margin-left:12px;vertical-align:middle}
.vt-hflag canvas{display:block;width:100%;height:100%}
@media (max-width:760px){.vt-hflag{width:40px;height:24px;margin-left:8px}}

/* ---------- banner: dalğalanan bayraq ---------- */
body.vt .hero.vt-flaghost,body.vt .phead.vt-flaghost{background:var(--vt-navy)!important;isolation:isolate}
.vt-flaghost::before{display:none}
.vt-flag{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.vt-flag canvas{position:absolute;left:0;top:-6%;width:100%;height:112%;display:block;will-change:transform}
.vt-flag::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,26,58,.94) 0%,rgba(7,26,58,.86) 38%,rgba(7,26,58,.35) 72%,rgba(7,26,58,.15) 100%),linear-gradient(0deg,rgba(7,26,58,.75),transparent 35%)}
.phead .vt-flag::after{background:linear-gradient(90deg,rgba(7,26,58,.94) 0%,rgba(7,26,58,.8) 50%,rgba(7,26,58,.45) 100%)}
.vt-salute{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
body.vt .hero__in,body.vt .phead .wrap{position:relative;z-index:3}
body.vt .phead::after{display:none}
@media (max-width:760px){
  .vt-flag::after{background:linear-gradient(180deg,rgba(7,26,58,.92) 0%,rgba(7,26,58,.82) 55%,rgba(7,26,58,.55) 100%)}
}

/* banner nişanı */
.vt-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:7px 16px 7px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(233,196,106,.45);color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;cursor:pointer;font-family:inherit;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.vt-badge:hover{background:rgba(255,255,255,.14);border-color:var(--vt-gold)}
.vt-badge .vt-xb{width:24px;height:24px}
.vt-badge b{color:var(--vt-gold);font-weight:700}
.vt-badge:focus-visible{outline:3px solid var(--vt-gold);outline-offset:3px}
body.vt .hero h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}

/* ---------- footer: xatirə sətri ---------- */
.vt-memorial{display:flex;align-items:center;justify-content:center;gap:12px;padding:22px 16px 0;color:#DCE4F2;font-size:15px;font-weight:500;text-align:center}
.vt-memorial .vt-xb{width:28px;height:28px}
.vt-memorial span{border-bottom:1px solid rgba(233,196,106,.4);padding-bottom:3px}


/* ---------- bannerdə qızılı şüalar ---------- */
.vt-rays{position:absolute;width:150vmax;height:150vmax;left:0;top:0;margin:-75vmax 0 0 -75vmax;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.16) 0deg 4deg,transparent 4deg 13deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 14%,transparent 42%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 14%,transparent 42%);
  mix-blend-mode:screen;animation:vtRays 90s linear infinite}
@keyframes vtRays{to{transform:rotate(360deg)}}
body.vt .hero h1{background:linear-gradient(100deg,#fff 0%,#fff 42%,#FFE7A8 50%,#fff 58%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:vtGold 6s ease-in-out infinite;text-shadow:none;filter:drop-shadow(0 2px 18px rgba(0,0,0,.35))}
@keyframes vtGold{0%,40%{background-position:100% 0}100%{background-position:-50% 0}}

/* ---------- sol altda Xarıbülbül ---------- */
.vt-xbtn{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;width:74px;height:74px;border-radius:50%;padding:0;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff,#F6F1FA 70%);border:2px solid var(--vt-gold);box-shadow:0 10px 30px rgba(7,26,58,.28),0 0 0 6px rgba(233,196,106,.18);-webkit-tap-highlight-color:transparent;transition:transform .2s}
.vt-xbtn:hover{transform:scale(1.06)}
.vt-xbtn:active{transform:scale(.94)}
.vt-xbtn:focus-visible{outline:3px solid var(--vt-b);outline-offset:4px}
.vt-xbtn__svg{position:relative;z-index:1;display:block;width:56px;height:56px;margin:auto;transform-origin:20% 90%;animation:vtSway 4s ease-in-out infinite alternate}
@keyframes vtSway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.vt-xbtn__glow{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(233,196,106,.55),transparent 65%);animation:vtPulse 2.6s ease-in-out infinite;z-index:0;pointer-events:none}
@keyframes vtPulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.12)}}
.vt-xbtn__hint{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--vt-navy);color:#fff;font:600 13px/1 var(--font-body);padding:9px 13px;border-radius:999px;border:1px solid rgba(233,196,106,.5);box-shadow:0 8px 20px rgba(7,26,58,.25);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s}
.vt-xbtn.is-hint .vt-xbtn__hint{opacity:1;transform:translate(4px,-50%)}
.vt-petal{position:fixed;z-index:59;width:12px;height:12px;border-radius:60% 0 60% 0;pointer-events:none}

/* ---------- tarix kartı ---------- */
.vt-card{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 92px);z-index:61;width:min(350px,calc(100vw - 32px));
  background:linear-gradient(160deg,#0B2A5C,#071A3A 70%);color:#fff;border-radius:20px;padding:18px 20px 16px;border:1px solid rgba(233,196,106,.45);
  box-shadow:0 24px 60px -12px rgba(7,26,58,.55);transform-origin:20px 100%;overflow:hidden}
.vt-card[hidden]{display:none}
.vt-card.is-in{animation:vtCardIn .45s cubic-bezier(.2,.9,.3,1.25)}
@keyframes vtCardIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
.vt-card::before{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;background:url("../img/xaribulbul.svg") center/contain no-repeat;opacity:.09;transform:rotate(-12deg)}
.vt-card__top{display:flex;align-items:center;gap:10px;margin-bottom:12px;position:relative}
.vt-card__k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.vt-card__n{margin-left:auto;font-size:12px;font-weight:700;color:var(--vt-gold);font-variant-numeric:tabular-nums}
.vt-card__x{width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:15px;line-height:1}
.vt-card__x:hover{background:rgba(255,255,255,.2)}
.vt-card__d{font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--vt-gold);margin-bottom:4px;position:relative}
.vt-card__t{font-family:var(--font-head);font-size:23px;font-weight:800;line-height:1.2;position:relative}
.vt-card__s{margin-top:6px;font-size:14px;color:#C9D6EE;position:relative}
.vt-card__bar{display:flex;gap:4px;margin-top:16px;position:relative}
.vt-card__bar i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.vt-card__bar i.on{background:linear-gradient(90deg,var(--vt-b),var(--vt-r),var(--vt-g))}
.vt-card__bar i.cur{background:var(--vt-gold);box-shadow:0 0 8px rgba(233,196,106,.8)}
.vt-card__next{margin-top:10px;font-size:12px;color:rgba(255,255,255,.55);position:relative}
.vt-card.is-key{border-color:var(--vt-gold);background:linear-gradient(160deg,#1B3A6E,#0B2147 60%,#3A2A0C);box-shadow:0 0 0 1px rgba(233,196,106,.4),0 24px 70px -10px rgba(233,196,106,.45)}
.vt-card.is-key .vt-card__t{color:#FFE7A8}

@media (max-width:640px){
  .vt-xbtn{width:62px;height:62px}.vt-xbtn__svg{width:46px;height:46px}
  .vt-card{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 80px)}
  .vt-card__t{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.vt-ribbon::before,.vt-rays{animation:none}.vt-ribbon::before{display:none}.vt-xbtn__svg,.vt-xbtn__glow,.vt-card.is-in{animation:none}body.vt .hero h1{animation:none}}
@media print{.vt-xbtn,.vt-card{display:none}}
@media print{body.vt::before,.vt-ribbon,.vt-hflag,.vt-flag,.vt-salute,.vt-badge{display:none}}