/* ===== Base ===== */
*{box-sizing:border-box}
:root{
  --ink:#000;
  --lav:#2f3542;
  --pink:#f48c07;
  --r:16px;

  --wrap-max:1400px;   /* max content width */
  --header-h:120px;    /* approx header height */
  --ca-h:120px;        /* approx CA card height */
}
html,body{margin:0;padding:0}
body{
  font-family:'Patrick Hand', cursive;
  background:#fff; color:var(--ink);
}

/* ===== Wrapper ===== */
.wrap{
  width:min(92vw, var(--wrap-max));
  margin:24px auto 60px;
}

/* ===== HEADER ===== */
.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  border:2.5px solid var(--ink);
  border-radius:var(--r);
  background:#fff;
  min-height:var(--header-h);
  padding:14px 22px;
}
.header-left{display:flex; align-items:center; gap:14px}
.logo{width:84px; height:auto; display:block}
.brand{margin:0; font-size:clamp(32px,3vw,56px)}
.header-right{display:flex; align-items:center; gap:16px}
.icon{width:clamp(26px,2.4vw,36px); height:auto; display:block}

.section-two{
  display:flex;
  flex-direction:row;          
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,3vw,40px);
  margin:clamp(24px,4vw,48px) auto 16px;
  flex-wrap:nowrap;
}
.hero-img{
  width:100%;
  height:auto;
  display:block;
  flex:0 0 32%;               /* gambar fixed lebar 32% */
  max-width:32%;
}
.bubble{
  background:var(--pink);
  border:3px solid var(--lav);
  border-radius:var(--r);
  padding:clamp(16px,2vw,26px) clamp(18px,3vw,28px);
  font-size:clamp(22px,2.2vw,38px);
  line-height:1.35;
  margin:0;
  flex:1 1 58%;
  max-width:58%;
}

@media (max-width:900px){
  .section-two{
    flex-wrap:wrap;
    justify-content:center;
    gap:24px;
  }
  .hero-img,
  .bubble{
    flex:0 1 100%;
    max-width:100%;
  }
}

/* ===== CA CARD ===== */
.ca-card{
  margin:clamp(18px,4vw,32px) auto 0;
  border:3px solid var(--lav);
  border-radius:var(--r);
  padding:clamp(14px,2vw,22px) clamp(18px,3vw,26px);
  text-align:center;
  font-size:clamp(22px,2.2vw,38px);
  background:#f48c07;
  min-height:var(--ca-h);
  display:flex; align-items:center; justify-content:center;
  overflow-wrap:break-word; word-break:break-word;
}

/* ===== Extra responsive tweaks ===== */
@media (max-width:900px){
  .logo{width:72px}
  :root{ --header-h:100px; --ca-h:100px; }
}
@media (max-width:600px){
  .wrap{ width:92vw }
  .logo{ width:60px }
  .section-two{ text-align:center }
}


/* ===== SECTION 3: Meme Board ===== */
.section-three{
  margin:clamp(28px,4vw,56px) auto 0;
}
.meme-frame{
  border:4px solid #2f3542;
  background: color-mix(in srgb, #f48c07 85%, white); /* soft pink bg */
  border-radius:24px;
  padding:clamp(16px,2.5vw,28px);
}

/* Masonry-style columns */
.meme-board{
  column-count: 6;
  column-gap: clamp(10px,1.4vw,18px);
}
.meme-board img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  background:#fff;
  margin:0 0 clamp(10px,1.4vw,18px);
  break-inside: avoid;
  box-shadow: 0 0 0 2px #fff inset;
  transition: transform .15s ease;
}
.meme-board img:hover{ 
  transform: translateY(-2px); 
}

/* Responsive columns */
@media (max-width: 1200px){
  .meme-board{ column-count: 5; }
}
@media (max-width: 992px){
  .meme-board{ column-count: 4; }
}
@media (max-width: 768px){
  .meme-board{ column-count: 3; }
}
@media (max-width: 520px){
  .meme-board{ column-count: 2; }
}

.telegram-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #000; 
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}
.telegram-btn:hover {
  background: #333; 
}
.telegram-btn .icon {
  width: 18px;
  height: 18px;
}