:root{
  /* Palet: Emerald + Emas + Gading */
  --bg-deep:#0b2721;
  --bg-deeper:#081d18;
  --emerald-700:#0f5b47;
  --emerald-500:#14916f;
  --gold:#e6c35c;
  --gold-20:rgba(230,195,92,.22);
  --paper:#fffaf1;
  --paper-2:#f7f2e6;
  --ink:#13211c;
  --radius:22px;
  --shadow:0 18px 44px rgba(5,33,27,.32), 0 2px 8px rgba(5,33,27,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Amiri','Times New Roman',serif;color:var(--ink);min-height:100vh;
  background:
    radial-gradient(1200px 900px at 80% -10%, rgba(230,195,92,.12), transparent 60%),
    radial-gradient(900px 800px at 0% 100%, rgba(20,145,111,.22), transparent 55%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-deeper) 58%, #061712 100%);
  padding:36px 18px;overflow-x:hidden;position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 20px);
  mix-blend-mode:soft-light;opacity:.32;
}

.container{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:360px 1fr;gap:28px;align-items:start}

/* Kad profil */
.profile-card{
  position:sticky;top:28px;border-radius:var(--radius);
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  padding:34px 26px 26px;box-shadow:var(--shadow);
  border:1px solid rgba(230,195,92,.28);isolation:isolate;
}
.profile-card::before{
  content:"";position:absolute;inset:-1px;border-radius:calc(var(--radius) + 6px);padding:10px;
  background:
    conic-gradient(from 0deg, transparent 0 25%, rgba(230,195,92,.16) 0 50%, transparent 0 75%, rgba(230,195,92,.16) 0 100%);
  -webkit-mask:
    radial-gradient(100% 100% at 0 0, #000 97%, transparent) top left,
    radial-gradient(100% 100% at 100% 0, #000 97%, transparent) top right,
    radial-gradient(100% 100% at 100% 100%, #000 97%, transparent) bottom right,
    radial-gradient(100% 100% at 0 100%, #000 97%, transparent) bottom left;
  -webkit-mask-size:50% 50%; -webkit-mask-repeat:no-repeat; z-index:-1; filter:blur(.2px);
}

.cap-heading{display:flex;align-items:center;gap:10px;margin:2px 0 18px;color:#7a6a2a;letter-spacing:.3px}
.cap-heading .line{height:1px;flex:1;background:linear-gradient(90deg, transparent, var(--gold), transparent);opacity:.65}
.cap-heading .mark{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--gold-20);box-shadow:inset 0 0 0 1px rgba(230,195,92,.22);
  background:radial-gradient(circle at 60% 40%, rgba(230,195,92,.22), rgba(230,195,92,.07));
}

/* HERO IMAGE — bulat */
.profile-image{
  width:136px;height:136px;margin:0 auto 18px;border-radius:50%;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 35%),
    linear-gradient(135deg, var(--emerald-700) 0%, var(--emerald-500) 100%); /* fallback */
  display:grid;place-items:center;user-select:none;overflow:hidden;position:relative;
  border:2px solid var(--gold-20);
  box-shadow:0 16px 36px rgba(15,91,71,.42), 0 0 0 6px rgba(230,195,92,.08);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.profile-image img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
  filter:saturate(1.05) contrast(1.02);
}
.profile-image:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 20px 44px rgba(15,91,71,.5), 0 0 0 8px rgba(230,195,92,.12)}

.profile-name{
  text-align:center;font-size:32px;line-height:1.15;margin-bottom:8px;font-weight:700;
  background:linear-gradient(90deg,#15352d 0%, #1f6b57 45%, #15352d 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.2px;
}
.profile-bio{ text-align:center;font-size:18px;line-height:1.75;color:#405149;margin-bottom:8px }

.divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;opacity:.9}
.divider .dline{flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(31,80,62,.45), transparent)}
.footer{
  text-align:center;color:#59645e;font-size:15px;margin-top:8px;padding-top:14px;
  border-top:1px dashed rgba(31,80,62,.28)
}

/* Seksyen pautan */
.links-wrap{
  border-radius:var(--radius);padding:18px;
  background:
    linear-gradient(180deg, rgba(10,40,33,.35), rgba(7,28,22,.42)),
    radial-gradient(820px 420px at 120% -10%, rgba(230,195,92,.12), transparent 60%),
    linear-gradient(180deg, rgba(20,145,111,.18), rgba(20,145,111,.10));
  border:1px solid rgba(230,195,92,.22);
  box-shadow:0 16px 40px rgba(4,24,19,.36), inset 0 1px 0 rgba(255,255,255,.04);
}
.links-header{display:flex;align-items:center;gap:10px;margin:0 6px 14px;color:#edd27a;text-shadow:0 1px 0 rgba(0,0,0,.25);letter-spacing:.4px}
.links-header .line{height:1px;flex:1;background:linear-gradient(90deg, transparent, rgba(230,195,92,.6), transparent)}
.links-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px}

.link-item{
  position:relative;display:flex;align-items:center;gap:16px;text-decoration:none;color:#0f2a22;
  background:linear-gradient(180deg, var(--paper), #fff7e6);
  border:1px solid rgba(230,195,92,.34);
  border-radius:18px;padding:18px 18px;
  box-shadow:0 12px 26px rgba(10,42,33,.2);
  overflow:hidden;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  isolation:isolate;
}
.link-item::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(135deg, rgba(230,195,92,.26), transparent 35%) top left no-repeat,
    linear-gradient(-45deg, rgba(230,195,92,.16), transparent 35%) bottom right no-repeat;
  background-size:120px 120px, 120px 120px;opacity:.35;
}
.link-item:hover{
  transform:translateY(-6px);
  border-color:rgba(230,195,92,.58);
  background:linear-gradient(180deg, #fffdf6, var(--paper));
  box-shadow:0 18px 44px rgba(10,42,33,.28);
}

.link-icon{
  width:56px;height:56px;display:grid;place-items:center;flex-shrink:0;border-radius:14px;
  background:radial-gradient(circle at 60% 35%, rgba(230,195,92,.22), rgba(230,195,92,.08));
  border:1px solid rgba(230,195,92,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.link-content{display:flex;flex-direction:column;gap:4px}
.link-title{font-weight:700;font-size:18px;color:#133229;letter-spacing:.1px}
.link-description{font-size:14px;color:#55645d}

.whatsapp{border-left:6px solid #22c463}
.telegram{border-left:6px solid #1d98da}
.appointment{border-left:6px solid var(--gold)}
.website{border-left:6px solid #2a7a5e}
.testimonial{border-left:6px solid #6aa83f}

/* ——— GALERI TESTIMONI (overlay) ——— */
.gallery-overlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(3,12,10,.72);backdrop-filter:blur(2.5px);
  z-index:9999;overscroll-behavior:contain;
}
.gallery-overlay.active{display:flex}
.gallery-panel{
  width:min(1100px, 96vw);max-height:92vh;overflow:auto;border-radius:18px;
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  border:1px solid rgba(230,195,92,.34);box-shadow:var(--shadow);
}
.gallery-header{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,241,.92));
  border-bottom:1px solid rgba(230,195,92,.28);z-index:10;
}
.gallery-title{font-weight:700;color:#15352d;letter-spacing:.2px}
.gallery-close{
  appearance:none;border:1px solid rgba(20,145,111,.25);background:#fff;border-radius:10px;
  padding:8px 12px;cursor:pointer;color:#0f2a22;font-weight:700;
  box-shadow:0 6px 16px rgba(12,40,32,.15);
}
.gallery-close:hover{transform:translateY(-1px)}
.gallery-body{padding:16px}
.gallery-grid{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px;
}
.gallery-item{
  position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(31,80,62,.18);
  background:#fff;
  /* === UBah untuk potret === */
  aspect-ratio:3/4; /* jubin potret seragam */
  display:block;
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;display:block; /* isi jubin potret */
  filter:saturate(1.02) contrast(1.02);
  transition:transform .25s ease;
}
.gallery-item:hover img{transform:scale(1.03)}
.empty{
  text-align:center;color:#56655e;background:rgba(230,195,92,.1);border:1px dashed rgba(230,195,92,.4);
  padding:18px;border-radius:12px
}

/* ——— Tambahan: foto bulat dalam overlay Tentang Saya ——— */
.about-photo{
  width:160px;height:160px;border-radius:50%;overflow:hidden;margin:0 auto 14px;
  border:2px solid var(--gold-20);
  box-shadow:0 8px 20px rgba(15,91,71,.35), 0 0 0 6px rgba(230,195,92,.08);
  background:linear-gradient(135deg, var(--emerald-700), var(--emerald-500));
}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

@media (max-width:1024px){
  .container{grid-template-columns:1fr; max-width:760px}
  .profile-card{position:static}
  .gallery-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:560px){
  body{padding:24px 12px}
  .links-grid{grid-template-columns:1fr}
  .profile-image{width:110px;height:110px;border-radius:50%}
  .profile-image img{border-radius:50%}
  .profile-name{font-size:28px}
  .gallery-grid{grid-template-columns:1fr}
  .about-photo{width:136px;height:136px}
}