/* ============================================================
   VEU style header/navbar - clone
   Classes are prefixed veu- to avoid clashing with the
   existing theme (Bootstrap + styles.css).
   ============================================================ */

/* CSS variables (VEU branding) */
body{
  --bg:#ffffff; --bg-soft:#f5f8fc; --bg-tint:#eef4fb; --bg-ink:#0b1220;
  --ink:#0b1220; --ink-2:#334155; --ink-soft:#64748b; --ink-faint:#94a3b8;
  --line:#e5eaf1; --line-2:#eef2f7;
  --blue:#0ea5e9; --blue-d:#0284c7; --blue-ink:#075985;
  --orange:#f97316; --orange-d:#ea580c;
  --green:#16a34a; --green-l:#22c55e;
  --purple:#7c3aed; --red:#ef4444;
  --blue-wash:#e8f5fe; --orange-wash:#fff1e7; --green-wash:#e7f7ee; --purple-wash:#f1eafe;
  --r-xl:22px; --r-lg:16px; --r-md:11px; --r-sm:8px; --r-pill:100px;
  --sh-xs:0 1px 2px rgba(11,18,32,.05);
  --sh-sm:0 2px 8px rgba(11,18,32,.06);
  --sh-md:0 8px 24px rgba(11,18,32,.08);
  --sh-lg:0 18px 50px rgba(11,18,32,.12);
  --sh-blue:0 14px 40px rgba(14,165,233,.30);
  --sh-orange:0 14px 40px rgba(249,115,22,.28);
  --t-fast:.16s cubic-bezier(.4,0,.2,1);
  --t-mid:.28s cubic-bezier(.4,0,.2,1);
  --f-display:'Outfit',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-nav:'Plus Jakarta Sans',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --nav-h:66px;
}

