/* ============================================================
   SINAR REZEKI INFOTECH — components.css
   Section-level components. Tokens berasal dari style.css.
   ============================================================ */

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(170deg,var(--blue-tint) 0%,#fff 62%);padding-block:clamp(2.5rem,1.6rem + 3vw,4rem) clamp(3rem,2rem + 3.4vw,4.5rem);}
.hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:center;}
.hero-title{font-size:var(--fs-display);letter-spacing:-.028em;}
.hero-title em{font-style:normal;color:var(--blue);}
.hero-lead{margin-top:var(--s-5);font-size:var(--fs-lead);color:var(--text-muted);max-width:52ch;}
.hero-actions{margin-top:var(--s-8);display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;}
.hero-phone{display:inline-flex;align-items:center;gap:11px;min-height:46px;font-weight:600;color:var(--navy);}
.hero-phone .ico-circle{
  width:40px;height:40px;flex:none;border-radius:var(--r-full);
  background:var(--blue-soft);border:1px solid rgba(56,182,255,.28);
  display:inline-flex;align-items:center;justify-content:center;color:var(--navy);
}
.hero-phone small{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--text-muted);line-height:1.3;}
.hero-media{position:relative;}
.hero-frame{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);background:var(--blue-tint);aspect-ratio:1200/820;}
.hero-frame img{width:100%;height:100%;object-fit:cover;}
.hero-badge{
  position:absolute;left:-14px;bottom:-18px;display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:13px 17px;box-shadow:var(--sh-lg);max-width:min(280px,80%);
}
.hero-badge .ico-circle{width:40px;height:40px;flex:none;border-radius:var(--r-md);background:var(--blue-soft);display:inline-flex;align-items:center;justify-content:center;color:var(--navy);}
.hero-badge strong{display:block;font-size:var(--fs-sm);color:var(--navy);line-height:1.25;}
.hero-badge span{font-size:var(--fs-xs);color:var(--text-muted);}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:var(--s-10);}
  .hero-badge{left:0;bottom:-14px;}
}
@media (max-width:520px){
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .hero-phone{justify-content:center;}
}

