/* =========================================================
   MESA EXPO — International fair participation agency
   Design tokens — navy + blue accent, Manrope/Inter type
   ========================================================= */
:root{
  --navy-950:#070f24;
  --navy-900:#0b1836;
  --navy-800:#122349;
  --navy-700:#1a2f5c;
  --blue-600:#2856e0;
  --blue-500:#3866f0;
  --blue-100:#e7edfd;
  --teal-600:#0f9d72;
  --teal-100:#e3f8f0;
  --amber-600:#dc8420;
  --amber-100:#fbf0dd;
  --green-600:#1a9c5b;
  --green-100:#e2f7ec;
  --purple-600:#7c5cd6;
  --purple-100:#eee9fb;
  --rose-600:#e0517a;
  --rose-100:#fde8ec;
  --ink:#0f1526;
  --slate-700:#3b4356;
  --slate-500:#6b7386;
  --slate-400:#8d94a6;
  --line:#e4e7ef;
  --surface:#ffffff;
  --surface-alt:#f5f7fb;
  --white:#ffffff;
  --shadow-card:0 10px 30px -16px rgba(9,17,40,.18);
  --shadow-pop:0 26px 60px -22px rgba(7,15,36,.4);
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --container:1200px;
  --font-display:'Manrope','Segoe UI',sans-serif;
  --font-body:'Inter','Segoe UI',sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate-700);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-950);
  line-height:1.18;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
  font-weight:800;
}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
img,svg{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:1rem;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

section{padding:88px 0;}
@media (max-width:768px){ section{padding:56px 0;} }

.section-head{max-width:640px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-600); margin-bottom:12px;
}
.bg-alt{background:var(--surface-alt);}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  border-radius:10px;
  font-weight:700; font-size:.94rem;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--blue-600); color:var(--white); box-shadow:0 14px 28px -12px rgba(40,86,224,.5);}
.btn-primary:hover{background:var(--blue-500);}
.btn-dark{background:var(--navy-900); color:var(--white);}
.btn-dark:hover{background:var(--navy-800);}
.btn-ghost{background:transparent; color:var(--white); border-color:rgba(255,255,255,.35);}
.btn-ghost:hover{background:rgba(255,255,255,.1);}
.btn-outline{background:transparent; color:var(--navy-950); border-color:var(--line);}
.btn-outline:hover{border-color:var(--navy-950);}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px; font-size:.85rem; border-radius:8px;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:78px; gap:24px;
}
.brand{display:flex; align-items:center; flex:none;}
.brand-logo{display:block; height:36px; width:auto;}
/* The logo's blue is ~2.2:1 against navy-950 — too low-contrast to read directly on
   the dark footer, so it gets a light backing card there instead of being recolored. */
.site-footer .brand{background:var(--white); padding:9px 16px; border-radius:var(--radius-s); align-self:flex-start;}
.site-footer .brand-logo{height:38px;}

.nav-links{display:flex; align-items:center; gap:28px; margin:0 auto;}
.nav-links a{font-weight:600; font-size:.92rem; color:var(--slate-700);}
.nav-links a:hover, .nav-links a.active{color:var(--blue-600);}

.header-actions{display:flex; align-items:center; gap:14px; flex:none;}
.lang-select{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:5px;
  font-weight:700; font-size:.86rem; color:var(--slate-700);
  padding:8px 4px; border:none; background:transparent; cursor:pointer;
}
.lang-btn:hover{color:var(--navy-950);}
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-card); padding:6px; min-width:130px;
  display:none; flex-direction:column; gap:2px; z-index:200;
}
.lang-menu.open{display:flex;}
.lang-option{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:7px;
  border:none; background:transparent; cursor:pointer;
  font-size:.88rem; font-weight:600; color:var(--slate-700);
}
.lang-option:hover{background:var(--surface-alt);}
.lang-option.active{color:var(--blue-600); background:var(--blue-100);}
.nav-toggle{
  display:none; width:42px; height:42px;
  border:1px solid var(--line); border-radius:9px; background:var(--white);
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:19px; height:2px; background:var(--navy-950);
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}
.nav-toggle.active span{background:transparent;}
.nav-toggle.active span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle.active span::after{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:980px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); flex-direction:column; align-items:stretch; gap:0;
    padding:8px 24px 20px; border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-links a{padding:13px 0; border-bottom:1px solid var(--line);}
  .nav-toggle{display:flex;}
  .header-actions .btn-primary{display:none;}
}

