:root{
  --red:#D22027; --red-dark:#A31118; --black:#111114; --gray:#5c5c66;
  --line:#ececf0; --bg:#fff; --radius:22px;
  --shadow:0 6px 24px rgba(17,17,20,.06);
  --shadow-hover:0 18px 44px rgba(210,32,39,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--black);-webkit-font-smoothing:antialiased;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* loader */
.loader-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--red),#ff6b71);border-radius:0 3px 3px 0;opacity:0;transition:width .3s ease,opacity .3s ease}
.loader-bar.run{opacity:1;width:70%}
.loader-bar.done{width:100%;opacity:0}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand img{height:40px;width:auto}
.header-right{display:flex;align-items:center;gap:12px}
.lang-toggle{display:flex;border:1.5px solid var(--line);border-radius:100px;overflow:hidden;background:#fff}
.lang-toggle a{font-size:.78rem;font-weight:600;padding:8px 14px;color:var(--gray);transition:all .25s ease;letter-spacing:.04em}
.lang-toggle a.active{background:var(--red);color:#fff}
.header-cta{font-size:.85rem;font-weight:600;color:#fff;background:var(--red);padding:10px 22px;border-radius:100px;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 4px 14px rgba(210,32,39,.28);white-space:nowrap}
.header-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(210,32,39,.36)}

/* hero */
.hero{max-width:1240px;margin:0 auto;padding:66px 24px 14px;text-align:center;position:relative}
.hero::before{content:"";position:absolute;inset:-40px 0 0;background:radial-gradient(600px 260px at 15% 0%,rgba(210,32,39,.06),transparent 70%),radial-gradient(600px 260px at 85% 10%,rgba(210,32,39,.05),transparent 70%);pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);background:rgba(210,32,39,.07);border:1px solid rgba(210,32,39,.18);padding:7px 18px;border-radius:100px;margin-bottom:22px;animation:fadeUp .7s ease both}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.7rem);font-weight:800;line-height:1.14;letter-spacing:-.02em;animation:fadeUp .7s .08s ease both}
.hero h1 span{background:linear-gradient(100deg,var(--red) 0%,#ff5b62 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:560px;margin:18px auto 0;color:var(--gray);font-size:clamp(.95rem,2.4vw,1.08rem);font-weight:300;animation:fadeUp .7s .16s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* search */
.toolbar{max-width:1240px;margin:0 auto;padding:6px 24px 8px;display:flex;flex-direction:column;align-items:center;gap:18px;animation:fadeUp .7s .24s ease both}
.toolbar .filters{max-width:none;margin:0;padding:0;width:100%;justify-content:center;animation:none}
.search-wrap{width:100%;display:flex;justify-content:center}
.search-box{position:relative;display:flex;align-items:center;gap:10px;width:440px;max-width:100%;background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:0 20px;height:52px;box-shadow:var(--shadow);transition:border-color .25s ease,box-shadow .25s ease}
.search-box:focus-within{border-color:rgba(210,32,39,.45);box-shadow:0 8px 26px rgba(210,32,39,.13)}
.search-box svg{flex:none;color:var(--gray);transition:color .25s ease}
.search-box:focus-within svg{color:var(--red)}
.search-box input[type=search]{flex:1;min-width:0;border:none;outline:none;background:none;font-family:inherit;font-size:.95rem;font-weight:300;color:var(--black);height:100%}
.search-box input[type=search]::placeholder{color:var(--gray);opacity:.75}
.search-box input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;cursor:pointer;background:var(--gray);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat}
.search-box input[type=search]::-webkit-search-cancel-button:hover{background:var(--red)}
.search-box.is-busy svg{color:var(--red);animation:pulse 1s ease-in-out infinite}

/* filters */
.filters{max-width:1240px;margin:0 auto;padding:26px 24px 8px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;animation:fadeUp .7s .24s ease both}
.filter-btn{font-size:.88rem;font-weight:500;padding:11px 26px;border-radius:100px;border:1.5px solid var(--line);color:var(--gray);background:#fff;transition:all .25s ease;display:flex;align-items:center;gap:8px}
.filter-btn .count{font-size:.7rem;font-weight:600;background:#f2f2f5;color:var(--gray);padding:2px 8px;border-radius:100px;transition:all .25s ease}
.filter-btn:hover{border-color:rgba(210,32,39,.4);color:var(--red)}
.filter-btn.active{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 18px rgba(210,32,39,.3)}
.filter-btn.active .count{background:rgba(255,255,255,.22);color:#fff}

/* grid + cards */
.grid{max-width:1240px;margin:0 auto;padding:34px 24px 90px;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:28px;transition:opacity .2s ease,transform .2s ease}
.grid.swapping{opacity:0;transform:translateY(8px)}
.card{border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.8,.25,1),box-shadow .35s ease;animation:cardIn .55s ease both;position:relative}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.card-link{display:flex;flex-direction:column;height:100%}
.card-media{position:relative;overflow:hidden;aspect-ratio:16/10.4;background:#f4f4f7}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.25,1)}
.card:hover .card-media img{transform:scale(1.06)}
.card-tag{position:absolute;top:14px;left:14px;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);padding:6px 14px;border-radius:100px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.card-footer{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 22px 26px;background:linear-gradient(to top,rgba(210,32,39,.16) 0%,rgba(210,32,39,.05) 46%,#fff 100%)}
.card-footer h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.card-footer .card-sub{font-size:.83rem;color:var(--gray);font-weight:300;margin-top:4px}
.card-arrow{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;opacity:0;transform:translateY(8px);transition:all .3s ease;box-shadow:0 6px 16px rgba(210,32,39,.35)}
.card:hover .card-arrow{opacity:1;transform:translateY(0)}
.empty-msg{grid-column:1/-1;text-align:center;color:var(--gray);padding:60px 0;font-weight:300}

/* ---------- detail (compact: photo left, meta right) ---------- */
.detail{max-width:1080px;margin:0 auto;padding:30px 24px 90px;animation:fadeUp .5s ease both}
.back-btn{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;font-weight:500;color:var(--gray);padding:9px 18px;border-radius:100px;border:1.5px solid var(--line);transition:all .25s ease;margin-bottom:22px;background:#fff}
.back-btn:hover{color:var(--red);border-color:rgba(210,32,39,.4);transform:translateX(-3px)}
.detail-head{margin-bottom:20px}
.detail-tag{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);background:rgba(210,32,39,.08);padding:6px 14px;border-radius:100px;margin-bottom:12px}
.detail-head h1{font-size:clamp(1.55rem,4vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.detail-head .detail-sub{color:var(--gray);font-weight:300;margin-top:8px;max-width:640px;font-size:.95rem}
.detail-top{display:grid;grid-template-columns:1.65fr .85fr;gap:26px;align-items:stretch;margin-bottom:36px}
.detail-hero{border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 40px rgba(17,17,20,.12)}
.detail-hero img{width:100%;height:100%;object-fit:cover;min-height:280px}
.detail-meta{border:1px solid var(--line);border-radius:18px;padding:22px;background:linear-gradient(to top,rgba(210,32,39,.05),#fff);display:flex;flex-direction:column;justify-content:center}
.detail-meta h4{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:3px}
.detail-meta .meta-val{font-size:.92rem;font-weight:500;margin-bottom:14px}
.meta-cta{display:block;text-align:center;margin-top:4px;background:var(--red);color:#fff;font-weight:600;font-size:.88rem;padding:12px;border-radius:100px;box-shadow:0 6px 18px rgba(210,32,39,.3);transition:transform .25s ease}
.meta-cta:hover{transform:translateY(-2px)}
.detail-text{max-width:760px}
.detail-text h2{font-size:1.22rem;font-weight:700;margin:24px 0 8px}
.detail-text h2:first-child{margin-top:0}
.detail-text p{color:#3c3c44;font-weight:300;margin-bottom:12px}

.video-block{margin-top:44px}
.video-block h2,.gallery h2{font-size:1.3rem;font-weight:700;margin-bottom:16px}
.video-block video{width:100%;border-radius:var(--radius);box-shadow:0 20px 50px rgba(17,17,20,.14);background:#000}
.gallery{margin-top:44px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.gallery-grid img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;width:100%;cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease}
.gallery-grid img:hover{transform:scale(1.025);box-shadow:0 12px 28px rgba(17,17,20,.16)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(12,12,14,.9);display:flex;align-items:center;justify-content:center;padding:26px;opacity:0;pointer-events:none;transition:opacity .28s ease}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:100%;max-height:92vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox .close-x{position:absolute;top:18px;right:22px;color:#fff;font-size:1.7rem;font-weight:300;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12)}

/* contact modal */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;pointer-events:none;transition:opacity .25s ease}
.modal.open{opacity:1;pointer-events:auto}
.modal-backdrop{position:absolute;inset:0;background:rgba(12,12,14,.55);backdrop-filter:blur(4px)}
.modal-card{position:relative;background:#fff;border-radius:24px;padding:38px 34px;max-width:420px;width:100%;text-align:center;box-shadow:0 40px 90px rgba(0,0,0,.3);transform:translateY(14px) scale(.97);transition:transform .28s cubic-bezier(.2,.8,.25,1)}
.modal.open .modal-card{transform:translateY(0) scale(1)}
.modal-logo{height:32px;width:auto;margin:0 auto 16px}
.modal-card h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.modal-card p{font-size:.88rem;color:var(--gray);font-weight:300;margin:8px 0 22px}
.modal-x{position:absolute;top:12px;right:16px;font-size:1.5rem;color:var(--gray);width:38px;height:38px;border-radius:50%;transition:background .2s}
.modal-x:hover{background:#f4f4f6}
.modal-actions{display:flex;flex-direction:column;gap:10px}
.m-btn{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.9rem;font-weight:600;padding:13px;border-radius:100px;transition:transform .22s ease,box-shadow .22s ease}
.m-btn:hover{transform:translateY(-2px)}
.m-wa{background:#25D366;color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.35)}
.m-tel{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(210,32,39,.3)}
.m-mail{border:1.5px solid var(--line);color:var(--black)}

/* footer */
.site-footer{border-top:1px solid var(--line);background:linear-gradient(to top,rgba(210,32,39,.07),#fff);padding:44px 24px;text-align:center}
.site-footer img{height:34px;width:auto;margin:0 auto 14px}
.site-footer p{font-size:.85rem;color:var(--gray);font-weight:300;display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;align-items:center}
.site-footer a{color:var(--red);font-weight:500}
.wa-btn{display:inline-flex;align-items:center;gap:6px;background:#25D366;color:#fff !important;font-size:.78rem;font-weight:600;padding:7px 14px;border-radius:100px;box-shadow:0 4px 12px rgba(37,211,102,.35);transition:transform .22s ease}
.wa-btn:hover{transform:translateY(-2px)}

/* responsive */
@media (max-width:880px){
  .detail-top{grid-template-columns:1fr}
  .detail-hero img{min-height:0}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;gap:22px;padding-top:26px}
  .hero{padding-top:48px}
  .header-inner{padding:12px 14px}
  .brand img{height:32px}
  .header-cta{padding:9px 14px;font-size:.76rem}
  .lang-toggle a{padding:7px 11px;font-size:.72rem}
  .filter-btn{padding:10px 20px;font-size:.84rem}
  .toolbar{gap:12px;padding:4px 14px 6px}
  .search-box{height:48px;padding:0 16px;width:100%}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .modal-card{padding:30px 22px}
}

/* ---------- search ---------- */
.search-wrap{max-width:1240px;margin:0 auto;padding:22px 24px 0;display:flex;justify-content:center;animation:fadeUp .7s .2s ease both}
.search-box{display:flex;align-items:center;gap:10px;width:100%;max-width:460px;border:1.5px solid var(--line);border-radius:100px;padding:12px 20px;background:#fff;transition:border-color .25s ease,box-shadow .25s ease;color:var(--gray)}
.search-box:focus-within{border-color:var(--red);box-shadow:0 6px 20px rgba(210,32,39,.12)}
.search-box input{border:none;outline:none;flex:1;font-family:inherit;font-size:.92rem;background:transparent;color:var(--black)}
.search-box input::placeholder{color:#a5a5b0;font-weight:300}
.search-box input::-webkit-search-cancel-button{-webkit-appearance:none}