/* ---------- TRUST BAR ---------- */
.trustbar{background:var(--navy);padding-block:var(--s-8);}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6);}
.trust-item{display:flex;gap:12px;align-items:flex-start;color:#fff;}
.trust-item .ico-circle{
  width:38px;height:38px;flex:none;border-radius:var(--r-md);
  background:rgba(127,208,255,.16);border:1px solid rgba(127,208,255,.28);
  display:inline-flex;align-items:center;justify-content:center;color:var(--blue-light);
}
.trust-item strong{display:block;font-size:var(--fs-sm);font-weight:600;color:#fff;line-height:1.3;}
.trust-item span{font-size:var(--fs-xs);color:#B7D6EC;}
@media (max-width:1024px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr;}}

/* ---------- SERVICE CARDS ---------- */
.svc-card .card-media{aspect-ratio:16/10;}
.svc-icon{
  width:42px;height:42px;border-radius:var(--r-md);background:var(--blue-soft);
  display:inline-flex;align-items:center;justify-content:center;color:var(--navy);flex:none;
}
.svc-card h3{margin-top:2px;}
.svc-card p{font-size:var(--fs-sm);color:var(--text-muted);}
.svc-list{display:grid;gap:7px;margin-top:2px;}
.svc-list li{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);color:var(--text-muted);}
.svc-list svg{flex:none;margin-top:5px;color:var(--blue);}

/* ---------- WHY US (split navy) ---------- */
.why-inner{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:center;}
.why-list{display:grid;gap:var(--s-6);margin-top:var(--s-8);}
.why-list li{display:flex;gap:var(--s-4);align-items:flex-start;}
.why-num{
  flex:none;width:38px;height:38px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:700;color:var(--blue-light);
  background:rgba(127,208,255,.14);border:1px solid rgba(127,208,255,.3);
}
.why-list strong{display:block;color:#fff;font-size:1rem;margin-bottom:3px;}
.why-list p{font-size:var(--fs-sm);color:#CFE4F2;}
.side-panel{background:#fff;border-radius:var(--r-xl);padding:var(--s-8);box-shadow:var(--sh-lg);}
.side-panel h3{font-size:1.25rem;margin-bottom:var(--s-3);}
.side-panel p{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s-6);}
.side-panel .btn{width:100%;}
.side-panel .btn + .btn{margin-top:var(--s-3);}
@media (max-width:960px){.why-inner{grid-template-columns:1fr;}}

/* ---------- PORTFOLIO ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5);}
.pf-card .card-media{aspect-ratio:4/3;}
.pf-card .card-body{padding:var(--s-5);gap:var(--s-2);}
.pf-card h3{font-size:1.05rem;}
.pf-card p{font-size:var(--fs-sm);color:var(--text-muted);}
.pf-note{margin-top:var(--s-6);font-size:var(--fs-sm);color:var(--text-muted);text-align:center;}
.pf-note a{display:inline-flex;align-items:center;min-height:36px;font-weight:600;}
@media (max-width:1024px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.pf-grid{grid-template-columns:1fr;}}

/* ---------- PROSES / CARA KERJA ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-5);counter-reset:step;}
.step{position:relative;background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--s-6) var(--s-5);box-shadow:var(--sh-xs);}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-full);margin-bottom:var(--s-4);
  background:var(--navy);color:#fff;font-size:var(--fs-xs);font-weight:700;
}
.step h3{font-size:1rem;margin-bottom:6px;}
.step p{font-size:var(--fs-sm);color:var(--text-muted);}
.step::after{
  content:"";position:absolute;right:-14px;top:calc(var(--s-6) + 17px);
  width:14px;height:2px;background:var(--border);
}
.step:last-child::after{display:none;}
@media (max-width:1100px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));}.step::after{display:none;}}
@media (max-width:720px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.steps{grid-template-columns:1fr;}}

/* ---------- TESTIMONI ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);}
.testi-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:var(--sh-sm);display:flex;flex-direction:column;}
.testi-card blockquote{font-size:var(--fs-sm);color:var(--text);line-height:1.65;flex:1;}
.testi-card figcaption{display:flex;align-items:center;gap:11px;margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--border-soft);}
.testi-avatar{
  width:40px;height:40px;flex:none;border-radius:var(--r-full);
  background:var(--blue-soft);border:1px solid rgba(56,182,255,.28);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--fs-sm);color:var(--navy);
}
.testi-meta strong{display:block;font-size:var(--fs-sm);color:var(--navy);line-height:1.25;}
.testi-meta span{font-size:var(--fs-xs);color:var(--text-muted);}
.testi-empty{
  border:1px dashed var(--border);border-radius:var(--r-xl);
  padding:var(--s-10) var(--s-6);text-align:center;background:var(--gray-50);
}
.testi-empty h3{font-size:1.05rem;margin-bottom:var(--s-2);}
.testi-empty p{font-size:var(--fs-sm);color:var(--text-muted);max-width:56ch;margin-inline:auto;}
@media (max-width:1024px){.testi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.testi-grid{grid-template-columns:1fr;}}

/* ---------- FAQ ACCORDION ---------- */
.faq-list{display:grid;gap:var(--s-3);max-width:820px;margin-inline:auto;}
.faq-item{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--sh-xs);overflow:hidden;}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) var(--s-6);text-align:left;
  font-size:1rem;font-weight:600;color:var(--navy);min-height:56px;
}
.faq-q:hover{background:var(--gray-50);}
.faq-icon{flex:none;width:22px;height:22px;position:relative;}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--blue);border-radius:2px;transition:transform var(--dur-slow) var(--ease),opacity var(--dur) var(--ease);}
.faq-icon::before{left:0;top:10px;width:22px;height:2px;}
.faq-icon::after{left:10px;top:0;width:2px;height:22px;}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:rotate(90deg);opacity:0;}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease);}
.faq-item.is-open .faq-a{grid-template-rows:1fr;}
.faq-a > div{overflow:hidden;}
.faq-a p{padding:0 var(--s-6) var(--s-5);font-size:var(--fs-sm);color:var(--text-muted);}
.faq-a p + p{padding-top:0;}

