/*
Theme Name: AktaPro
Theme URI: https://www.aktapro.id
Author: AktaPro
Author URI: https://www.aktapro.id
Description: Custom theme untuk AktaPro - Your Legal Solutions. Minimalis modern dengan brand identity teal & gold.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aktapro
Tags: minimalist, modern, legal, business
*/

/* ============ FONTS ============ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============ DESIGN TOKENS ============ */
:root{
  --teal:#13A6B0;
  --teal-dark:#0E848C;
  --teal-deep:#0A5C62;
  --teal-text:#08585D;
  --teal-light:#E0F4F5;
  --gold:#FFB700;
  --gold-dark:#D69500;
  --gold-text:#9A6800;
  --gold-light:#FFF6E0;
  --ink:#0A1F26;
  --ink-soft:#2B3D44;
  --muted:#525E64;
  --line:#E5E9EB;
  --line-soft:#EEF1F2;
  --bg:#F8FAFA;
  --bg-soft:#FCFDFD;
  --white:#ffffff;
  --shadow-sm:0 1px 2px rgba(10,31,38,.04), 0 2px 8px -2px rgba(10,31,38,.06);
  --shadow-md:0 4px 12px -2px rgba(10,31,38,.08), 0 8px 24px -8px rgba(10,31,38,.12);
  --shadow-lg:0 20px 50px -20px rgba(10,31,38,.18);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:20px;
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-text);text-decoration:none;transition:color .2s}
a:hover{color:var(--teal-deep)}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4,h5,h6{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
}
h1{font-size:clamp(1.85rem,5vw,2.75rem);font-weight:700;margin-bottom:1rem}
h2{font-size:clamp(1.5rem,3.5vw,2.1rem);margin-top:2.5rem;margin-bottom:1rem}
h3{font-size:clamp(1.25rem,2.8vw,1.6rem);margin-top:2rem;margin-bottom:.75rem}
h4{font-size:1.15rem;margin-top:1.5rem;margin-bottom:.5rem}
h5{font-size:1rem;margin-top:1.25rem;margin-bottom:.5rem}
p{margin-bottom:1.25rem;color:var(--ink-soft)}

/* ============ CONTAINER ============ */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 1.25rem;
}
.container-narrow{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:0 1.25rem;
}
@media(min-width:768px){
  .container,.container-narrow{padding:0 2rem}
}

/* ============ NAVBAR ============ */
.site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  z-index:100;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
  gap:1rem;
}
.site-logo img{
  height:36px;
  width:auto;
  display:block;
}
.nav-back{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem 1rem;
  background:var(--teal);
  color:white;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.01em;
  transition:background .2s, transform .2s;
  box-shadow:0 2px 8px rgba(19,166,176,.25);
}
.nav-back:hover{
  background:var(--teal-dark);
  color:white;
  transform:translateY(-1px);
}
.nav-back svg{flex-shrink:0}

/* ============ MAIN CONTENT ============ */
.site-main{
  padding:3rem 0 5rem;
  min-height:60vh;
}

/* ============ ARTICLE - SINGLE POST ============ */
.article-hero{
  text-align:center;
  margin-bottom:3rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--line);
}
.article-category{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .85rem;
  background:var(--teal-light);
  color:var(--teal-text);
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:1.25rem;
}
.article-category::before{
  content:"";
  width:5px;height:5px;
  background:var(--teal);
  border-radius:50%;
}
.article-title{
  font-size:clamp(1.85rem,5vw,3rem);
  line-height:1.15;
  margin-bottom:1rem;
  font-weight:700;
}
.article-title em{
  font-style:italic;
  color:var(--teal-text);
  font-weight:600;
}
.article-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  font-size:.85rem;
  color:var(--muted);
  flex-wrap:wrap;
}
.article-meta-item{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.article-meta-dot{
  width:3px;height:3px;
  background:var(--muted);
  border-radius:50%;
  opacity:.6;
}

.article-featured-image{
  margin:2.5rem auto 3rem;
  max-width:1100px;
  padding:0 1.25rem;
}
.article-featured-image img{
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}

/* ============ ARTICLE CONTENT (Tulisan utama) ============ */
.article-content{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink-soft);
}
@media(min-width:768px){
  .article-content{font-size:1.1rem;line-height:1.8}
}

.article-content p{margin-bottom:1.5rem;color:var(--ink-soft)}
.article-content p:first-of-type::first-letter{
  font-family:'Fraunces',serif;
  font-size:3.5rem;
  font-weight:700;
  float:left;
  line-height:1;
  padding:.25rem 1rem 0 0;
  color:var(--teal-text);
}