/* ---------- Ust kampanya bandi (ticker) ---------- */
.veu-topbar{
  background:var(--blue);
  padding:8px 0;overflow:hidden;position:relative;
}
.veu-ticker-track{display:flex;width:max-content;animation:veu-ticker 34s linear infinite}
.veu-topbar:hover .veu-ticker-track{animation-play-state:paused}
.veu-ticker-item{
  white-space:nowrap;padding-inline:38px;
  font-family:var(--f-display);font-size:.8rem;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:8px;
}
.veu-ticker-item::after{content:'•';opacity:.55;margin-left:30px}
@keyframes veu-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- topbar (phone / support) ---------- */
.veu-ubar{background:#0f1830}
.veu-ubar .veu-uw{max-width:1200px;margin:0 auto;height:44px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.veu-ubar nav{display:flex;align-items:center}
.veu-ubar nav a{display:flex;align-items:center;gap:6px;color:#cbd5e1;font-size:13px;text-decoration:none;padding:0 14px;transition:color .15s}
.veu-ubar nav a:first-child{padding-left:0}
.veu-ubar nav a:hover{color:#fff}
.veu-ubar nav a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.veu-ubar .veu-uphone svg{stroke:#0ea5e9}
.veu-ubar .veu-sep{width:1px;height:14px;background:rgba(255,255,255,.18)}
.veu-ubar .veu-tk{display:flex;align-items:center;gap:7px;color:#fff;background:#16a34a;font-size:13px;font-weight:500;padding:7px 14px;border-radius:6px;text-decoration:none;transition:background .15s}
.veu-ubar .veu-tk:hover{background:#15803d}
.veu-ubar .veu-tk svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2}
@media(max-width:680px){.veu-ubar .veu-uw{padding:0 14px}.veu-ubar nav a span{display:none}}

/* ---------- Ana header ---------- */
.veu-hdr{
  position:sticky;top:0;z-index:300;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
  font-family:var(--f-body);
}
.veu-container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
.veu-hdr-inner{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.veu-logo{font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.04em;color:var(--ink);display:inline-flex;align-items:center;text-decoration:none}
.veu-logo em{color:var(--blue);font-style:normal}
.veu-logo img{height:44px;width:auto;display:block}
@media(max-width:520px){.veu-logo img{height:36px}}

/* ---------- Nav + mega menu ---------- */
.veu-nav{display:flex;align-items:center;gap:2px;margin-inline:auto}
.veu-nav-item{position:relative}
.veu-nav-link{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-nav);font-size:.9rem;font-weight:600;color:var(--ink-2);letter-spacing:-.01em;
  padding:9px 14px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;
  transition:color var(--t-fast),background var(--t-fast);
}
.veu-nav-link:hover,.veu-nav-item:hover .veu-nav-link,.veu-nav-item.open .veu-nav-link{color:var(--blue-d);background:var(--blue-wash)}
.veu-nav-link .veu-caret{width:9px;height:9px;transition:transform var(--t-fast);opacity:.6}
.veu-nav-item:hover .veu-nav-link .veu-caret,.veu-nav-item.open .veu-nav-link .veu-caret{transform:rotate(180deg)}

.veu-mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  padding:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-mid),transform var(--t-mid),visibility var(--t-mid);
  overflow:hidden;z-index:10;width:820px;max-width:calc(100vw - 32px);
}
.veu-mega::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--orange))}

.veu-nav-item::after{content:'';position:absolute;top:100%;left:0;right:0;height:18px}
.veu-nav-item:hover .veu-mega,.veu-nav-item.open .veu-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.veu-nav-item:nth-child(-n+2) .veu-mega{left:0;transform:translateX(0) translateY(8px)}
.veu-nav-item:nth-child(-n+2):hover .veu-mega,.veu-nav-item:nth-child(-n+2).open .veu-mega{transform:translateX(0) translateY(0)}
.veu-nav-item:nth-last-child(-n+2) .veu-mega{left:auto;right:0;transform:translateX(0) translateY(8px)}
.veu-nav-item:nth-last-child(-n+2):hover .veu-mega,.veu-nav-item:nth-last-child(-n+2).open .veu-mega{transform:translateX(0) translateY(0)}

.veu-mega-grid{display:grid;gap:0;grid-template-columns:1fr 230px}

.veu-mega-main{padding:24px 24px;display:flex;flex-direction:column;gap:18px}
.veu-mega-sec + .veu-mega-sec{padding-top:18px;border-top:1px solid var(--line-2)}
.veu-mega-col-title{
  font-family:var(--f-mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;
}
.veu-mega-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.veu-mega-link{
  position:relative;display:flex;gap:12px;align-items:flex-start;
  padding:14px 30px 14px 16px;border-radius:13px;
  border:1px solid var(--line-2);background:#fff;text-decoration:none;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.veu-mega-link:hover{background:var(--blue-wash);border-color:var(--blue);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.veu-mega-link::after{content:'›';position:absolute;right:13px;top:50%;
  transform:translateY(-50%) translateX(-5px);font-size:1.15rem;font-weight:700;color:var(--blue-d);
  opacity:0;transition:opacity var(--t-fast),transform var(--t-fast)}
.veu-mega-link:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.veu-mega-link .veu-mi{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.veu-mega-link:hover .veu-mi{transform:scale(1.09) rotate(-4deg);box-shadow:var(--sh-sm)}
.veu-mega-link .veu-mi svg{width:21px;height:21px;display:block}
.veu-mi-blue{background:var(--blue-wash);color:var(--blue-d)}
.veu-mi-orange{background:var(--orange-wash);color:var(--orange-d)}
.veu-mi-green{background:var(--green-wash);color:var(--green)}
.veu-mi-purple{background:var(--purple-wash);color:var(--purple)}
.veu-mega-link .veu-mtx{min-width:0;display:flex;flex-direction:column;padding-top:1px}
.veu-mega-link .veu-mt{font-family:var(--f-nav);font-weight:700;font-size:.88rem;color:var(--ink);display:flex;align-items:center;gap:6px;line-height:1.2}
.veu-mega-link .veu-md{font-size:.76rem;color:var(--ink-soft);line-height:1.45;margin-top:4px}
.veu-mega-link:hover .veu-mt{color:var(--blue-d)}

.veu-navtag{position:absolute;top:-7px;left:11px;z-index:3;font-family:var(--f-mono);font-size:.54rem;font-weight:700;line-height:1;padding:3px 7px;border-radius:7px;letter-spacing:.05em;text-transform:uppercase;color:#fff;box-shadow:0 2px 7px rgba(2,8,23,.22);pointer-events:none;white-space:nowrap}
.veu-navtag-indirim{background:#ec4899}
.veu-navtag-kampanya{background:var(--orange)}
.veu-navtag-new{background:#10b981}
.veu-navtag-firsat{background:#dc2626}

.veu-mega-main,.veu-mega-promo{transform:translateY(6px);opacity:.4;transition:transform var(--t-mid),opacity var(--t-mid)}
.veu-nav-item:hover .veu-mega .veu-mega-main,.veu-nav-item:hover .veu-mega .veu-mega-promo,
.veu-nav-item.open .veu-mega .veu-mega-main,.veu-nav-item.open .veu-mega .veu-mega-promo{transform:translateY(0);opacity:1}
.veu-nav-item:hover .veu-mega .veu-mega-promo,.veu-nav-item.open .veu-mega .veu-mega-promo{transition-delay:.05s}

.veu-mega-promo{
  background:linear-gradient(160deg,var(--bg-ink),#111c33);
  color:#fff;padding:24px 22px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.veu-mega-promo::before{content:'';position:absolute;inset:0;
  background:radial-gradient(120px 100px at 100% 0%,rgba(14,165,233,.35),transparent 70%);pointer-events:none}
.veu-mega-promo .veu-pk{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#7dd3fc;margin-bottom:10px}
.veu-mega-promo .veu-mega-promo-t{color:#fff;font-size:1.05rem;font-weight:800;line-height:1.25;margin-bottom:8px;font-family:var(--f-display)}
.veu-mega-promo p{font-size:.78rem;color:#cbd5e1;line-height:1.5;margin-bottom:16px}
.veu-mega-promo .veu-pprice{font-family:var(--f-display);font-weight:900;font-size:1.6rem;color:#fff;margin-bottom:2px}
.veu-mega-promo .veu-pold{font-size:.74rem;color:#94a3b8;text-decoration:line-through;margin-bottom:14px}
.veu-mega-promo .veu-btn{margin-top:auto}

/* ---------- Sag aksiyonlar (para birimi / panel / burger) ---------- */
.veu-hdr-actions{display:flex;align-items:center;gap:10px}
.veu-panel-btn{display:inline-flex;align-items:center;gap:7px}
.veu-panel-ico{display:none;width:18px;height:18px;flex-shrink:0}

.veu-cur{display:inline-flex;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.veu-cur button{
  font-family:var(--f-mono);font-size:.76rem;font-weight:700;
  padding:5px 12px;border-radius:var(--r-pill);color:var(--ink-soft);
  transition:background var(--t-fast),color var(--t-fast);line-height:1;
}
.veu-cur button.active{background:#fff;color:var(--ink);box-shadow:var(--sh-xs)}
.veu-cur button:hover:not(.active){color:var(--ink-2)}

/* ---------- Butonlar (sadece header kapsaminda) ---------- */
.veu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-display);font-weight:700;font-size:.92rem;
  padding:12px 26px;border-radius:var(--r-md);text-decoration:none;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  white-space:nowrap;line-height:1;cursor:pointer;border:none;
}
.veu-btn:active{transform:translateY(0) scale(.98)}
.veu-btn:hover{transform:translateY(-2px)}
.veu-btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(14,165,233,.28)}
.veu-btn--primary:hover{background:var(--blue-d);box-shadow:var(--sh-blue);color:#fff}
.veu-btn--orange{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(14,165,233,.28)}
.veu-btn--orange:hover{background:var(--blue-d);box-shadow:var(--sh-blue);color:#fff}
.veu-btn--sm{padding:9px 18px;font-size:.82rem}
.veu-btn--block{width:100%}

/* ---------- Burger (mobil) ---------- */
.veu-burger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;background:none;border:none}
.veu-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:var(--t-fast)}

/* ---------- Mobil drawer ---------- */
.veu-drawer{
  position:fixed;inset:0;z-index:400;background:rgba(11,18,32,.4);
  opacity:0;visibility:hidden;transition:opacity var(--t-mid),visibility var(--t-mid);
}
.veu-drawer.open{opacity:1;visibility:visible}
.veu-drawer-panel{
  position:absolute;top:0;right:0;height:100%;width:min(360px,88vw);
  background:#fff;box-shadow:-20px 0 60px rgba(11,18,32,.2);
  transform:translateX(100%);transition:transform var(--t-mid);
  display:flex;flex-direction:column;overflow-y:auto;
}
.veu-drawer.open .veu-drawer-panel{transform:none}
.veu-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.veu-drawer-close{font-size:1.5rem;color:var(--ink-soft);line-height:1;padding:4px;background:none;border:none;cursor:pointer}
.veu-drawer-body{padding:14px 12px;flex:1}
.veu-dr-group{border-bottom:1px solid var(--line-2)}
.veu-dr-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-display);font-weight:700;font-size:.98rem;color:var(--ink);
  padding:15px 12px;background:none;border:none;cursor:pointer;
}
.veu-dr-head .veu-caret{width:11px;height:11px;transition:transform var(--t-fast);opacity:.55}
.veu-dr-group.open .veu-dr-head .veu-caret{transform:rotate(180deg)}
.veu-dr-sub{max-height:0;overflow:hidden;transition:max-height var(--t-mid)}
.veu-dr-group.open .veu-dr-sub{max-height:600px}
.veu-dr-sub a{display:block;padding:10px 12px 10px 24px;font-size:.88rem;color:var(--ink-soft);text-decoration:none}
.veu-dr-sub a:hover{color:var(--blue-d)}

.veu-drawer-foot{padding:18px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.veu-drawer-foot .veu-cur{align-self:flex-start}

/* ---------- Responsive ---------- */
@media(max-width:1110px){
  .veu-nav{display:none}
  .veu-burger{display:flex}
  .veu-hdr-actions{margin-left:auto}
  .veu-hdr-actions .veu-cur{display:none}
  .veu-panel-btn .veu-btn-label{display:none}
  .veu-panel-btn .veu-panel-ico{display:block}
  .veu-panel-btn{padding:0;width:40px;height:40px;justify-content:center;border-radius:12px}
}