/* Home hero */
.hero{
  position:relative;
  overflow:hidden;
  padding:104px 0 64px;
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(56,102,240,.28), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color:var(--white);
  overflow:hidden;
}
.hero-bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}
.hero-video-overlay{
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(7,15,36,.45), rgba(7,15,36,.60));
}
.hero-inner{position:relative; z-index:2; max-width:640px;}
.hero h1{color:var(--white); font-size:clamp(2.1rem,4.4vw,3.2rem); margin-bottom:.4em; text-shadow:0 2px 10px rgba(0,0,0,.45);}
.hero-lead{color:#f1f4fa; font-size:1.05rem; max-width:520px; margin-bottom:32px; text-shadow:0 2px 10px rgba(0,0,0,.45);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* Stats bar */
.stats-bar{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:36px 0;
}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.stat-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;}
.stat-item svg{color:var(--blue-600);}
.stat-item strong{font-family:var(--font-display); font-size:1.6rem; color:var(--navy-950); font-weight:800;}
.stat-item span{font-size:.82rem; color:var(--slate-500); font-weight:600;}
@media (max-width:700px){ .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:28px;} }

/* Value cards */
.icon-badge{
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--blue-100); color:var(--blue-600);
  margin-bottom:16px;
}
.icon-badge-rose{background:var(--rose-100); color:var(--rose-600);}
.icon-badge-amber{background:var(--amber-100); color:var(--amber-600);}
.icon-badge-teal{background:var(--teal-100); color:var(--teal-600);}

/* Fair cards (grid, used on home) */
.fair-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:980px){ .fair-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .fair-grid{grid-template-columns:1fr;} }
.fair-card{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.fair-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
/* flex:none pins the media block to its aspect-ratio-computed height so it
   can't be stretched taller by a sibling card's longer, wrapping title —
   grid rows default to align-items:stretch, so without this a long real
   fair title in one card would inflate every card's image box in that row. */
.fair-card-media{aspect-ratio:4/3; flex:none; overflow:hidden; background:var(--surface-alt); position:relative;}
.fair-card-media img{width:100%; height:100%; object-fit:cover;}
.fair-card-body{padding:18px 18px 20px;}
.fair-card h3{font-size:1.02rem; margin:.3em 0 .5em;}
.fair-meta{display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--slate-500); margin-bottom:0;}
.fair-meta span{display:flex; align-items:center; gap:6px;}
.fair-meta svg{flex:none; color:var(--slate-400);}

/* Not positioned over the image — it used to sit absolutely on top of the
   fair's media (photo or, for many real fairs, a small brand logo), and on a
   plain-background logo a corner badge covers a large share of the mark
   itself (unlike a photo, a logo has no "safe" empty corner). Rendered
   inline in the card/row/caption body instead, next to the category tag or
   title, so it never overlaps any image. */
.countdown-badge{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  font-size:.7rem; font-weight:800; letter-spacing:.01em; white-space:nowrap;
  color:var(--white); background:var(--blue-600);
}
.countdown-badge-soon{background:var(--amber-600);}
.countdown-badge-urgent{background:var(--rose-600);}
.fair-card-top-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.fair-row-body .countdown-badge{margin-bottom:8px;}
/* Default badge blue would blend into this caption's own blue background —
   a translucent white pill keeps it legible while soon/urgent still pop
   with their own amber/rose regardless of context. */
.marquee-item-caption .countdown-badge{background:rgba(255,255,255,.22); margin-bottom:6px;}
.marquee-item-caption .countdown-badge-soon{background:var(--amber-600);}
.marquee-item-caption .countdown-badge-urgent{background:var(--rose-600);}

/* Full-bleed auto-scrolling fair ticker under the "Yaklaşan Fuarlar" grid on the
   home page. The track's content is rendered twice back-to-back by main.js and
   animated from translateX(0) to translateX(-50%) — since both halves are
   identical, the loop point is invisible. Pausing on hover is pure CSS so it
   works the instant the fairs load, with no JS event wiring needed.
   The ticker can also be dragged sideways (initMarqueeDrag in main.js, which
   sets .dragging): touch-action leaves vertical swipes to the page and hands
   horizontal ones to that script. */