.article-content a{
  color:var(--teal-text);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  font-weight:500;
  transition:color .2s;
}
.article-content a:hover{color:var(--teal-deep)}

.article-content strong,
.article-content b{color:var(--ink);font-weight:700}

.article-content em,
.article-content i{font-style:italic}

.article-content ul,
.article-content ol{
  margin:1.5rem 0;
  padding-left:1.5rem;
  color:var(--ink-soft);
}
.article-content li{margin-bottom:.6rem;line-height:1.7}
.article-content ul li::marker{color:var(--gold)}
.article-content ol li::marker{color:var(--teal);font-weight:700}

.article-content blockquote{
  margin:2rem 0;
  padding:1.5rem 1.75rem;
  background:var(--bg-soft);
  border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  font-style:italic;
  color:var(--ink-soft);
  font-size:1.1rem;
  position:relative;
}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content blockquote cite{
  display:block;
  margin-top:.75rem;
  font-style:normal;
  font-size:.85rem;
  color:var(--muted);
  font-weight:600;
}

.article-content img{
  border-radius:var(--radius);
  margin:2rem 0;
  box-shadow:var(--shadow-md);
}

.article-content figure{margin:2rem 0}
.article-content figcaption{
  text-align:center;
  font-size:.85rem;
  color:var(--muted);
  margin-top:.75rem;
  font-style:italic;
}

.article-content code{
  background:var(--teal-light);
  color:var(--teal-deep);
  padding:.15rem .45rem;
  border-radius:4px;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:.9em;
}
.article-content pre{
  background:var(--ink);
  color:#E5E9EB;
  padding:1.25rem;
  border-radius:var(--radius);
  overflow-x:auto;
  margin:1.5rem 0;
  font-size:.9rem;
  line-height:1.6;
}
.article-content pre code{
  background:transparent;
  color:inherit;
  padding:0;
}

.article-content hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  margin:2.5rem 0;
}

.article-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0;
  font-size:.95rem;
  background:white;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.article-content th,
.article-content td{
  padding:.85rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--line);
}
.article-content th{
  background:var(--bg);
  font-weight:600;
  color:var(--ink);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.article-content tr:last-child td{border-bottom:none}

.article-content h2,
.article-content h3,
.article-content h4{
  color:var(--ink);
  scroll-margin-top:80px;
}
.article-content h2{
  margin-top:3rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--line);
}

/* WordPress block specific */
.wp-block-image{margin:2rem 0}
.wp-block-quote{
  margin:2rem 0;
  padding:1.5rem 1.75rem;
  background:var(--bg-soft);
  border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
}
.wp-block-button{margin:1.5rem 0}
.wp-block-button__link{
  background:var(--teal) !important;
  color:white !important;
  padding:.85rem 1.75rem !important;
  border-radius:999px !important;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  text-decoration:none !important;
  box-shadow:0 4px 12px rgba(19,166,176,.25);
  transition:all .2s;
}
.wp-block-button__link:hover{
  background:var(--teal-dark) !important;
  transform:translateY(-1px);
}

/* ============ ARTICLE FOOTER ============ */
.article-footer{
  margin-top:3.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:2rem;
}
.article-tag{
  padding:.4rem .85rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.78rem;
  color:var(--muted);
  font-weight:500;
  transition:all .2s;
}
.article-tag:hover{
  background:var(--teal-light);
  border-color:var(--teal);
  color:var(--teal-text);
}

.article-cta{
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  border-radius:var(--radius-lg);
  padding:2.5rem 2rem;
  text-align:center;
  color:white;
  margin-top:3rem;
  position:relative;
  overflow:hidden;
}
.article-cta::before{
  content:"";
  position:absolute;
  top:-50%;
  right:-20%;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(19,166,176,.2) 0%, transparent 70%);
  border-radius:50%;
}
.article-cta::after{
  content:"";
  position:absolute;
  bottom:-30%;
  left:-10%;
  width:250px;
  height:250px;
  background:radial-gradient(circle, rgba(255,183,0,.15) 0%, transparent 70%);
  border-radius:50%;
}
.article-cta-content{position:relative;z-index:1}
.article-cta h3{
  color:white;
  font-size:clamp(1.3rem,3vw,1.75rem);
  margin-bottom:.5rem;
  margin-top:0;
}
.article-cta p{
  color:rgba(255,255,255,.75);
  margin-bottom:1.5rem;
  font-size:.95rem;
}
.article-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--gold);
  color:var(--ink);
  padding:.95rem 1.75rem;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  transition:all .2s;
  box-shadow:0 4px 16px rgba(255,183,0,.3);
}
.article-cta-btn:hover{
  background:var(--gold-dark);
  color:var(--ink);
  transform:translateY(-1px);
}

