:root{
  --green:#0F6D3E;
  --green2:#1FA463;
  --light:#EAF6EF;
  --yellow:#F4C430;
  --text:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:#fff}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 18px}
.section{padding:42px 0}
h1,h2,h3{margin:0 0 10px}
p{color:var(--muted);line-height:1.7}
img{max-width:100%;height:auto;border-radius:12px}

.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid rgba(15,23,42,.08);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo img{width:48px;height:48px;object-fit:contain;border-radius:12px}
.brand-text{line-height:1.15}
.brand-name{font-weight:900}
.brand-tag{font-size:12px;color:var(--muted)}

.site-nav{display:flex;align-items:center;gap:18px}
.menu{display:flex;list-style:none;gap:18px;margin:0;padding:0}
.menu a{font-weight:700;color:#0f172a;opacity:.85}
.menu a:hover{opacity:1}
.nav-meta{font-size:12px;color:var(--muted);white-space:nowrap}
.nav-phone{color:var(--green);font-weight:800}

.nav-toggle{display:none;border:0;background:transparent;padding:10px;border-radius:12px}
.nav-toggle span{display:block;width:24px;height:2px;background:#0f172a;margin:5px 0}

.hero{position:relative;min-height:420px;background-size:cover;background-position:center;border-bottom:1px solid rgba(15,23,42,.08)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(15,109,62,.82) 0%, rgba(15,109,62,.35) 55%, rgba(15,109,62,.10) 100%)}
.hero-inner{position:relative;display:flex;align-items:center;min-height:420px}
.hero-copy{max-width:680px;color:#fff}
.hero-copy h1{font-size:46px;letter-spacing:-.6px}
.hero-copy p{color:rgba(255,255,255,.92);font-size:16px;margin:8px 0 18px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;font-weight:900;border:1px solid transparent;cursor:pointer}
.btn-yellow{background:var(--yellow);color:#0b1b12}
.btn-green{background:var(--green2);color:#062012}
.btn-outline{background:#fff;border-color:rgba(15,23,42,.14);color:#0f172a}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.arrow{font-size:18px;line-height:1}

.quick{margin-top:15px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align: center;}
.quick-card{background:var(--green);color:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.qc-icon{font-size:22px;margin-bottom:8px}
.qc-title{font-weight:900;margin-bottom:6px}
.qc-desc{font-size:12px;color:rgba(255,255,255,.88);line-height:1.4}

.info-bar{padding:18px 0;margin-top: 15px;background:var(--light);border-top:1px solid rgba(15,23,42,.06);border-bottom:1px solid rgba(15,23,42,.06)}
.info-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.info-left{display:flex;align-items:center;gap:10px}
.info-badge{width:34px;height:34px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(2,6,23,.06)}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:14px}
.link{color:var(--green);font-weight:900}

.news-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.post-card{background:var(--card);border-radius:var(--radius);padding:12px;box-shadow:0 10px 30px rgba(2,6,23,.06)}
.post-card h3{font-size:14px;margin:10px 0 6px}
.meta{font-size:12px;color:var(--muted)}
.thumb-ph{height:140px;border-radius:12px;background:var(--light);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:800}

.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card-soft{background:linear-gradient(180deg, #EAF6EF 0%, #ffffff 100%)}
.card-title{font-weight:900;margin-bottom:10px}
.check{margin:0 0 12px;padding-left:18px}
.check li{margin:6px 0;color:#14532d}
.w100{width:100%;justify-content:center}
.mini-map{margin-top:12px;background:#fff;border:1px dashed rgba(15,23,42,.18);border-radius:12px;padding:14px;color:var(--muted)}

.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
.about-photo{background:var(--light);border-radius:var(--radius);padding:10px}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.site-footer{background:#0b1b12;color:#e5e7eb;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;gap:16px;padding:22px 0}
.footer-left span{color:rgba(229,231,235,.8)}

.post-line{padding:16px;border-bottom:1px solid rgba(15,23,42,.08)}
.single-thumb{margin:14px 0}

/* Floating WA */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:8px;background:var(--green2);color:#062012;padding:10px 12px;border-radius:999px;box-shadow:var(--shadow);font-weight:900}
.wa-icon{background:var(--yellow);color:#0b1b12;border-radius:999px;padding:6px 8px;font-size:12px}
.wa-text{font-size:13px}

/* Responsive */
@media (max-width: 980px){
  .posts-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width: 768px){
  .wa-chat,
  .wa-button,
  .wa-float,
  .whatsapp-chat{
    bottom: 90px !important; /* naikkan posisi */
    right: 14px !important;
  }
}
@media (max-width: 768px){
  .hero{
    padding: 26px 0 24px !important;
    min-height: unset !important;
  }

  .hero-copy h1{
    font-size: 26px !important;
    line-height: 1.22;
  }

  .hero-copy p{
    font-size: 14.5px;
    margin-bottom: 14px;
  }
}

@media (max-width: 768px){
  .hero-actions .btn{
    padding: 12px 14px !important;
    font-size: 15px;
    border-radius: 14px;
  }
}
@media (max-width: 768px){
  .quick-card{
    padding: 16px !important;
    border-radius: 16px;
  }

  .qc-icon{
    font-size: 26px;
    margin-bottom: 6px;
  }

  .qc-title{
    font-size: 16px;
    margin-bottom: 4px;
  }

  .qc-desc{
    font-size: 14px;
    line-height: 1.5;
  }
}
html, body{
  overflow-x: hidden;
}

@media (max-width: 760px){
  .hero{min-height:340px}
  .hero-inner{min-height:340px}
  .hero-copy h1{font-size:30px}
  .quick-grid{grid-template-columns:1fr}
  .posts-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}

  .nav-toggle{display:block}
  .site-nav{position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid rgba(15,23,42,.08);padding:14px;display:none;flex-direction:column;align-items:flex-start}
  .site-nav.open{display:flex}
  .menu{flex-direction:column;gap:12px}
}

.ia-scope{
  --ia-green-900:#0b2a1f;
  --ia-green-700:#14563a;
  --ia-muted:#64748b;
  --ia-text:#0f172a;
  --ia-border: rgba(15, 23, 42, .08);
  --ia-shadow: 0 10px 30px rgba(2, 6, 23, .10);
  --ia-radius: 18px;
}

/* Container & spacing (scoped) */
.ia-scope .ia-container{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}
.ia-scope .ia-section{
  padding: 44px 0 70px;
}

/* HERO */
.ia-scope .ia-hero{
  position: relative;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  padding: 72px 0 56px;
  color: #fff;
}
.ia-scope .ia-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,42,31,.92), rgba(11,42,31,.55));
}
.ia-scope .ia-hero__inner{ position: relative; }
.ia-scope .ia-breadcrumb{
  display:flex; gap:10px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  margin-bottom: 14px;
}
.ia-scope .ia-breadcrumb a{ color: rgba(255,255,255,.95); text-decoration:none; }
.ia-scope .ia-breadcrumb a:hover{ text-decoration: underline; }

.ia-scope .ia-hero__title{
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  margin: 0 0 10px;
}
.ia-scope .ia-hero__subtitle{
  margin: 0;
  max-width: 62ch;
  color: rgba(255,255,255,.90);
  font-size: 16px;
}

/* GRID */
.ia-scope .ia-grid{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px){
  .ia-scope .ia-grid{ grid-template-columns: 1fr; }
}

/* CARD */
.ia-scope .ia-card{
  background: #fff;
  border: 1px solid var(--ia-border);
  border-radius: var(--ia-radius);
  box-shadow: var(--ia-shadow);
  overflow: hidden;
}
.ia-scope .ia-card__head{
  padding: 16px 18px;
  border-bottom: 1px solid var(--ia-border);
  background: linear-gradient(180deg, #fff, #fbfbfb);
}
.ia-scope .ia-card__title{ margin:0; font-size:16px; color: var(--ia-text); }
.ia-scope .ia-card__body{ padding: 18px; }

/* Content typography (scoped) */
.ia-scope .ia-content{
  color: var(--ia-text);
  font-size: 16px;
  line-height: 1.75;
}
.ia-scope .ia-content h2,
.ia-scope .ia-content h3{ margin: 22px 0 10px; line-height: 1.25; }
.ia-scope .ia-content p{ margin: 0 0 14px; }
.ia-scope .ia-content a{ color: var(--ia-green-700); text-decoration:none; }
.ia-scope .ia-content a:hover{ text-decoration: underline; }

/* Sidebar */
.ia-scope .ia-sidebar{
  position: sticky;
  top: 18px;
  display: grid;
  gap: 16px;
}
@media (max-width: 980px){
  .ia-scope .ia-sidebar{ position: static; }
}

/* List */
.ia-scope .ia-list{
  margin: 0;
  padding-left: 18px;
  color: var(--ia-muted);
}
.ia-scope .ia-list li{ margin: 8px 0; }
.ia-scope .ia-list strong{ color: var(--ia-text); }

/* Buttons */
.ia-scope .ia-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration:none;
  border: 1px solid var(--ia-border);
  background:#fff;
  color: var(--ia-text);
}
.ia-scope .ia-btn--wa{
  width: 100%;
  background: #16a34a;
  border-color: rgba(255,255,255,.15);
  color: #fff;
}

/* batasi isi hero agar tidak terlalu lebar */
.ia-scope .ia-hero__inner{
  max-width: 1120px;   /* samakan dengan container konten */
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* KECILKAN TINGGI HERO */
.ia-scope .ia-hero{
  padding-top: 44px;   /* sebelumnya ±72px */
  padding-bottom: 36px;/* sebelumnya ±56px */
}

/* CTA */
.ia-scope .ia-card--cta{
  border: 1px solid rgba(20,86,58,.25);
  background: linear-gradient(180deg, rgba(232,243,238,.8), #fff);
}
.ia-scope .ia-cta__title{ margin: 0 0 6px; }
.ia-scope .ia-cta__text{ margin: 0 0 12px; color: var(--ia-muted); }

/* =========================
   FULL MOBILE CLEANUP (≤768px)
   ========================= */
@media (max-width: 768px){

  /* 0) Umum: container & jarak antar section */
  .container{
    width: calc(100% - 32px);
    margin: 0 auto;
  }
  .section{
    padding: 28px 0;              /* rapikan jarak section */
  }

  /* 1) HERO: ringkas + center + tombol stack */
  .hero{
    padding: 28px 0;
    background-position: center;
  }
  .hero-inner{
    padding: 0;
  }
  .hero-copy{
    max-width: 100%;
    text-align: center;
  }
  .hero-copy h1{
    font-size: 28px;
    line-height: 1.22;
    margin: 0 0 10px;
  }
  .hero-copy p{
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px;
    opacity: .95;
  }
  .hero-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .hero-actions .btn{
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  .hero-actions .arrow{
    position: relative;
    top: 1px;
  }

  /* 2) QUICK MENU: 1 kolom, card lebih nyaman */
  .quick{
    padding-top: 14px;
    padding-bottom: 10px;
  }
  .quick-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .quick-card{
    padding: 16px;
    border-radius: 14px;
  }
  .qc-icon{
    font-size: 26px;
    margin-bottom: 6px;
  }
  .qc-title{
    font-size: 16px;
    margin-bottom: 4px;
  }
  .qc-desc{
    font-size: 14px;
    line-height: 1.55;
  }

  /* 3) INFO BAR: jadi stack (kiri atas, tombol bawah) */
  .info-inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
    align-items: start;
    padding: 14px 0;
  }
  .info-left{
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .info-text{
    line-height: 1.45;
  }
  .info-bar .btn{
    width: 100%;
    justify-content: center;
  }

  /* 4) BERITA: 1 kolom + thumbnail rapi */
  .news-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .news-main{ order: 1; }
  .news-side{ order: 2; }

  .posts-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .post-card{
    border-radius: 14px;
    overflow: hidden;
  }
  .post-card .thumb img{
    width: 100%;
    height: 180px;              /* konsisten */
    object-fit: cover;
    display: block;
  }
  .post-card h3{
    font-size: 16px;
    line-height: 1.35;
    margin: 10px 0 6px;
  }
  .post-card .meta{
    font-size: 12px;
  }

  /* 5) SIDEBAR PPDB / WIDGET: full width + tombol 100% */
  .news-side .card,
  .news-side .widget,
  .news-side .widget > *{
    max-width: 100%;
  }
  .w100{
    width: 100%;
  }

  /* 6) ABOUT: 1 kolom + gambar fleksibel */
  .about-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
    align-items: start;
  }
  .about-photo img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
  }

  /* 7) KONTAK: 1 kolom */
  .contact-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .contact.card{
    padding: 16px;
    border-radius: 14px;
  }

  /* 8) Tombol: nyaman di jempol */
  .btn{
    padding: 12px 14px;
    border-radius: 12px;
  }

  /* 9) Biar tidak ada scroll horizontal */
  body, html{
    overflow-x: hidden;
  }
}
/* =========================
   HALUSKAN VISUAL MOBILE
   ========================= */
@media (max-width: 768px){

  /* 0) Global feel */
  body{
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* 1) HERO: overlay lebih lembut + baca lebih jelas */
  .hero{
    padding: 24px 0 22px !important;
    position: relative;
    background-position: center;
  }

  /* kalau overlay sudah ada (hero-overlay), haluskan */
  .hero-overlay{
    background: linear-gradient(
      90deg,
      rgba(6, 71, 52, .78),
      rgba(6, 71, 52, .40)
    ) !important;
    backdrop-filter: blur(2px);          /* bikin soft */
    -webkit-backdrop-filter: blur(2px);
  }

  /* teks hero lebih rapih */
  .hero-copy{
    text-align: center;
  }
  .hero-copy h1{
    font-size: 25px !important;
    line-height: 1.22;
    letter-spacing: .2px;
    margin: 0 0 8px;
  }
  .hero-copy p{
    font-size: 14.5px;
    line-height: 1.55;
    opacity: .92;
    margin: 0 0 14px;
  }

  /* 2) Tombol hero: lebih elegan */
  .hero-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: center;
  }
  .hero-actions .btn{
    width: 100%;
    max-width: 320px;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
  }
  .btn-yellow{
    filter: saturate(.95);
  }
  .btn-green{
    filter: saturate(.95);
  }

  /* 3) Quick section: spacing konsisten + card modern */
  .quick{
    padding-top: 12px;
    padding-bottom: 6px;
  }
  .quick-grid{
    gap: 14px !important;
  }
  .quick-card{
    padding: 16px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, .10);
    border: 1px solid rgba(255,255,255,.08);
    transform: translateZ(0);
  }
  .qc-icon{
    font-size: 26px;
    margin-bottom: 6px;
    opacity: .95;
  }
  .qc-title{
    font-size: 16px;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .qc-desc{
    font-size: 14px;
    line-height: 1.5;
    opacity: .92;
  }

  /* 4) Info bar: lebih clean */
  .info-bar{
    border-radius: 16px;
  }
  .info-inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 12px 0;
  }
  .info-bar .btn{
    width: 100%;
    border-radius: 14px;
  }

  /* 5) Card umum (PPDB / kontak / widget): radius + shadow soft */
  .card,
  .card-soft,
  .news-side .widget{
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, .08) !important;
  }

  /* 6) Gambar berita: proporsional */
  .post-card .thumb img{
    height: 175px !important;
    object-fit: cover;
    border-radius: 14px;
  }

  /* 7) WA Chat jangan nutup konten */
  .wa-chat,
  .wa-button,
  .wa-float,
  .whatsapp-chat{
    bottom: 92px !important;
    right: 14px !important;
  }

  /* 8) Anti geser samping */
  html, body{ overflow-x: hidden; }
}
@media (max-width: 768px){
  .btn:active{ transform: scale(.99); }
}
/* =========================
   SINGLE POST – GLOBAL
   ========================= */
.single{
  max-width: 860px;
  margin: 0 auto;
}

.single h1{
  line-height: 1.25;
}

.single .meta{
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 14px;
}

.single-thumb{
  margin: 18px 0 22px;
}

.single-thumb img{
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

/* konten artikel */
.single .content{
  font-size: 16px;
  line-height: 1.8;
  color: #111827;
}

.single .content p{
  margin-bottom: 16px;
}

.single .content h2,
.single .content h3{
  margin: 28px 0 12px;
  line-height: 1.3;
}

.single .content ul,
.single .content ol{
  padding-left: 18px;
  margin-bottom: 16px;
}

.single .content img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 12px 0;
}

/* =========================
   MOBILE OPTIMIZATION
   ========================= */
@media (max-width: 768px){

  /* container jangan terlalu mepet */
  .section{
    padding: 24px 0;
  }

  .container{
    width: calc(100% - 28px);
    margin: 0 auto;
  }

  .single{
    max-width: 100%;
  }

  /* judul lebih proporsional */
  .single h1{
    font-size: 26px;
    margin-bottom: 8px;
  }

  .single .meta{
    font-size: 13px;
    margin-bottom: 12px;
  }

  /* gambar utama */
  .single-thumb{
    margin: 14px 0 18px;
  }

  .single-thumb img{
    border-radius: 16px;
  }

  /* teks artikel */
  .single .content{
    font-size: 15.5px;
    line-height: 1.8;
  }

  .single .content p{
    margin-bottom: 14px;
  }

  .single .content h2{
    font-size: 20px;
  }

  .single .content h3{
    font-size: 18px;
  }

  /* link nyaman diklik */
  .single .content a{
    word-break: break-word;
  }

  /* anti scroll samping */
  html, body{
    overflow-x: hidden;
  }
}
/* =========================
   BREADCRUMB
   ========================= */
.breadcrumb{
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 14px;
}

.breadcrumb a{
  color: #14563a;
  text-decoration: none;
}

.breadcrumb a:hover{
  text-decoration: underline;
}

/* =========================
   BERITA TERKAIT
   ========================= */
.related-posts{
  margin-top: 48px;
}

.related-posts h2{
  font-size: 22px;
  margin-bottom: 16px;
}

.related-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.related-card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .08);
  padding: 14px;
}

.related-thumb img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.related-card h3{
  font-size: 16px;
  line-height: 1.35;
  margin: 10px 0 6px;
}

.related-card .meta{
  font-size: 13px;
  color: #6b7280;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px){

  .breadcrumb{
    font-size: 13px;
    margin-bottom: 10px;
  }

  .related-posts{
    margin-top: 36px;
  }

  .related-posts h2{
    font-size: 20px;
  }

  .related-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .related-thumb img{
    height: 180px;
  }
}
/* =========================
   SHARE BUTTONS
   ========================= */
.share-box{
  margin: 32px 0 12px;
  padding: 16px;
  border-radius: 16px;
  background: #f8fafc;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.share-label{
  font-weight: 600;
  color: #374151;
  margin-right: 4px;
}

.share-btn{
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s ease, box-shadow .1s ease;
}

.share-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* warna */
.share-btn.wa{ background:#16a34a; color:#fff; }
.share-btn.fb{ background:#1877f2; color:#fff; }
.share-btn.x { background:#111827; color:#fff; }
.share-btn.copy{
  background:#e5e7eb;
  color:#111827;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px){

  .share-box{
    justify-content: center;
    gap: 8px;
  }

  .share-label{
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
  }

  .share-btn{
    flex: 1 1 auto;
    min-width: 120px;
    text-align: center;
  }
}