/* ---------- CTA BAND ---------- */
.cta-band{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);padding-block:clamp(3rem,2rem + 3vw,4.25rem);}
.cta-band .container{text-align:center;}
.cta-band h2{color:#fff;max-width:26ch;margin-inline:auto;}
.cta-band p{color:#CFE4F2;font-size:var(--fs-lead);margin-top:var(--s-4);max-width:58ch;margin-inline:auto;}
.cta-actions{margin-top:var(--s-8);display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;}
@media (max-width:520px){.cta-actions{flex-direction:column;}.cta-actions .btn{width:100%;}}

/* ---------- PAGE HERO (halaman interior) ---------- */
.page-hero{background:linear-gradient(170deg,var(--blue-tint),#fff);padding-block:clamp(2.25rem,1.6rem + 2.4vw,3.25rem) clamp(2rem,1.4rem + 2vw,3rem);border-bottom:1px solid var(--border-soft);}
.page-hero h1{max-width:24ch;}
.page-hero .section-sub{max-width:62ch;}
.page-hero--center{text-align:center;}
.page-hero--center h1,.page-hero--center .section-sub{margin-inline:auto;}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--s-4);}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;}
.breadcrumb li{display:inline-flex;align-items:center;min-height:32px;}
.breadcrumb a{color:var(--text-muted);display:inline-flex;align-items:center;min-height:32px;padding:0 2px;}
.breadcrumb a:hover{color:var(--navy);}
.breadcrumb li[aria-current]{color:var(--navy);font-weight:600;}
.breadcrumb .sep{color:var(--border);}

/* ---------- BLOG LISTING ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);}
@media (max-width:1024px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr;}}
.post-card .card-media{aspect-ratio:16/10;}
.post-card .card-body{gap:10px;}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--text-muted);}
.post-meta .cat{color:var(--navy);font-weight:600;}
.post-meta .dot{color:var(--border);}
.post-card h3{font-size:1.08rem;line-height:1.38;}
.post-card h3 a{color:var(--navy);}
.post-card h3 a:hover{color:var(--blue);}
.post-excerpt{font-size:var(--fs-sm);color:var(--text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}

/* ---------- PAGINATION ---------- */
.pagination{margin-top:var(--s-10);display:flex;justify-content:center;}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:6px;}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;min-height:42px;padding:0 12px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:500;color:var(--navy);background:#fff;
}
.pagination .page-numbers:hover{background:var(--blue-tint);border-color:var(--blue);}
.pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff;}

/* ---------- ARTICLE / SINGLE POST ---------- */
.article-wrap{padding-block:clamp(2rem,1.4rem + 2vw,3rem) var(--section-y);}
.article-head{max-width:var(--maxw-prose);}
.article-head h1{font-size:var(--fs-h1);margin-block:var(--s-3) var(--s-4);}
.article-lead{font-size:var(--fs-lead);color:var(--text-muted);}
.article-byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--s-5);font-size:var(--fs-xs);color:var(--text-muted);}
.byline-avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--blue-soft);border:1px solid rgba(56,182,255,.28);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-xs);color:var(--navy);}
.article-figure{margin-block:var(--s-8);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md);aspect-ratio:16/9;background:var(--blue-tint);}
.article-figure img{width:100%;height:100%;object-fit:cover;}
.entry-content{max-width:var(--maxw-prose);}
.entry-content > * + *{margin-top:var(--s-5);}
.entry-content p{font-size:1.0625rem;line-height:1.78;color:var(--text);}
.entry-content h2{font-size:var(--fs-h2);margin-top:var(--s-10);}
.entry-content h3{font-size:1.18rem;margin-top:var(--s-8);}
.entry-content ul,.entry-content ol{display:grid;gap:9px;padding-left:2px;}
.entry-content ul li{position:relative;padding-left:26px;font-size:1.0625rem;line-height:1.7;}
.entry-content ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--blue);}
.entry-content ol{counter-reset:li;}
.entry-content ol li{position:relative;padding-left:32px;font-size:1.0625rem;line-height:1.7;counter-increment:li;}
.entry-content ol li::before{content:counter(li);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:var(--r-sm);background:var(--blue-soft);color:var(--navy);font-size:var(--fs-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.entry-content a{color:var(--navy);font-weight:500;text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:3px;}
.entry-content a:hover{color:var(--blue);}
.entry-content blockquote{border-left:3px solid var(--blue);background:var(--blue-tint);padding:var(--s-5) var(--s-6);border-radius:0 var(--r-md) var(--r-md) 0;font-size:1.0625rem;}
.entry-content img{border-radius:var(--r-lg);}
.entry-content table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.entry-content th,.entry-content td{border:1px solid var(--border);padding:10px 12px;text-align:left;}
.entry-content th{background:var(--gray-50);color:var(--navy);font-weight:600;}

/* Inline CTA di artikel */
.article-cta{
  max-width:var(--maxw-prose);margin-top:var(--s-10);
  background:var(--blue-tint);border:1px solid rgba(56,182,255,.24);
  border-radius:var(--r-xl);padding:var(--s-8);
}
.article-cta h3{font-size:1.16rem;margin-bottom:var(--s-2);}
.article-cta p{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s-5);}
.article-cta .btn + .btn{margin-left:var(--s-3);}
@media (max-width:520px){.article-cta .btn{width:100%;}.article-cta .btn + .btn{margin:var(--s-3) 0 0;}}

/* Tags & share */
.article-tags{max-width:var(--maxw-prose);margin-top:var(--s-8);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.tag-pill{font-size:var(--fs-xs);font-weight:500;color:var(--navy);background:var(--gray-100);padding:6px 12px;border-radius:var(--r-full);}
.tag-pill:hover{background:var(--blue-soft);}

/* Post nav prev/next */
.post-nav{max-width:var(--maxw-prose);margin-top:var(--s-10);padding-top:var(--s-6);border-top:1px solid var(--border-soft);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
.post-nav a{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--navy);}
.post-nav a small{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--text-muted);margin-bottom:3px;}
.post-nav .next{text-align:right;}
@media (max-width:600px){.post-nav{grid-template-columns:1fr;}.post-nav .next{text-align:left;}}

/* Related posts */
.related{background:var(--gray-50);border-top:1px solid var(--border-soft);padding-block:var(--section-y);}

/* ---------- MEDIA FALLBACK (tidak pernah kotak kosong) ---------- */
.card-media-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 120% at 22% 12%, rgba(56,182,255,.20) 0%, rgba(56,182,255,.06) 46%, transparent 72%),
    linear-gradient(155deg,#EEF6FC 0%,#DCEEFB 100%);
  color:var(--navy);
}
.card-media-fallback::before{
  content:"";position:absolute;width:44%;aspect-ratio:1;border-radius:var(--r-full);
  background:rgba(255,255,255,.55);
}
.card-media-fallback svg{position:relative;z-index:1;opacity:.85;}
.hero-frame .card-media-fallback{border-radius:var(--r-xl);}