/* ============ RELATED ARTICLES ============ */
.related-articles{
  margin-top:4rem;
  padding-top:3rem;
  border-top:1px solid var(--line);
}
.related-articles-header{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:2rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-text);
}
.related-articles-header::before{
  content:"";
  width:18px;height:1.5px;
  background:var(--gold);
  border-radius:2px;
}
.related-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media(min-width:640px){
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .related-grid{grid-template-columns:repeat(3,1fr)}
}
.related-card{
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:all .25s;
  display:flex;
  flex-direction:column;
}
.related-card:hover{
  border-color:var(--teal);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.related-card-img{
  aspect-ratio:16/10;
  background:var(--bg);
  background-size:cover;
  background-position:center;
  position:relative;
}
.related-card-body{
  padding:1.25rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.related-card h4{
  margin:0 0 .5rem;
  font-size:1.05rem;
  line-height:1.35;
  color:var(--ink);
}
.related-card-excerpt{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:1rem;
  flex:1;
}
.related-card-read{
  font-size:.8rem;
  font-weight:600;
  color:var(--teal-text);
}

/* ============ ARCHIVE / BLOG INDEX ============ */
.archive-header{
  text-align:center;
  margin-bottom:3rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--line);
}
.archive-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-text);
  margin-bottom:1rem;
}
.archive-eyebrow::before{
  content:"";
  width:18px;height:1.5px;
  background:var(--gold);
  border-radius:2px;
}
.archive-title{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:.75rem;
}
.archive-description{
  color:var(--muted);
  max-width:560px;
  margin:0 auto;
  font-size:1.05rem;
}

.archive-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin-top:2.5rem;
}
@media(min-width:640px){
  .archive-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .archive-grid{grid-template-columns:repeat(3,1fr)}
}

/* Pagination */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.pagination a,
.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 .85rem;
  border-radius:8px;
  border:1px solid var(--line);
  background:white;
  color:var(--ink-soft);
  font-weight:600;
  font-size:.9rem;
  transition:all .2s;
}
.pagination a:hover{
  border-color:var(--teal);
  color:var(--teal-text);
  background:var(--teal-light);
}
.pagination .current{
  background:var(--teal);
  color:white;
  border-color:var(--teal);
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,.7);
  padding:3rem 0 2rem;
  margin-top:5rem;
}
.footer-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  margin-bottom:2rem;
}
@media(min-width:768px){
  .footer-inner{grid-template-columns:1.5fr 1fr 1fr}
}
.footer-brand img{
  height:32px;
  margin-bottom:1rem;
  filter:brightness(0) invert(1);
}
.footer-brand p{
  color:rgba(255,255,255,.5);
  font-size:.9rem;
  line-height:1.6;
}
.footer-col h5{
  color:white;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:1rem;
  margin-top:0;
}
.footer-col ul{list-style:none;padding:0}
.footer-col li{margin-bottom:.6rem}
.footer-col a{
  color:rgba(255,255,255,.6);
  font-size:.9rem;
  transition:color .2s;
}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-size:.8rem;
  color:rgba(255,255,255,.4);
}

/* ============ FLOATING WHATSAPP ============ */
.wa-float{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  width:56px;
  height:56px;
  background:#25D366;
  color:white;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4);
  z-index:99;
  transition:all .2s;
}
.wa-float:hover{
  transform:translateY(-2px) scale(1.05);
  color:white;
  box-shadow:0 12px 32px rgba(37,211,102,.5);
}

/* ============ ERROR / 404 ============ */
.error-page{
  text-align:center;
  padding:4rem 1.5rem;
  max-width:560px;
  margin:0 auto;
}
.error-code{
  font-family:'Fraunces',serif;
  font-size:clamp(5rem,15vw,8rem);
  color:var(--teal-text);
  font-weight:700;
  line-height:1;
  margin-bottom:.5rem;
}
.error-page h1{font-size:1.75rem;margin-bottom:1rem}
.error-page p{color:var(--muted);margin-bottom:2rem}
.error-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--teal);
  color:white;
  padding:.85rem 1.75rem;
  border-radius:999px;
  font-weight:600;
  transition:all .2s;
}
.error-btn:hover{
  background:var(--teal-dark);
  color:white;
  transform:translateY(-1px);
}

/* ============ COMMENTS (optional) ============ */
.comments-area{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.comments-title{
  font-size:1.5rem;
  margin-bottom:1.5rem;
}
.comment-list{list-style:none;padding:0}
.comment-body{
  padding:1.25rem;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:1rem;
}