/*
Theme Name: Inspiro Link Bio
Theme URI: https://example.com
Author: Inspiro
Description: Halaman link-in-bio profesional untuk agensi Inspiro. Satu halaman berisi tautan landing page, portofolio proyek, dan sosial media.
Version: 1.0
Requires at least: 5.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: inspiro-linkbio
*/

:root{
  --navy:#101B2E;
  --navy-deep:#0B1422;
  --panel:#16233A;
  --line:#2B3A54;
  --paper:#F4F1E8;
  --steel:#5B85AC;
  --gold:#B8862F;
  --green:#3E8B6B;
  --text-dim:#9FAFC6;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }

html,body{
  min-height:100vh;
  background:
    radial-gradient(ellipse 600px 300px at 50% -5%, rgba(91,133,172,.18), transparent 60%),
    var(--navy);
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--paper);
}
body{
  display:flex;
  justify-content:center;
  padding:52px 16px 60px;
}
.page{
  width:100%;
  max-width:440px;
  display:flex;
  flex-direction:column;
  align-items:center;
  animation:riseIn .6s ease both;
}
@keyframes riseIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }

.logo-plate{
  width:100%;
  max-width:300px;
  background:var(--paper);
  border-radius:var(--radius);
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.logo-img{
  width:100%;
  height:auto;
  display:block;
}
.tagline{
  margin-top:16px;
  font-family:'IBM Plex Serif', serif;
  font-weight:500;
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  text-align:center;
}

.links{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:30px;
}
.link-btn{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:17px 18px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--paper);
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  letter-spacing:.01em;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
  cursor:pointer;
  text-align:left;
}
.link-btn:hover, .link-btn:focus-visible{
  border-color:var(--gold);
  transform:translateY(-2px);
  background:#1A2740;
}
.link-btn.primary{
  background:linear-gradient(135deg, var(--steel), #3E6690);
  border-color:transparent;
}
.link-btn .ico{
  width:20px; height:20px; flex-shrink:0;
  color:var(--gold);
}
.link-btn.primary .ico{color:var(--paper);}
.link-btn .label{flex:1; text-align:left;}
.link-btn .chev{
  width:16px; height:16px;
  color:var(--text-dim);
  transition:transform .2s ease;
  flex-shrink:0;
}
.link-btn[aria-expanded="true"] .chev{transform:rotate(90deg);}

.portfolio-panel{
  width:100%;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.portfolio-panel.open{max-height:600px;}
.portfolio-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 4px 4px;
}
.proj{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:var(--navy-deep);
  border:1px solid var(--line);
  border-radius:10px;
  text-decoration:none;
  color:var(--paper);
  transition:border-color .15s ease;
}
.proj:hover, .proj:focus-visible{border-color:var(--green);}
.proj .check{
  width:18px; height:18px;
  border-radius:50%;
  background:rgba(62,139,107,.15);
  color:var(--green);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.proj .check svg{width:11px; height:11px;}
.proj .meta{flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;}
.proj .pname{font-size:13.5px; font-weight:600;}
.proj .pname::after{content:"—"; margin-left:6px; color:var(--text-dim); font-weight:400;}
.proj .ptype{font-size:12px; color:var(--text-dim);}
.proj .arrow{width:14px; height:14px; color:var(--text-dim); flex-shrink:0;}

.section-title{
  font-family:'IBM Plex Serif', serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:32px 0 12px;
  text-align:center;
}

.socials{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:6px;
}
.socials a{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--paper);
  text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.socials a:hover, .socials a:focus-visible{
  border-color:var(--gold);
  transform:translateY(-2px);
}
.socials svg{width:18px; height:18px; fill:currentColor;}