.fair-marquee-wrap{
  position:relative; overflow:hidden; margin-top:44px;
  cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.fair-marquee-wrap.dragging{cursor:grabbing;}
/* padding-right = gap: without it half the track is half a gap short of one
   copy of the list, and the belt hops by that much wherever it wraps. */
.fair-marquee-track{
  display:flex; width:max-content; gap:22px; padding-right:22px; will-change:transform;
  animation:fair-marquee-scroll 42s linear infinite;
}
.fair-marquee-wrap:hover .fair-marquee-track,
.fair-marquee-wrap.dragging .fair-marquee-track{animation-play-state:paused;}
@keyframes fair-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
/* Held still, not removed: dragging moves this animation's clock. */
@media (prefers-reduced-motion: reduce){
  .fair-marquee-track{animation-play-state:paused;}
}
.marquee-item{
  flex:none; width:250px; display:flex; flex-direction:column; border-radius:var(--radius-m); overflow:hidden;
  border:1px solid var(--line); background:var(--white); cursor:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.marquee-item:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
/* flex:none — same reason as .fair-card-media: the track is a flex row, whose
   default cross-axis stretch would otherwise inflate every item's image box
   to match whichever item's caption wraps the most lines. */
.marquee-item-media{aspect-ratio:4/3; flex:none; overflow:hidden; background:var(--surface-alt); position:relative;}
.marquee-item-media img{width:100%; height:100%; object-fit:cover;}
.marquee-item-caption{background:var(--blue-600); color:var(--white); padding:10px 14px; line-height:1.3;}
/* Fair titles range from one word ("7.HITEX") to a full sentence, so the
   title's wrapped line count varied per card and left the blue caption
   boxes at different heights — misaligned along the row even though every
   card is the same width. Clamping to a fixed 3 lines (ellipsis beyond
   that) caps the tall titles, and min-height reserves the same 3 lines'
   worth of space even for a one-line title, so every caption ends up
   exactly the same height regardless of content. 3.9em = 3 lines *
   this element's own 1.3 line-height. */
.marquee-item-caption strong{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height:3.9em; font-size:.82rem; font-weight:800;
}
.marquee-item-caption span{display:block; font-size:.72rem; opacity:.85;}
@media (max-width:560px){
  .fair-marquee-wrap{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
  .marquee-item{width:200px;}
}

/* Customer reviews — same auto-scroll-track + pause-on-hover mechanism as
   .fair-marquee-wrap above (rendered twice back-to-back by main.js, looped
   with a translateX animation), but scrolling the opposite direction (0% ->
   -50% there, -50% -> 0% here) and with extra vertical padding on the wrap:
   individual cards also scale up on hover (not just pause), and without that
   padding the grown card would get clipped by this wrap's overflow:hidden. */
.reviews-marquee-wrap{
  position:relative; overflow:hidden; margin-top:36px; padding:22px 0 30px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.reviews-marquee-track{
  display:flex; width:max-content; gap:22px; will-change:transform;
  animation:reviews-marquee-scroll 36s linear infinite;
}
.reviews-marquee-wrap:hover .reviews-marquee-track{animation-play-state:paused;}
@keyframes reviews-marquee-scroll{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
@media (prefers-reduced-motion: reduce){
  .reviews-marquee-track{animation:none;}
}
.review-card{
  flex:none; width:340px; display:flex; flex-direction:column; gap:14px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:26px 24px; box-shadow:var(--shadow-card);
  transition:transform .22s ease, box-shadow .22s ease;
}
.review-card:hover{transform:scale(1.06); box-shadow:var(--shadow-pop); position:relative; z-index:2;}
.review-card-quote{color:var(--blue-600); opacity:.8;}
.review-card-message{
  font-size:.92rem; color:var(--slate-700); line-height:1.6; flex:1;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.review-card-footer{display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:14px;}
.review-avatar{
  flex:none; width:44px; height:44px; border-radius:50%; background:var(--blue-100); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem;
}
.review-card-who{min-width:0;}
.review-card-who strong{display:block; font-size:.9rem; color:var(--navy-950);}
.review-card-who span{
  display:block; font-size:.78rem; color:var(--slate-500);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reviews-empty{text-align:center; color:var(--slate-500); padding:40px 20px; margin:36px 0 0;}
@media (max-width:560px){
  .reviews-marquee-wrap{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
  .review-card{width:270px;}
}

.tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:4px 0;
}
.tag-tech{color:var(--blue-600);}
.tag-health{color:var(--teal-600);}
.tag-energy{color:var(--green-600);}
.tag-agri{color:var(--rose-600);}
.tag-textile{color:var(--purple-600);}
.tag-construction{color:var(--amber-600);}
.tag-pill{padding:6px 14px; border-radius:999px;}
.tag-pill.tag-tech{background:var(--blue-100);}
.tag-pill.tag-health{background:var(--teal-100);}
.tag-pill.tag-energy{background:var(--green-100);}
.tag-pill.tag-agri{background:var(--rose-100);}
.tag-pill.tag-textile{background:var(--purple-100);}
.tag-pill.tag-construction{background:var(--amber-100);}

.section-head-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:36px; flex-wrap:wrap;
}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.9rem; color:var(--blue-600);}
.link-arrow:hover{gap:9px;}
.link-arrow svg{transition:transform .15s ease;}

/* CTA banner */
.cta-banner{
  background:linear-gradient(135deg, var(--navy-950), var(--navy-800));
  color:var(--white); text-align:center; padding:64px 0;
}
.cta-banner h2{color:var(--white); margin-bottom:.5em;}
.cta-banner p{color:#b9c3de; max-width:520px; margin:0 auto 28px;}

/* Footer */
.site-footer{background:var(--navy-950); color:#a7b0c7; padding:60px 0 26px;}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:32px;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);
}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h4{color:var(--white); font-size:.84rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:16px;}
.footer-grid ul li{margin-bottom:10px; font-size:.88rem;}
.footer-grid ul a:hover{color:var(--white);}
.footer-about p{max-width:280px; font-size:.88rem;}
.footer-contact li{display:flex; gap:9px; align-items:flex-start; font-size:.86rem;}
.footer-contact svg{flex:none; color:var(--blue-500); margin-top:2px;}
.social-row{display:flex; gap:10px; margin-top:18px;}
.social-row a{
  width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; color:#a7b0c7;
  border:1px solid rgba(255,255,255,.1);
}
.social-row a:hover{background:var(--blue-600); color:var(--white); border-color:transparent;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:22px; font-size:.8rem; color:#7d87a0;
}
.footer-bottom a{font-weight:600;}
.footer-bottom a:hover{color:var(--white);}
.footer-legal{display:flex; gap:20px;}
.credit-row{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:22px; padding-top:16px;
  text-align:center; font-size:.78rem; color:#7d87a0;
}
.credit-row a{color:var(--blue-500); font-weight:600;}
.credit-row a:hover{color:var(--white);}

/* Page hero (inner pages) */
.page-hero{
  position:relative; padding:56px 0 44px; color:var(--white); overflow:hidden;
  background:
    radial-gradient(700px 360px at 88% -20%, rgba(56,102,240,.22), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
}
.page-hero.has-photo{
  padding:120px 0 64px;
  background-size:cover; background-position:center;
}
.page-hero h1{color:var(--white); font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:.3em;}
.page-hero-lead{color:#b9c3de; max-width:560px; margin-bottom:0;}
.page-hero-tags{display:flex; gap:10px; margin:16px 0 0; flex-wrap:wrap;}
.hero-meta-list{display:flex; flex-direction:column; gap:10px; margin:18px 0 0;}
.hero-meta-list span{display:flex; align-items:center; gap:9px; color:#c3ccdf; font-size:.94rem; font-weight:500;}
.hero-meta-list svg{flex:none; color:#7c8bc4;}

/* Fair calendar filters */
.filters-bar{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:24px; box-shadow:var(--shadow-card);
  margin-top:36px; position:relative; z-index:2;
}
.filters-top{display:flex; justify-content:flex-end; margin-bottom:16px;}
.clear-link{font-size:.86rem; font-weight:600; color:var(--slate-500);}
.clear-link:hover{color:var(--navy-950);}
.filters-row{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:14px; align-items:center;
}
@media (max-width:980px){ .filters-row{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .filters-row{grid-template-columns:1fr;} }
.field-input{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:9px; padding:12px 14px;
  background:var(--surface-alt); height:46px;
}
.field-input svg{flex:none; color:var(--slate-400);}
.field-input input, .field-input select{
  border:none; background:transparent; outline:none; width:100%; height:100%; color:var(--ink); font-size:.9rem;
}
.filters-row .btn{height:46px; padding:0 26px;}

.fair-list{display:flex; flex-direction:column; gap:16px; margin-top:44px;}
.fair-row{
  display:grid; grid-template-columns:180px 1fr auto; gap:22px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:16px; transition:box-shadow .18s ease, border-color .18s ease;
}
.fair-row:hover{box-shadow:var(--shadow-card); border-color:transparent;}
.fair-row-media{width:160px; height:120px; border-radius:12px; overflow:hidden; background:var(--surface-alt); flex:none; position:relative;}
.fair-row-media img{width:100%; height:100%; object-fit:cover;}
.fair-row-body h3{font-size:1.08rem; margin:.15em 0 .4em;}
.fair-row-meta{display:flex; flex-wrap:wrap; gap:16px; font-size:.84rem; color:var(--slate-500); margin-bottom:8px;}
.fair-row-meta span{display:flex; align-items:center; gap:6px;}
.fair-row-meta svg{flex:none; color:var(--slate-400);}
.fair-row-desc{font-size:.88rem; color:var(--slate-500); margin-bottom:0; max-width:480px;}
.fair-row-cta{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:14px;}
.no-results{display:none; text-align:center; padding:60px 20px; color:var(--slate-500);}
@media (max-width:760px){
  .fair-row{grid-template-columns:1fr; }
  .fair-row-media{width:100%; height:auto; aspect-ratio:16/9;}
  .fair-row-cta{width:100%; flex-direction:row; justify-content:space-between; align-items:center;}
  .fair-row-cta .btn{width:auto;}
}

.pagination{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:44px;}
.pagination button, .pagination span{
  min-width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--line); background:var(--white);
  font-weight:700; font-size:.88rem; color:var(--slate-600);
}
.pagination button.active{background:var(--blue-600); color:var(--white); border-color:transparent;}
.pagination button:disabled{opacity:.4; cursor:default;}
.pagination span{border:none; color:var(--slate-400);}

/* Fair detail */
.detail-tabs{
  display:flex; gap:6px; overflow-x:auto;
  border-bottom:1px solid var(--line); margin-bottom:44px;
}
/* border/background reset explicitly, same as .lang-option above — a bare
   <button> otherwise keeps the browser's own boxy gray background + full
   border, which was overriding the underline-tab look this was designed to
   have (only border-bottom was ever set, never the other 3 sides or the
   background), reading as generic form buttons instead of page tabs. */
.detail-tab{
  flex:none; padding:14px 18px; font-weight:700; font-size:.9rem; color:var(--slate-500);
  border:none; border-bottom:2px solid transparent; background:transparent; white-space:nowrap;
}
.detail-tab.active{color:var(--blue-600); border-color:var(--blue-600);}
.detail-tab:hover{color:var(--navy-950);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.detail-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:start;}
@media (max-width:920px){ .detail-layout{grid-template-columns:1fr;} }
.checklist{display:flex; flex-direction:column; gap:12px; margin:20px 0 0;}
.checklist li{display:flex; align-items:flex-start; gap:10px; font-size:.94rem; color:var(--slate-700);}
.checklist svg{flex:none; color:var(--blue-600); margin-top:2px;}

.detail-card{
  background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:26px; position:sticky; top:100px;
}
.detail-card h3{font-size:1.05rem; margin-bottom:18px;}
.detail-card-row{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line);}
.detail-card-row:first-of-type{border-top:none; padding-top:0;}
.detail-card-row svg{flex:none; color:var(--blue-600); margin-top:2px;}
.detail-card-row strong{display:block; font-size:.78rem; color:var(--slate-500); font-weight:600;}
.detail-card-row span{display:block; font-size:.92rem; color:var(--navy-950); font-weight:600;}

.sectors-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
@media (max-width:700px){ .sectors-grid{grid-template-columns:1fr 1fr;} }
.sector-card{
  border:1px solid var(--line); border-radius:var(--radius-s); padding:20px 16px; text-align:center;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sector-card:hover{border-color:transparent; box-shadow:var(--shadow-card);}
.sector-card .icon-badge{margin:0 auto 12px;}
.sector-card span{font-size:.86rem; font-weight:700; color:var(--navy-950);}

.book-banner{
  background:linear-gradient(135deg, var(--navy-950), var(--navy-800));
  border-radius:var(--radius-l); padding:44px; color:var(--white);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:64px;
}
.book-banner h3{color:var(--white); margin-bottom:.2em;}
.book-banner p{color:#b9c3de; margin-bottom:0;}

/* About / Institutional */
.who-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
@media (max-width:900px){ .who-grid{grid-template-columns:1fr;} }
.who-stats{
  background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-m); padding:8px;
}
.who-stat-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.who-stat-row:last-child{border-bottom:none;}
.who-stat-row strong{font-family:var(--font-display); font-size:1.3rem; color:var(--blue-600);}
.who-stat-row span{font-size:.88rem; color:var(--slate-500); font-weight:600;}

.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:860px){ .values-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .values-grid{grid-template-columns:1fr;} }
.value-card{
  border:1px solid var(--line); border-radius:var(--radius-m); padding:28px 22px; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.value-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.value-card .icon-badge{margin:0 auto 16px;}
.value-card h3{font-size:1.02rem;}
.value-card p{font-size:.88rem; color:var(--slate-500); margin-bottom:0;}

/* Services */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:860px){ .services-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }
.service-card{
  border:1px solid var(--line); border-radius:var(--radius-m); padding:30px 24px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card); background:var(--white);}
.service-card h3{font-size:1.08rem;}
.service-card p{font-size:.9rem; color:var(--slate-500); margin-bottom:0;}

/* References */
.references-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
@media (max-width:860px){ .references-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .references-grid{grid-template-columns:repeat(2,1fr);} }
.reference-tile{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:26px 16px; min-height:96px;
  font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--slate-400);
  transition:color .15s ease;
}
.reference-tile:hover{color:var(--navy-950);}

/* Media & News */
.filter-tabs{display:flex; gap:8px; margin-bottom:36px; flex-wrap:wrap;}
.filter-tab{
  padding:10px 18px; border-radius:999px; border:1px solid var(--line);
  font-weight:700; font-size:.86rem; color:var(--slate-600); background:var(--white);
}
.filter-tab.active{background:var(--navy-950); color:var(--white); border-color:transparent;}
.filter-tab:hover:not(.active){border-color:var(--navy-950); color:var(--navy-950);}

.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){ .news-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .news-grid{grid-template-columns:1fr;} }
.news-card{
  border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; background:var(--white);
  transition:transform .18s ease, box-shadow .18s ease;
}
.news-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.news-media{aspect-ratio:16/10; overflow:hidden; background:var(--surface-alt);}
.news-media img{width:100%; height:100%; object-fit:cover;}
.news-body{padding:22px 20px;}
.news-date{font-size:.78rem; color:var(--slate-400); font-weight:600; margin-bottom:8px;}
.news-card h3{font-size:1.02rem; margin-bottom:.5em;}
.news-card p{font-size:.88rem; color:var(--slate-500);}
.news-cat{
  display:inline-block; margin-bottom:10px; font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; padding:4px 10px; border-radius:999px;
}

/* Gallery tiles reuse .news-card's border/hover but drop the text body —
   the real photos this is sourced from (mesaexpo.com/galeri.html) carry no
   captions, so most tiles are image-only; margin/padding collapse to zero
   when there's no <figcaption>. */
/* align-self:start stops CSS Grid's default row-stretch from inflating this
   tile to match a taller .news-card sharing its row (the same stretch-vs-
   aspect-ratio conflict documented on .fair-card/.marquee-item above, just
   solved here with align-self instead of a flex-column wrapper since this
   tile has no sibling content to protect an inner media box from). */
.gallery-tile{ margin:0; cursor:pointer; aspect-ratio:4/3; align-self:start; }
.gallery-tile img{ display:block; width:100%; height:100%; object-fit:cover; }
.gallery-tile figcaption{ padding:10px 14px; font-size:.82rem; color:var(--slate-500); }

.lightbox{
  display:none; position:fixed; inset:0; z-index:200; background:rgba(6,11,26,.92);
  align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox figure{ margin:0; max-width:min(1000px,90vw); max-height:90vh; text-align:center; }
.lightbox-img{ display:block; max-width:100%; max-height:80vh; border-radius:var(--radius-s); margin:0 auto; cursor:pointer; }
.lightbox-caption{ margin-top:14px; color:var(--white); font-size:.9rem; }
.lightbox-close{
  position:absolute; top:20px; right:28px; background:none; border:none; color:var(--white);
  font-size:2.2rem; line-height:1; cursor:pointer; padding:6px 10px;
}
.lightbox-close:hover{ color:var(--blue-500); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--white);
  font-size:3rem; line-height:1; cursor:pointer; padding:10px 16px; opacity:.85;
}
.lightbox-nav:hover{ color:var(--blue-500); opacity:1; }
.lightbox-prev{ left:6px; }
.lightbox-next{ right:6px; }
@media (max-width:600px){ .lightbox-nav{ font-size:2.1rem; padding:6px 10px; } }

/* Review-submission modal — same fixed-overlay idea as .lightbox above, just
   a centered white card instead of a full-bleed photo viewer. */
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:300; background:rgba(6,11,26,.6);
  align-items:center; justify-content:center; padding:24px; overflow-y:auto;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  position:relative; width:100%; max-width:480px; background:var(--white);
  border-radius:var(--radius-l); padding:32px; box-shadow:var(--shadow-pop);
  max-height:90vh; overflow-y:auto;
}
.modal-box h3{ margin-top:0; margin-bottom:6px; font-size:1.25rem; color:var(--navy-950); }
.modal-lead{ font-size:.88rem; color:var(--slate-500); margin-bottom:20px; }
.modal-close{
  position:absolute; top:14px; right:16px; background:none; border:none; color:var(--slate-500);
  font-size:1.8rem; line-height:1; cursor:pointer; padding:4px 8px;
}
.modal-close:hover{ color:var(--ink); }
@media (max-width:560px){ .modal-box{ padding:24px 20px; } }

/* Contact */
.contact-layout{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start;}
@media (max-width:900px){ .contact-layout{grid-template-columns:1fr;} }
.contact-info-list{display:flex; flex-direction:column; gap:22px; margin-top:28px;}
.contact-info-row{display:flex; gap:16px; align-items:flex-start;}
.contact-info-row .icon-badge{margin:0; flex:none;}
.contact-info-row strong{display:block; font-size:.94rem; color:var(--navy-950); margin-bottom:2px;}
.contact-info-row span{display:block; font-size:.9rem; color:var(--slate-500);}
.contact-info-row a{color:inherit;}
.contact-info-row a:hover{color:var(--blue-600); text-decoration:underline;}

.contact-form{
  background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-l); padding:32px;
}

.contact-map-block{margin-top:56px;}
.contact-map{
  margin-top:20px; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  box-shadow:var(--shadow-card);
}
.contact-map iframe{display:block; width:100%;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr;} }
.form-field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:.82rem; font-weight:700; color:var(--slate-600);}
/* ::after (not a DOM child) so the asterisk survives i18n.js's label swaps —
   those overwrite textContent wholesale, which would silently delete a real
   child span the same way it already does with a literal <br> (see CLAUDE.md). */
.form-field label.required::after{content:" *"; color:var(--rose-600);}
.form-field input, .form-field textarea, .form-field select{
  border:1px solid var(--line); border-radius:9px; padding:12px 14px; background:var(--white);
  outline:none; color:var(--ink); font-size:.92rem; resize:vertical;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{border-color:var(--blue-600);}
.form-success{
  display:none; align-items:center; gap:10px;
  background:var(--teal-100); color:var(--teal-600); border-radius:9px;
  padding:12px 14px; font-size:.88rem; font-weight:600; margin-bottom:16px;
}
.form-success.show{display:flex;}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* Site-wide floating WhatsApp button (present on every page, not just contact.html).
   .whatsapp-float-ping is an absolutely-positioned circle painted before the icon in
   the DOM so the icon stacks on top of it; it expands/fades on its own loop to read
   as a radar "ping" behind the gently bobbing button. */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:1000;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25d366; color:var(--white);
  box-shadow:0 10px 24px -8px rgba(37,211,102,.6), var(--shadow-card);
  animation:whatsapp-float-bounce 2.6s ease-in-out infinite;
}
.whatsapp-float:hover{animation-play-state:paused; filter:brightness(1.08);}
.whatsapp-float-ping{
  position:absolute; inset:0; border-radius:50%;
  background:#25d366; opacity:.55;
  animation:whatsapp-float-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes whatsapp-float-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
@keyframes whatsapp-float-ping{
  0%{transform:scale(1); opacity:.55;}
  100%{transform:scale(1.8); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float, .whatsapp-float-ping{animation:none;}
}
@media (max-width:560px){
  .whatsapp-float{right:16px; bottom:16px; width:52px; height:52px;}
}