/* ---------- PROSE PAGE (about / generic) ---------- */
.page-content{padding-block:var(--section-y);}
.prose{max-width:var(--maxw-prose);}
.prose > * + *{margin-top:var(--s-5);}
.prose h2{font-size:var(--fs-h2);margin-top:var(--s-10);}
.prose h3{font-size:1.16rem;margin-top:var(--s-8);}
.prose p{font-size:1.0625rem;line-height:1.78;}
.prose ul{display:grid;gap:9px;}
.prose ul li{position:relative;padding-left:26px;font-size:1.0625rem;}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--blue);}

/* Value cards (about) */
.value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-8);}
.value-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-xs);}
.value-card .svc-icon{margin-bottom:var(--s-4);}
.value-card h3{font-size:1.05rem;margin-bottom:6px;}
.value-card p{font-size:var(--fs-sm);color:var(--text-muted);}
@media (max-width:1024px){.value-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.value-grid{grid-template-columns:1fr;}}

/* ---------- SERVICE DETAIL PAGE ---------- */
.svc-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:center;}
.svc-hero-media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:16/10;background:var(--blue-tint);}
.svc-hero-media img{width:100%;height:100%;object-fit:cover;}
@media (max-width:900px){.svc-hero{grid-template-columns:1fr;}}
.problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);}
.problem-card{background:#fff;border:1px solid var(--border-soft);border-left:3px solid var(--blue);border-radius:var(--r-md);padding:var(--s-5) var(--s-6);box-shadow:var(--sh-xs);}
.problem-card h3{font-size:1rem;margin-bottom:5px;}
.problem-card p{font-size:var(--fs-sm);color:var(--text-muted);}
@media (max-width:1024px){.problem-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.problem-grid{grid-template-columns:1fr;}}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-8);}
.check-grid li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-sm);color:var(--text);}
.check-grid svg{flex:none;margin-top:4px;color:var(--blue);}
@media (max-width:640px){.check-grid{grid-template-columns:1fr;}}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-list{display:grid;gap:var(--s-5);}
.contact-item{display:flex;gap:13px;align-items:flex-start;}
.contact-item .svc-icon{width:40px;height:40px;}
.contact-item strong{display:block;font-size:var(--fs-sm);color:var(--navy);margin-bottom:2px;}
.contact-item p{font-size:var(--fs-sm);color:var(--text-muted);}
.contact-item a{font-size:var(--fs-sm);color:var(--text-muted);display:inline-flex;align-items:center;min-height:36px;}
.contact-item a:hover{color:var(--blue);}
.form-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:var(--s-8);box-shadow:var(--sh-md);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}
.field{display:grid;gap:6px;margin-bottom:var(--s-4);}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--navy);}
.field .req{color:#C0392B;}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:var(--fs-sm);color:var(--text);
  padding:11px 13px;min-height:46px;
  background:#fff;border:1.5px solid var(--border);border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
.field-hint{font-size:var(--fs-xs);color:var(--text-muted);}
.form-alert{border-radius:var(--r-md);padding:12px 15px;font-size:var(--fs-sm);margin-bottom:var(--s-5);}
.form-alert.ok{background:#E8F7EE;border:1px solid #A8DFBE;color:#1B6E3C;}
.form-alert.err{background:#FDECEA;border:1px solid #F5B7B1;color:#96281B;}

/* ---------- MAP / EMPTY-STATE NOTE ---------- */
.info-note{
  background:var(--gray-50);border:1px dashed var(--border);border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-6);font-size:var(--fs-sm);color:var(--text-muted);
}
.info-note strong{color:var(--navy);}