/* style.css — Black & Gold theme for Just Me Agency
   - Includes responsive layout, accessible contrast, hover effects
   - Fonts: Inter (imported). Tweak colors below if needed.
*/

/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --bg:#060606; /* near-black */
  --panel:#0f0f0f; /* slightly lighter for cards */
  --muted:#bdb6a3; /* soft gold-tinted muted text */
  --gold:#d4af37; /* main gold */
  --gold-2:#c89f2e; /* secondary gold */
  --glass: rgba(255,255,255,0.02);
  --accent-glow: 0 6px 24px rgba(212,175,55,0.12);
  --radius:16px;
}

/* Global reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(212,175,55,0.02), transparent 8%),
              radial-gradient(1000px 500px at 90% 90%, rgba(255,255,255,0.01), transparent 6%),
              var(--bg);
  color: #efece6;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding:28px 18px;
}

/* Centered container styling (we style existing structure without adding wrapper) */
center{display:block;margin:0 auto 18px;}

.my-photo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 18px;
}

h1{
  text-align:center;font-weight:800;letter-spacing:2px;margin-top:12px;margin-bottom:6px;
  color:var(--gold);font-size:20px;text-transform:uppercase;text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}

p{color:var(--muted);text-align:center;margin:6px 0;font-weight:400}

a.link-text{display:inline-block;color:var(--gold);text-decoration:none;font-weight:600;margin:6px auto;text-align:center}

/* Links list */
.links{
  list-style:none;max-width:540px;margin:18px auto;padding:12px;display:flex;flex-direction:column;gap:12px;
}

.link-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(180deg,var(--panel), rgba(255,255,255,0.01));
  border-radius:14px;border:1px solid rgba(212,175,55,0.06);box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
}
.link-card:hover{transform:translateY(-6px);box-shadow: var(--accent-glow);border-color:rgba(212,175,55,0.18)}

.link-icon{
  min-width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(212,175,55,0.12), rgba(212,175,55,0.03));
  border:1px solid rgba(212,175,55,0.06);backdrop-filter: blur(4px);
}

.link-icon i{font-size:18px;color:var(--gold)}

.link-text{flex:1;font-weight:700;color:#f7f3ec}

.link-action{min-width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:transparent}

.link-action i{font-size:18px;color:var(--muted)}

.social-icons {
  display: flex;
  gap: 35px;          /* jarak antar ikon */
  justify-content: center;
  list-style: none;
  padding: 15px 0;
  background: linear-gradient(90deg, #d4af37, #f2d784, #d4af37); /* gold memanjang */
  border-radius: 50px;
  margin: 20px auto;
  width: 90%;         /* supaya memanjang */
}

.social-icons li a {
  font-size: 32px;
  color: #000;        /* ikon hitam agar kontras dengan gold */
  transition: 0.3s;
}

.social-icons li a:hover {
  transform: scale(1.3);
  color: #222;
}


/* Warning: some of your HTML has duplicate .link-text anchor + p classes — keep text readable */

/* Footer / copyright */
.copyright{max-width:540px;margin:22px auto 0;padding:12px 14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.12));display:flex;gap:12px;align-items:center;justify-content:center;border:1px solid rgba(212,175,55,0.04)}
.copyright img{width:36px;height:36px;object-fit:contain;border-radius:8px}
.copyright p{color:var(--muted);font-size:13px}

/* Toast */
#toast{position:fixed;right:20px;bottom:20px;min-width:220px;padding:12px 16px;border-radius:12px;background:linear-gradient(90deg, rgba(212,175,55,0.06), rgba(212,175,55,0.03));border:1px solid rgba(212,175,55,0.06);color:var(--gold);box-shadow:0 10px 30px rgba(0,0,0,0.6);display:none}

/* Paragraph notices below link list */
.links + p, .links + p + p{max-width:540px;margin:8px auto;color:var(--muted);font-size:13px;text-align:center}

/* Audio player */
audio{margin:14px auto;display:block;border-radius:12px;padding:6px;background:var(--glass);border:1px solid rgba(255,255,255,0.02)}

/* Responsive tweaks */
@media (min-width:720px){
  body{padding:40px;background-position:20% 10%, 80% 90%;}
  .my-photo{width:140px;height:140px}
  h1{font-size:24px}
  .links{gap:14px}
}

@media (max-width:420px){
  body{padding:18px}
  .link-card{padding:12px}
  .link-text{font-size:13px}
}


/* Accessibility: focus states */
.link-card:focus{outline:3px solid rgba(212,175,55,0.12);outline-offset:4px}
.link-card .link-action:focus{outline:2px solid rgba(212,175,55,0.12)}

/* Utility */
.centered{text-align:center}

/* Small decorative divider (optional) */
.separator{height:1px;background:linear-gradient(90deg, transparent, rgba(212,175,55,0.06), transparent);margin:14px auto;border-radius:2px;max-width:420px}

/* End of file */