/* =========================================
   SONAQO FINAL PREMIUM CSS + BLOG COMPLETE
   FULL VERSION - COPY PASTE ALL
========================================= */

/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

/* ===== ACCESSIBILITY UTILITY ===== */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

body{
  font-family:'Poppins',sans-serif;
  color:#ffffff;
  background:
  radial-gradient(circle at top left,#1e3a8a 0%,transparent 35%),
  radial-gradient(circle at bottom right,#2563eb 0%,transparent 25%),
  #0b1120;
  overflow-x:hidden;
}

/* ===== GLOBAL ===== */
img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
}

section{
  padding:110px 8%;
}

section h2{
  text-align:center;
  font-size:42px;
  font-weight:800;
  margin-bottom:60px;
  letter-spacing:0;
}

/* =========================================
   HEADER
========================================= */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 8%;
  background:rgba(7,12,25,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.left{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo img{
  width:46px;
  height:46px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(37,99,235,.25);
}

.brand{
  font-size:24px;
  font-weight:800;
  letter-spacing:0;
  background:linear-gradient(90deg,#93c5fd,#3b82f6,#1d4ed8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =========================================
   NAVBAR
========================================= */
nav{
  display:flex;
  align-items:center;
  gap:6px;
}

nav a{
  color:#fff;
  font-size:15px;
  padding:10px 14px;
  border-radius:12px;
  transition:.3s ease;
}

nav a:hover{
  background:rgba(255,255,255,.06);
}

/* =========================================
   LANGUAGE
========================================= */
.language-switch{
  display:flex;
  gap:10px;
  margin-left:16px;
}

.language-switch a{
  color:#cbd5e1;
  padding:8px 12px;
  border-radius:10px;
  transition:.3s;
  font-size:14px;
}

.language-switch a:hover{
  background:rgba(255,255,255,.06);
}

.language-switch a.active{
  background:#2563eb;
  color:#fff;
}

/* =========================================
   HERO
========================================= */
.hero{
  min-height:auto;
  padding:130px 8% 76px;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:50px;
  align-items:center;
}

.hero-content{
  max-width:620px;
}

.hero-badge{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:#cbd5e1;
  font-size:14px;
  margin-bottom:26px;
}

.hero-content h1{
  font-size:clamp(36px,4.8vw,60px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:0;
  margin-bottom:22px;
  background:linear-gradient(90deg,#ffffff,#93c5fd,#3b82f6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-content p{
  font-size:17px;
  line-height:1.75;
  color:#cbd5e1;
  max-width:580px;
  margin-bottom:34px;
}

.hero-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.cta-button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:164px;
  padding:16px 22px;
  border-radius:16px;
  font-weight:700;
  font-size:15px;
  border:none;
  cursor:pointer;
  transition:.3s ease;
}

.primary-btn{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  color:#fff;
  box-shadow:0 20px 40px rgba(37,99,235,.35);
}

.secondary-btn{
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.primary-btn:hover,
.secondary-btn:hover{
  transform:translateY(-4px);
}

.hero-stats{
  display:flex;
  gap:34px;
  margin-top:44px;
  flex-wrap:wrap;
}

.hero-stats div{
  display:flex;
  flex-direction:column;
}

.hero-stats strong{
  font-size:28px;
  font-weight:800;
}

.hero-stats span{
  color:#94a3b8;
  font-size:14px;
  margin-top:6px;
}

/* HERO VISUAL */
.hero-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:520px;
}

.hero-founder-visual{
  isolation:isolate;
  min-height:560px;
}

.glow-bg{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.35),transparent 70%);
  filter:blur(40px);
  z-index:0;
}

.mockup{
  position:relative;
  z-index:2;
  width:100%;
  max-width:620px;
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:none;
}

.floating-card{
  position:absolute;
  z-index:3;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(15,23,42,.78);
  border:1px solid rgba(147,197,253,.22);
  color:#dbeafe;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(0,0,0,.24);
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.card-1{
  top:18%;
  left:-10px;
}

.card-2{
  bottom:14%;
  right:-10px;
}

.card-3{
  top:8%;
  right:34px;
}

.card-4{
  bottom:30%;
  left:-26px;
}

.card-5{
  bottom:4%;
  left:24%;
}

.founder-orbit{
  position:absolute;
  z-index:0;
  width:430px;
  height:430px;
  border-radius:42% 58% 50% 50%;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.28),transparent 24%),
    linear-gradient(135deg,rgba(37,99,235,.72),rgba(249,115,22,.5));
  box-shadow:
    0 36px 110px rgba(37,99,235,.34),
    inset 0 0 46px rgba(255,255,255,.12);
}

.founder-photo-wrap{
  position:relative;
  z-index:2;
  width:min(430px,100%);
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 36px 90px rgba(0,0,0,.38);
}

.founder-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.founder-card{
  position:absolute;
  z-index:4;
  display:grid;
  gap:4px;
  min-width:158px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(8,16,31,.76);
  border:1px solid rgba(147,197,253,.2);
  color:#fff;
  backdrop-filter:blur(18px);
  box-shadow:0 22px 48px rgba(0,0,0,.3);
}

.founder-card span{
  color:#bfdbfe;
  font-size:12px;
  font-weight:800;
}

.founder-card strong{
  font-size:14px;
  font-weight:800;
}

.founder-card-1{
  top:14%;
  left:0;
}

.founder-card-2{
  top:25%;
  right:-8px;
}

.founder-card-3{
  bottom:20%;
  left:-18px;
}

.founder-card-4{
  right:96px;
  bottom:5%;
}

/* =========================================
   GRID / CARD
========================================= */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}

/* Avoid a lone orphan card leaving empty space in the last row
   when the item count is odd for a 2-column grid. */
.grid > :last-child:nth-child(odd){
  grid-column:1 / -1;
}

.card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  padding:28px;
  backdrop-filter:blur(16px);
  transition:.35s ease;
}

.card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.card h3{
  font-size:22px;
  margin-bottom:14px;
}

.card p{
  color:#cbd5e1;
  line-height:1.8;
}

.section-intro{
  max-width:760px;
  margin:-36px auto 44px;
  text-align:center;
  color:#cbd5e1;
  line-height:1.8;
}

.content-band{
  position:relative;
}

.alt-band{
  background:rgba(255,255,255,.015);
}

.insight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.compact-card{
  min-height:210px;
}

.compact-card h3{
  font-size:20px;
}

.solution-list{
  max-width:920px;
  margin:auto;
  display:grid;
  gap:16px;
}

.solution-list div{
  display:grid;
  gap:8px;
  padding:22px 24px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.solution-list strong{
  font-size:18px;
  color:#ffffff;
}

.solution-list span{
  color:#cbd5e1;
  line-height:1.8;
}

.service-card{
  display:flex;
  flex-direction:column;
  min-height:288px;
}

.detail-btn{
  margin-top:auto;
  align-self:flex-start;
  border:1px solid rgba(96,165,250,.35);
  background:rgba(59,130,246,.12);
  color:#bfdbfe;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:.3s ease;
}

.detail-btn:hover{
  transform:translateY(-2px);
  background:rgba(59,130,246,.20);
}

.modal-open{
  overflow:hidden;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(14px);
}

.modal-backdrop.active{
  display:flex;
}

.service-modal{
  width:min(760px,100%);
  max-height:88vh;
  overflow:auto;
  padding:34px;
  border-radius:24px;
  background:#0b1530;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 34px 90px rgba(0,0,0,.45);
  position:relative;
}

.service-modal h3{
  font-size:30px;
  margin:12px 44px 14px 0;
}

.service-modal p{
  color:#cbd5e1;
  line-height:1.9;
}

.modal-close{
  position:absolute;
  top:20px;
  right:20px;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
  font-weight:800;
}

.modal-columns{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  margin-top:24px;
}

.modal-columns h4{
  font-size:18px;
  margin-bottom:12px;
}

.modal-columns ul{
  margin-left:18px;
  color:#dbeafe;
  line-height:1.9;
}

.modal-cta{
  margin-top:28px;
}

.value-list{
  max-width:980px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.value-list span{
  display:block;
  padding:18px 20px;
  border-radius:16px;
  background:rgba(59,130,246,.10);
  border:1px solid rgba(96,165,250,.18);
  color:#dbeafe;
  line-height:1.7;
}

.project-card{
  overflow:hidden;
  padding:0;
  color:#fff;
}

.project-card img{
  width:100%;
  height:230px;
  object-fit:contain;
  object-position:center;
  padding:10px;
  background:linear-gradient(135deg,#07111f,#101c33);
}

.project-body{
  padding:24px;
}

.project-type{
  display:inline-flex;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(59,130,246,.14);
  color:#bfdbfe;
  font-size:12px;
  font-weight:700;
}

.project-body h3{
  margin-bottom:14px;
}

.project-body p{
  font-size:15px;
  margin-bottom:12px;
}

.project-tools{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 18px;
}

.project-tools span{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(59,130,246,.10);
  border:1px solid rgba(96,165,250,.16);
  color:#bfdbfe;
  font-size:12px;
  font-weight:700;
}

.project-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.text-link{
  color:#60a5fa;
  font-weight:800;
  font-size:14px;
}

.project-note{
  margin:34px auto 0;
}

.project-showcase{
  max-width:1240px;
  margin:44px auto 0;
  padding:24px;
  border-radius:24px;
  background:rgba(15,23,42,.48);
  border:1px solid rgba(96,165,250,.12);
  box-shadow:0 22px 55px rgba(0,0,0,.20);
}

.project-showcase-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.project-showcase-head h3{
  margin:10px 0 0;
  color:#ffffff;
  font-size:28px;
  line-height:1.2;
}

.project-showcase-controls{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}

.project-showcase-controls button{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  color:#ffffff;
  font-size:20px;
  font-weight:900;
  background:rgba(59,130,246,.22);
  border:1px solid rgba(96,165,250,.24);
  transition:.25s ease;
}

.project-showcase-controls button:hover{
  transform:translateY(-2px);
  background:rgba(59,130,246,.38);
}

.project-showcase-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:2px 2px 12px;
  -webkit-overflow-scrolling:touch;
  scrollbar-color:rgba(96,165,250,.55) rgba(15,23,42,.55);
}

.showcase-shot{
  flex:0 0 min(390px,82vw);
  overflow:hidden;
  scroll-snap-align:start;
  border-radius:20px;
  background:#111827;
  border:1px solid rgba(255,255,255,.08);
}

.showcase-shot img{
  width:100%;
  height:clamp(230px,24vw,300px);
  object-fit:contain;
  object-position:center;
  display:block;
  padding:10px;
  background:linear-gradient(135deg,#07111f,#101c33);
}

.showcase-shot figcaption{
  min-height:76px;
  padding:16px 18px 18px;
  color:#dbeafe;
  font-size:14px;
  line-height:1.6;
  background:rgba(17,24,39,.96);
}

/* =========================================
   ABOUT
========================================= */
.about-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

.about-image img{
  border-radius:26px;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}

.about-content p{
  font-size:17px;
  color:#cbd5e1;
  line-height:1.9;
  margin-bottom:18px;
}

/* =========================================
   PORTFOLIO
========================================= */
.portfolio-card{
  overflow:hidden;
  border-radius:22px;
  position:relative;
  padding:0;
}

.portfolio-card img{
  width:100%;
  height:260px;
  object-fit:contain;
  object-position:center;
  padding:10px;
  background:linear-gradient(135deg,#07111f,#101c33);
  transition:.4s;
}

.portfolio-card:hover img{
  transform:none;
}

.portfolio-info{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
}

/* =========================================
   SONAQO ARTICLE PAGE - FULL PREMIUM CSS
   KHUSUS UNTUK HALAMAN ARTIKEL
========================================= */

/* PAGE */
.article-page{
  padding:140px 8% 110px;
  position:relative;
}

.article-page .container{
  max-width:780px;
  margin:0 auto;
}

.article-topbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:26px;
}

.article-topbar .back-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  color:#dbeafe;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  background:rgba(15,23,42,.5);
  border:1px solid rgba(147,197,253,.22);
}

.article-topbar .back-link::before{
  content:"←";
  margin-right:8px;
  color:#60a5fa;
}

.article-topbar .article-badge{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:800;
  background:linear-gradient(135deg,rgba(37,99,235,.86),rgba(30,64,175,.76));
  border:1px solid rgba(147,197,253,.28);
  box-shadow:0 16px 34px rgba(37,99,235,.22);
}

/* =========================================
   TITLE
========================================= */
.article-page h1{
  font-size:clamp(38px,5vw,60px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:0;
  margin-bottom:18px;
  text-align:left;

  background:linear-gradient(
    90deg,
    #ffffff,
    #dbeafe,
    #60a5fa
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* META */
.article-page .meta{
  font-size:14px;
  color:#94a3b8;
  line-height:1.8;
  margin-bottom:34px;
}

/* =========================================
   FEATURED IMAGE
========================================= */
.article-image{
  width:100%;
  border-radius:26px;
  margin-bottom:42px;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 30px 80px rgba(0,0,0,.30);
}

/* =========================================
   PARAGRAPH
========================================= */
.article-page p{
  font-size:18px;
  line-height:2;
  color:#dbe4f1;
  margin-bottom:26px;
  text-align:left;
}

/* OPENING PARAGRAPH */
.article-page p:nth-of-type(2){
  font-size:21px;
  color:#ffffff;
}

/* =========================================
   SUB TITLE
========================================= */
.article-page h2{
  font-size:31px;
  line-height:1.35;
  font-weight:800;
  color:#ffffff;
  margin:56px 0 18px;
  text-align:left;
  letter-spacing:0;
  padding-left:18px;
  border-left:4px solid #3b82f6;
}

/* H3 */
.article-page h3{
  font-size:25px;
  line-height:1.4;
  font-weight:700;
  margin:38px 0 14px;
  color:#ffffff;
}

/* =========================================
   LIST
========================================= */
.article-page ul,
.article-page ol{
  margin:18px 0 30px 24px;
}

.article-page li{
  font-size:18px;
  line-height:1.9;
  color:#dbe4f1;
  margin-bottom:10px;
}

/* =========================================
   LINK
========================================= */
.article-page a{
  color:#60a5fa;
  transition:.3s ease;
}

.article-page a:hover{
  color:#93c5fd;
}

/* =========================================
   STRONG
========================================= */
.article-page strong{
  color:#ffffff;
}

/* =========================================
   IMAGE INSIDE ARTICLE
========================================= */
.article-page img{
  width:100%;
  border-radius:24px;
  margin:34px 0;
}

.project-screenshot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:30px 0 42px;
}

.project-shot{
  margin:0;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

.project-shot.wide{
  grid-column:1/-1;
}

.project-shot img{
  display:block;
  margin:0 0 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
}

.project-shot figcaption{
  color:#cbd5e1;
  font-size:14px;
  line-height:1.7;
}

.code-sample{
  overflow:auto;
  margin:26px 0 42px;
  padding:22px;
  border-radius:20px;
  background:rgba(2,6,23,.72);
  border:1px solid rgba(147,197,253,.14);
  color:#dbeafe;
  font-size:14px;
  line-height:1.7;
}

.code-sample code{
  font-family:"Courier New",monospace;
  white-space:pre;
}

.phone-demo-wrap{
  display:grid;
  grid-template-columns:minmax(260px,340px) 1fr;
  gap:26px;
  align-items:center;
  margin:30px 0 46px;
}

.phone-demo{
  display:none;
  position:relative;
  overflow:hidden;
  border:10px solid #111827;
  border-radius:34px;
  background:#e5ddd5;
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}

.phone-speaker{
  position:absolute;
  top:8px;
  left:50%;
  z-index:3;
  width:82px;
  height:18px;
  border-radius:0 0 16px 16px;
  background:#111827;
  transform:translateX(-50%);
}

.phone-chat-header{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:24px 14px 12px;
  background:#f8fafc;
  color:#111827;
}

.phone-chat-header strong,
.phone-chat-header small{
  display:block;
}

.phone-chat-header small{
  color:#64748b;
  font-size:11px;
  margin-top:2px;
}

.phone-back,
.phone-menu{
  color:#111827;
  font-size:24px;
  line-height:1;
}

.phone-avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#fee2e2;
  color:#991b1b;
  font-weight:800;
}

.phone-chat-body{
  display:flex;
  min-height:440px;
  flex-direction:column;
  gap:10px;
  padding:16px 12px;
  background:
    linear-gradient(rgba(229,221,213,.88),rgba(229,221,213,.88)),
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.8),transparent 24%);
}

.bubble{
  width:fit-content;
  max-width:82%;
  padding:9px 11px;
  border-radius:12px;
  color:#111827;
  font-size:13px;
  line-height:1.45;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.bubble span{
  display:block;
  margin-top:4px;
}

.bubble.user{
  align-self:flex-end;
  background:#dcf8c6;
}

.bubble.bot{
  align-self:flex-start;
  background:#ffffff;
}

.phone-input{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:auto;
  padding:8px 8px 8px 12px;
  border-radius:999px;
  background:#fff;
  color:#94a3b8;
  font-size:13px;
}

.phone-input button{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#111827;
  color:#fff;
}

.phone-demo-copy{
  padding:26px;
  border-radius:24px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

.phone-demo-copy h3{
  margin-top:0;
}

.phone-shot{
  margin:0;
  padding:14px;
  border-radius:28px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 70px rgba(0,0,0,.3);
}

.phone-shot img{
  display:block;
  width:100%;
  max-width:340px;
  margin:0 auto 12px;
  border-radius:22px;
}

.phone-shot figcaption{
  color:#cbd5e1;
  font-size:14px;
  line-height:1.7;
  text-align:center;
}

/* =========================================
   BLOCKQUOTE
========================================= */
.article-page blockquote{
  margin:34px 0;
  padding:24px 28px;
  border-left:4px solid #3b82f6;
  background:rgba(255,255,255,.03);
  border-radius:20px;
  color:#dbe4f1;
  line-height:1.95;
  font-size:17px;
}

/* =========================================
   TABLE
========================================= */
.article-page table{
  width:100%;
  border-collapse:collapse;
  margin:30px 0;
  overflow:hidden;
  border-radius:18px;
}

.article-page th,
.article-page td{
  padding:16px;
  border:1px solid rgba(255,255,255,.06);
  text-align:left;
}

.article-page th{
  background:rgba(59,130,246,.12);
  color:#ffffff;
}

/* =========================================
   HR
========================================= */
.article-page hr{
  border:none;
  height:1px;
  background:rgba(255,255,255,.06);
  margin:48px 0;
}

/* =========================================
   CTA BUTTON
========================================= */
.article-page .cta-button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin-top:18px;
  min-width:240px;
  padding:16px 34px;
  border-radius:16px;
  background:linear-gradient(
    135deg,
    #3b82f6,
    #1d4ed8
  );
  color:#ffffff;
  font-weight:700;
  font-size:15px;
  box-shadow:0 20px 45px rgba(37,99,235,.30);
  transition:.3s ease;
}

.article-page .cta-button:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 55px rgba(37,99,235,.35);
}

/* =========================================
   CTA BOX OPTIONAL
========================================= */
.article-cta-box{
  margin-top:70px;
  padding:38px;
  border-radius:28px;
  background:linear-gradient(
    135deg,
    rgba(59,130,246,.14),
    rgba(255,255,255,.03)
  );
  border:1px solid rgba(255,255,255,.06);
}

.article-cta-box h3{
  font-size:28px;
  margin-bottom:14px;
}

.article-cta-box p{
  margin-bottom:20px;
}

.article-cta-box a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin:6px 10px 6px 0;
  padding:14px 20px;
  border-radius:14px;
  color:#dbeafe;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(147,197,253,.24);
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}

.article-cta-box a:first-of-type{
  color:#fff;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  border-color:rgba(34,197,94,.5);
}

.article-cta-box a:nth-of-type(2){
  color:#fff;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  border-color:rgba(96,165,250,.45);
}

.article-cta-box a:hover{
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 22px 46px rgba(37,99,235,.26);
}

/* =========================================
   SHARE BUTTONS
========================================= */
.share-box{
  margin-top:40px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.share-box a{
  padding:12px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
  font-size:14px;
}

/* =========================================
   RELATED POSTS
========================================= */
.related-posts{
  margin-top:90px;
}

.related-posts h3{
  font-size:30px;
  margin-bottom:24px;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.related-card{
  padding:24px;
  border-radius:22px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.related-card h4{
  font-size:20px;
  line-height:1.4;
  margin-bottom:10px;
}

.related-card p{
  font-size:15px;
  line-height:1.8;
  color:#cbd5e1;
}

/* =========================================
   READING PROGRESS BAR
========================================= */
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(
    90deg,
    #3b82f6,
    #60a5fa
  );
  z-index:9999;
}

/* =========================================
   MOBILE
========================================= */
@media(max-width:768px){

.article-page{
  padding:120px 6% 85px;
}

.article-page .container{
  max-width:100%;
}

.article-page h1{
  font-size:34px;
  line-height:1.12;
}

.article-page .meta{
  font-size:13px;
  margin-bottom:24px;
}

.article-image{
  border-radius:20px;
  margin-bottom:28px;
}

.article-page p,
.article-page li{
  font-size:16px;
  line-height:1.9;
}

.article-page p:nth-of-type(2){
  font-size:18px;
}

.article-page h2{
  font-size:27px;
  margin:44px 0 16px;
  padding-left:14px;
}

.article-page h3{
  font-size:22px;
}

.article-page ul,
.article-page ol{
  margin-left:20px;
}

.article-page .cta-button{
  width:100%;
}

.related-grid{
  grid-template-columns:1fr;
}

.article-cta-box{
  padding:26px;
}

.article-cta-box a{
  width:100%;
  margin:7px 0;
}

.project-screenshot-grid{
  grid-template-columns:1fr;
}

.project-shot{
  padding:12px;
  border-radius:18px;
}

.project-shot img{
  border-radius:14px;
}

.phone-demo-wrap{
  grid-template-columns:1fr;
}

.phone-demo{
  max-width:340px;
  margin:0 auto;
}

.phone-demo-copy{
  padding:20px;
}

}

/* =========================================
   BLOG PREMIUM
========================================= */
.blog-section{
  position:relative;
}

.section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 55px;
}

.section-badge{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:#cbd5e1;
  font-size:14px;
  margin-bottom:18px;
}

.section-head h2{
  margin-bottom:16px;
}

.section-head p{
  color:#cbd5e1;
  line-height:1.8;
  font-size:17px;
}

/* =========================================
   TESTIMONIALS
========================================= */
.testimonial-card{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.testimonial-quote-mark{
  font-size:48px;
  line-height:1;
  font-family:Georgia,serif;
  color:#3b82f6;
  opacity:.6;
}

.testimonial-text{
  color:#cbd5e1;
  line-height:1.8;
  flex-grow:1;
}

.testimonial-author{
  display:flex;
  align-items:center;
  gap:14px;
}

.testimonial-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:15px;
  color:#fff;
  flex-shrink:0;
}

.testimonial-name{
  display:block;
  font-weight:600;
  color:#f8fafc;
}

.testimonial-role{
  display:block;
  font-size:14px;
  color:#94a3b8;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
  align-items:stretch;
}

.blog-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  overflow:hidden;
  backdrop-filter:blur(16px);
  transition:.35s ease;
  color:#ffffff;
}

.blog-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 55px rgba(0,0,0,.28);
}

.blog-thumb{
  display:block;
  overflow:hidden;
  aspect-ratio:16/9;
  background:rgba(255,255,255,.03);
  flex:0 0 auto;
}

.blog-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:8px;
  background:linear-gradient(135deg,#07111f,#101c33);
  transition:.45s ease;
}

.blog-card:hover .blog-thumb img{
  transform:none;
}

.blog-content{
  display:flex;
  flex:1;
  flex-direction:column;
  min-height:302px;
  padding:24px;
}

.blog-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.blog-tags span{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(59,130,246,.14);
  color:#93c5fd;
  font-size:12px;
  font-weight:600;
}

.blog-content h3{
  min-height:65px;
  margin-bottom:14px;
  font-size:24px;
  line-height:1.35;
  font-weight:800;
  color:#ffffff;
}

.blog-card:hover .blog-content h3{
  color:#93c5fd;
}

.blog-content h3 a{
  color:#fff;
  transition:.3s;
}

.blog-content h3 a:hover{
  color:#93c5fd;
}

.blog-content p{
  min-height:56px;
  color:#cbd5e1;
  line-height:1.85;
  font-size:15px;
  margin-bottom:22px;
}

.read-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  color:#60a5fa;
  font-weight:700;
  transition:.3s ease;
}

.read-more:hover{
  transform:translateX(6px);
}

.blog-footer{
  text-align:center;
  margin-top:45px;
}

/* =========================================
   FAQ
========================================= */
.faq{
  max-width:850px;
  margin:auto;
}

.faq-item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  margin-bottom:14px;
  cursor:pointer;
  overflow:hidden;
}

.faq-question{
  padding:20px;
  font-weight:700;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:.3s ease;
  color:#cbd5e1;
  padding:0 20px;
}

.faq-item.active .faq-answer{
  max-height:200px;
  padding:0 20px 20px;
}

/* =========================================
   CONTACT
========================================= */
.contact-container{
  max-width:760px;
  margin:auto;
}

form input,
form textarea{
  width:100%;
  padding:16px;
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  margin-bottom:16px;
  outline:none;
}

form textarea{
  resize:none;
}

form input::placeholder,
form textarea::placeholder{
  color:#94a3b8;
}

/* =========================================
   SOCIAL MEDIA CONTACT FIX PREMIUM
   TAMBAHKAN DI PALING BAWAH CSS
========================================= */

.social-contact{
  margin-top:34px;
  text-align:center;
  padding:28px;
  border-radius:24px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}

.social-contact p{
  color:#94a3b8;
  font-size:15px;
  margin-bottom:18px;
  letter-spacing:0;
}

/* ICON WRAP */
.social-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

/* LINK */
.social-icons a{
  width:62px;
  height:62px;
  border-radius:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:.3s ease;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}

/* IMAGE */
.social-icons a img{
  width:30px;
  height:30px;
  object-fit:contain;
}

/* HOVER */
.social-icons a:hover{
  transform:translateY(-6px) scale(1.05);
  background:rgba(59,130,246,.14);
  border-color:rgba(59,130,246,.35);
  box-shadow:0 18px 40px rgba(37,99,235,.25);
}

/* INSTAGRAM */
.social-icons a.ig:hover{
  background:linear-gradient(
    135deg,
    rgba(131,58,180,.35),
    rgba(225,48,108,.30),
    rgba(253,29,29,.22),
    rgba(245,96,64,.22)
  );
}

/* FACEBOOK */
.social-icons a.fb:hover{
  background:rgba(59,130,246,.22);
}

/* OPTIONAL LABEL */
.social-icons a::after{
  content:attr(aria-label);
  display:none;
}

/* MOBILE */
@media(max-width:768px){

.social-contact{
  margin-top:28px;
  padding:22px;
  border-radius:20px;
}

.social-contact p{
  font-size:14px;
}

.social-icons{
  gap:14px;
}

.social-icons a{
  width:56px;
  height:56px;
  border-radius:16px;
}

.social-icons a img{
  width:28px;
  height:28px;
}

}

/* =========================================
   FLOAT WA
========================================= */
.wa-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:64px;
  z-index:999;
}

.wa-float img{
  width:100%;
}

/* =========================================
   FOOTER
========================================= */
footer{
  border-top:1px solid rgba(255,255,255,.05);
}

/* =========================================
   ANIMATION
========================================= */
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

/* =========================================
   HAMBURGER
========================================= */
.hamburger{
  display:none;
  border:0;
  background:transparent;
  padding:0;
}

/* =========================================
   TABLET
========================================= */
@media(max-width:992px){

.hero{
  grid-template-columns:1fr;
  text-align:center;
}

.hero-content{
  max-width:100%;
}

.hero-content p{
  margin:auto auto 34px;
}

.hero-buttons,
.hero-stats{
  justify-content:center;
}

.hero-visual{
  margin-top:30px;
  min-height:auto;
}

.hero-founder-visual{
  min-height:520px;
}

.founder-card-1{
  left:8%;
}

.founder-card-2{
  right:8%;
}

.founder-card-3{
  left:6%;
}

.founder-card-4{
  right:10%;
}

.card-1,
.card-2{
  display:none;
}

.about-container{
  grid-template-columns:1fr;
}

.blog-grid{
  grid-template-columns:repeat(2,1fr);
}

.insight-grid{
  grid-template-columns:repeat(2,1fr);
}

.modal-columns,
.value-list{
  grid-template-columns:1fr;
}

}

/* =========================================
   MOBILE
========================================= */
@media(max-width:768px){

header{
  height:72px;
  padding:12px 6%;
  gap:12px;
}

nav{
  display:none;
  position:absolute;
  top:82px;
  left:6%;
  right:6%;
  flex-direction:column;
  gap:8px;
  width:auto;
  min-width:0;
  padding:14px;
  border-radius:22px;
  background:rgba(8,16,31,.98);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.36);
  backdrop-filter:blur(18px);
}

nav.active{
  display:flex;
}

nav a{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  color:#e5eefc;
  font-size:15px;
  font-weight:700;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.04);
}

nav a:hover{
  background:rgba(59,130,246,.16);
}

.hamburger{
  display:inline-flex;
  flex:0 0 46px;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  box-shadow:0 12px 26px rgba(0,0,0,.20);
  cursor:pointer;
}

.hamburger span{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:#ffffff;
  transition:.25s ease;
}

.hamburger.active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.language-switch{
  display:flex !important;
  position:static;
  z-index:auto;
  align-items:center;
  gap:6px;
  margin-left:auto;
  padding:5px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}

.language-switch a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:34px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  color:#cbd5e1;
  line-height:1;
}

.hero{
  padding:112px 6% 46px;
  min-height:auto;
  gap:24px;
}

.hero-content h1{
  font-size:34px;
  line-height:1.12;
  letter-spacing:0;
}

.hero-content p{
  font-size:15px;
  line-height:1.75;
  margin-bottom:26px;
}

.hero-buttons{
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.cta-button{
  width:100%;
  max-width:320px;
}

.hero-stats{
  display:none;
}

.hero-stats strong{
  font-size:24px;
}

.glow-bg{
  width:280px;
  height:280px;
}

.mockup{
  max-width:100%;
}

.hero-visual{
  display:flex;
  min-height:360px;
  margin-top:18px;
}

.hero-founder-visual{
  min-height:360px;
}

.founder-orbit{
  width:270px;
  height:270px;
}

.founder-photo-wrap{
  width:min(286px,82vw);
  border-radius:26px;
}

.founder-card{
  display:none;
}

section{
  padding:64px 6%;
}

section h2{
  font-size:28px;
  line-height:1.2;
  margin-bottom:30px;
}

.grid,
.blog-grid{
  grid-template-columns:1fr;
}

.insight-grid,
.value-list{
  grid-template-columns:1fr;
}

.compact-card,
.service-card{
  min-height:auto;
}

.floating-card{
  display:none;
}

.service-modal{
  padding:26px;
}

.service-modal h3{
  font-size:24px;
}

.modal-columns{
  grid-template-columns:1fr;
}

#services .grid{
  grid-template-columns:1fr;
  gap:18px;
}

#services .card{
  padding:24px 26px;
  border-radius:20px;
}

#services .card h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  line-height:1.35;
  margin-bottom:14px;
}

#services .card p{
  font-size:15px;
  line-height:1.7;
}

#portfolio .grid,
.blog-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

#portfolio .project-card,
.blog-card{
  border-radius:18px;
}

#portfolio .project-card img{
  height:150px;
  padding:7px;
}

.project-body{
  padding:16px;
}

.project-type,
.project-tools span,
.blog-tags span{
  padding:6px 9px;
  font-size:10px;
}

.project-body h3,
.blog-content h3{
  display:-webkit-box;
  min-height:0;
  margin-bottom:10px;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  font-size:16px;
  line-height:1.25;
}

.project-body p,
.blog-content p{
  display:-webkit-box;
  min-height:0;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  font-size:12px;
  line-height:1.65;
}

.project-tools,
.blog-tags{
  gap:6px;
  margin:12px 0 14px;
}

.project-actions{
  gap:8px;
}

.project-actions .detail-btn{
  width:100%;
  min-height:42px;
  padding:11px 12px;
  border-radius:12px;
  font-size:12px;
  text-align:center;
}

.project-actions .text-link,
.read-more{
  font-size:12px;
}

.project-showcase{
  margin-top:34px;
  padding:18px;
  border-radius:20px;
}

.project-showcase-head{
  align-items:center;
  gap:14px;
}

.project-showcase-head h3{
  font-size:20px;
}

.project-showcase-controls button{
  width:38px;
  height:38px;
  border-radius:12px;
  font-size:17px;
}

.project-showcase-track{
  gap:12px;
  padding-bottom:8px;
}

.showcase-shot{
  flex-basis:78vw;
  border-radius:18px;
}

.showcase-shot img{
  height:clamp(190px,56vw,240px);
  padding:8px;
}

.showcase-shot figcaption{
  min-height:72px;
  padding:13px 14px 15px;
  font-size:12px;
  line-height:1.55;
}

.blog-thumb{
  aspect-ratio:16/9;
}

.blog-content{
  padding:16px;
}

.blog-footer{
  margin-top:34px;
}

.brand{
  font-size:20px;
}

.logo img{
  width:40px;
  height:40px;
}

.blog-thumb img{
  height:100%;
}

.blog-content{
  min-height:auto;
}

.blog-content h3,
.blog-content p{
  min-height:0;
}

.wa-float{
  width:58px;
}

}

/* =========================================
SONAQO AI FINAL PREMIUM CSS
TARUH PALING BAWAH style.css
========================================= */

/* =========================================
FLOAT BUTTON
========================================= */
.sonaqo-ai-btn{
position:fixed;
right:24px;
bottom:102px;
z-index:9998;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px 20px;
border:none;
outline:none;
cursor:pointer;
border-radius:999px;
font-size:14px;
font-weight:800;
letter-spacing:0;
color:#fff;
background:linear-gradient(135deg,#3b82f6,#1d4ed8);
box-shadow:0 18px 40px rgba(37,99,235,.32);
transition:.3s ease;
animation:aiPulse 2.6s infinite;
user-select:none;
}

.sonaqo-ai-btn span{
display:inline-block;
}

.sonaqo-ai-btn::before{
content:"AI";
display:none;
}

.sonaqo-ai-btn:hover{
transform:translateY(-4px);
box-shadow:0 24px 50px rgba(37,99,235,.40);
}

.sonaqo-ai-btn:active{
transform:scale(.98);
}

/* =========================================
CHAT BOX
========================================= */
.sonaqo-ai-box{
position:fixed;
right:24px;
bottom:170px;
width:390px;
max-width:calc(100% - 24px);
height:560px;
z-index:9999;
display:none;
flex-direction:column;
overflow:hidden;
border-radius:24px;
background:rgba(8,16,31,.97);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px);
box-shadow:0 30px 70px rgba(0,0,0,.38);
}

/* =========================================
HEADER
========================================= */
.ai-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
padding:18px;
color:#fff;
background:linear-gradient(90deg,#0f172a,#111c36);
border-bottom:1px solid rgba(255,255,255,.06);
}

.ai-title-wrap{
flex:1;
}

.ai-title{
font-size:16px;
font-weight:800;
line-height:1.3;
}

.ai-subtitle{
display:block;
font-size:12px;
font-weight:500;
color:#94a3b8;
margin-top:4px;
}

.ai-close{
width:34px;
height:34px;
border:none;
outline:none;
cursor:pointer;
border-radius:12px;
font-size:16px;
color:#fff;
background:transparent;
transition:.25s ease;
}

.ai-close:hover{
background:rgba(255,255,255,.06);
}

/* =========================================
CHAT BODY
========================================= */
.ai-chat{
flex:1;
padding:18px;
overflow-y:auto;
scroll-behavior:smooth;
}

.ai-chat::-webkit-scrollbar{
width:6px;
}

.ai-chat::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.12);
border-radius:999px;
}

/* =========================================
MESSAGES
========================================= */
.ai-msg,
.user-msg{
max-width:88%;
padding:13px 15px;
border-radius:18px;
margin-bottom:12px;
font-size:14px;
line-height:1.7;
word-break:break-word;
}

.ai-msg{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.06);
color:#e5eefc;
border-top-left-radius:8px;
}

.user-msg{
margin-left:auto;
background:linear-gradient(135deg,#3b82f6,#1d4ed8);
color:#fff;
border-top-right-radius:8px;
box-shadow:0 14px 26px rgba(37,99,235,.22);
}

/* =========================================
QUICK BUTTON
========================================= */
.ai-quick-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
padding:0 14px 12px;
border-top:1px solid rgba(255,255,255,.04);
}

.ai-quick-actions button{
padding:9px 13px;
border:none;
outline:none;
cursor:pointer;
border-radius:999px;
font-size:12px;
font-weight:700;
color:#cbd5e1;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
transition:.25s ease;
}

.ai-quick-actions button:hover{
transform:translateY(-2px);
background:rgba(59,130,246,.14);
border-color:rgba(59,130,246,.25);
color:#fff;
}

/* =========================================
INPUT AREA
========================================= */
.ai-input-wrap{
display:flex;
align-items:center;
gap:10px;
padding:14px;
border-top:1px solid rgba(255,255,255,.06);
background:rgba(255,255,255,.02);
}

.ai-input-wrap input{
flex:1;
height:48px;
padding:0 16px;
border:none;
outline:none;
border-radius:14px;
background:rgba(255,255,255,.05);
color:#fff;
font-size:14px;
}

.ai-input-wrap input::placeholder{
color:#94a3b8;
}

.ai-send-btn{
height:48px;
padding:0 18px;
border:none;
outline:none;
cursor:pointer;
border-radius:14px;
font-size:14px;
font-weight:800;
color:#fff;
background:linear-gradient(135deg,#3b82f6,#1d4ed8);
transition:.25s ease;
}

.ai-send-btn:hover{
transform:translateY(-2px);
}

/* =========================================
LOADING
========================================= */
#loading{
opacity:.75;
font-style:italic;
}

/* =========================================
MOBILE
========================================= */
@media(max-width:768px){

.sonaqo-ai-btn{
right:16px;
bottom:92px;
width:56px;
height:56px;
padding:0;
border-radius:18px;
font-size:15px;
letter-spacing:0;
}

.sonaqo-ai-btn span{
display:none;
}

.sonaqo-ai-btn::before{
display:block;
font-weight:900;
line-height:1;
}

.sonaqo-ai-box{
right:12px;
left:12px;
bottom:150px;
width:auto;
max-width:none;
height:72vh;
border-radius:22px;
}

.ai-header{
padding:16px;
}

.ai-title{
font-size:15px;
}

.ai-chat{
padding:14px;
}

.ai-msg,
.user-msg{
font-size:13px;
padding:12px 14px;
max-width:92%;
}

.ai-quick-actions{
padding:0 12px 10px;
gap:6px;
}

.ai-quick-actions button{
font-size:11px;
padding:8px 11px;
}

.ai-input-wrap{
padding:12px;
gap:8px;
}

.ai-input-wrap input{
height:44px;
font-size:13px;
}

.ai-send-btn{
height:44px;
padding:0 14px;
font-size:13px;
}

}

/* =========================================
SMALL PHONE
========================================= */
@media(max-width:420px){

.sonaqo-ai-btn{
right:12px;
bottom:88px;
transform:scale(.95);
}

.sonaqo-ai-box{
bottom:145px;
height:70vh;
}

}

/* =========================================
ANIMATION
========================================= */
@keyframes aiPulse{
0%{
box-shadow:0 0 0 0 rgba(37,99,235,.35);
}
70%{
box-shadow:0 0 0 18px rgba(37,99,235,0);
}
100%{
box-shadow:0 0 0 0 rgba(37,99,235,0);
}
}

/* =========================================
   BUKUKU UMKM PROJECT DETAIL
========================================= */
.bukuku-project .container{
  max-width:1120px;
}

.bukuku-project .container > h1{
  max-width:920px;
}

.bukuku-project .container > p:not(.meta),
.bukuku-project .container > h2,
.bukuku-project .container > h3,
.bukuku-project .container > ul,
.bukuku-project .container > ol{
  max-width:820px;
}

.bukuku-hero-preview{
  display:grid;
  grid-template-columns:minmax(250px,340px) minmax(0,1fr);
  align-items:center;
  gap:clamp(34px,6vw,76px);
  margin:36px 0 44px;
  padding:clamp(26px,5vw,58px);
  overflow:hidden;
  border:1px solid rgba(147,197,253,.16);
  border-radius:24px;
  background:#111a2d;
}

.bukuku-device-preview{
  width:100%;
  max-width:310px;
  margin:0 auto;
  padding:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:#070d19;
  box-shadow:0 24px 55px rgba(0,0,0,.38);
}

.bukuku-project .bukuku-device-preview img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  border-radius:20px;
}

.bukuku-kicker{
  display:inline-block;
  margin-bottom:15px;
  color:#86efac;
  font-size:13px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

.bukuku-project .bukuku-hero-copy h2{
  max-width:620px;
  margin:0 0 18px;
  padding:0;
  border:0;
  font-size:clamp(28px,4vw,44px);
  line-height:1.14;
}

.bukuku-project .bukuku-hero-copy p{
  max-width:610px;
  margin:0;
  color:#cbd5e1;
  font-size:17px;
  line-height:1.8;
}

.bukuku-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
}

.bukuku-facts span{
  color:#94a3b8;
  font-size:13px;
  line-height:1.5;
}

.bukuku-facts strong{
  display:block;
  margin-bottom:3px;
  color:#fff;
  font-size:17px;
}

.bukuku-project .bukuku-screen-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:18px;
  max-width:none;
  margin:30px 0 48px;
}

.bukuku-project .project-shot{
  padding:10px;
  overflow:hidden;
  border-radius:18px;
  background:#111827;
  border-color:rgba(148,163,184,.16);
}

.bukuku-project .screen-preview-link{
  display:block;
  overflow:hidden;
  border-radius:12px;
  background:#f5f5f3;
}

.bukuku-project .project-shot img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  border:0;
  border-radius:0;
  transition:transform .25s ease;
}

.bukuku-project .project-shot:hover img{
  transform:scale(1.015);
}

.bukuku-project .project-shot figcaption{
  display:flex;
  min-height:112px;
  flex-direction:column;
  gap:7px;
  padding:15px 8px 7px;
  color:#aebdd0;
  font-size:13px;
  line-height:1.6;
}

.bukuku-project .project-shot figcaption strong{
  color:#fff;
  font-size:15px;
}

.project-card.bukuku-card img{
  object-position:center 18%;
}

@media(max-width:980px){
  .bukuku-project .bukuku-screen-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .bukuku-project .project-shot{
    max-width:330px;
    justify-self:center;
  }
}

@media(max-width:768px){
  .bukuku-hero-preview{
    grid-template-columns:1fr;
    gap:30px;
    padding:24px 18px 28px;
    border-radius:20px;
  }

  .bukuku-device-preview{
    max-width:270px;
  }

  .bukuku-project .bukuku-hero-copy{
    text-align:left;
  }

  .bukuku-facts{
    grid-template-columns:1fr;
    gap:12px;
  }

  .bukuku-facts span{
    display:flex;
    align-items:baseline;
    gap:7px;
  }

  .bukuku-facts strong{
    display:inline;
    margin:0;
  }

  .bukuku-project .bukuku-screen-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .bukuku-project .project-shot{
    width:100%;
    max-width:320px;
  }

  .bukuku-project .project-shot figcaption{
    min-height:0;
  }
}

/* =========================================
   FINAL FLOATING ACTIONS: AI + WHATSAPP
========================================= */
.wa-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9997;
  display:grid;
  width:56px;
  height:56px;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  transition:transform .2s ease,box-shadow .2s ease;
  isolation:isolate;
}

.wa-float img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  object-fit:contain;
  border-radius:50%;
}

.wa-float:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,.42);
}

.sonaqo-ai-btn{
  right:24px;
  bottom:94px;
  min-width:126px;
  min-height:50px;
  padding:0 18px;
  border:1px solid rgba(147,197,253,.28);
  border-radius:14px;
  white-space:nowrap;
  box-shadow:0 14px 34px rgba(37,99,235,.3);
  animation:none;
}

.sonaqo-ai-btn:hover{
  transform:translateY(-3px);
}

.sonaqo-ai-box{
  right:24px;
  bottom:158px;
  width:min(390px,calc(100vw - 32px));
  height:min(580px,calc(100dvh - 182px));
  max-width:none;
}

@media(max-width:768px){
  .wa-float{
    right:14px;
    bottom:calc(18px + env(safe-area-inset-bottom));
    width:52px;
    height:52px;
  }

  .sonaqo-ai-btn{
    right:14px;
    bottom:calc(82px + env(safe-area-inset-bottom));
    width:52px;
    min-width:52px;
    height:52px;
    min-height:52px;
    padding:0;
    border-radius:14px;
    transform:none;
  }

  .sonaqo-ai-btn:hover,
  .sonaqo-ai-btn:active{
    transform:none;
  }

  .sonaqo-ai-box{
    right:12px;
    left:12px;
    bottom:calc(146px + env(safe-area-inset-bottom));
    width:auto;
    height:min(620px,calc(100dvh - 170px - env(safe-area-inset-bottom)));
    max-height:none;
    border-radius:18px;
  }
}

@media(max-width:420px){
  .wa-float{
    right:12px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    width:50px;
    height:50px;
  }

  .sonaqo-ai-btn{
    right:12px;
    bottom:calc(76px + env(safe-area-inset-bottom));
    width:50px;
    min-width:50px;
    height:50px;
    min-height:50px;
  }

  .sonaqo-ai-box{
    bottom:calc(138px + env(safe-area-inset-bottom));
    height:calc(100dvh - 154px - env(safe-area-inset-bottom));
  }
}

/* =========================================
   ABOUT SONAQO SECTION
========================================= */
.about-section{
  padding:48px 5% 76px;
  scroll-margin-top:82px;
  background:#1c3778;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.about-section > h2{
  margin:0 0 clamp(44px,5vw,72px);
  color:#fff;
  font-size:clamp(40px,4.3vw,62px);
  line-height:1.08;
  text-align:center;
}

.about-section .about-container{
  display:grid;
  max-width:1580px;
  margin:0 auto;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(40px,5vw,72px);
}

.about-section .about-image{
  overflow:hidden;
  border-radius:28px;
  background:#080c14;
  box-shadow:0 24px 56px rgba(0,0,0,.28);
}

.about-section .about-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  margin:0;
  border-radius:0;
  box-shadow:none;
}

.about-section .about-content{
  max-width:720px;
}

.about-section .about-content p{
  margin:0 0 24px;
  color:#e2e8f0;
  font-size:clamp(17px,1.3vw,22px);
  line-height:2;
}

.about-section .about-content p:last-child{
  margin-bottom:0;
}

.about-section .about-content strong{
  color:#bfdbfe;
}

@media(max-width:900px){
  .about-section{
    padding:58px 6% 68px;
  }

  .about-section .about-container{
    grid-template-columns:1fr;
    gap:34px;
  }

  .about-section .about-image,
  .about-section .about-content{
    width:100%;
    max-width:720px;
    margin:0 auto;
  }
}

@media(max-width:520px){
  .about-section{
    padding:52px 20px 58px;
  }

  .about-section > h2{
    margin-bottom:36px;
    font-size:34px;
  }

  .about-section .about-container{
    gap:28px;
  }

  .about-section .about-image{
    border-radius:18px;
  }

  .about-section .about-content p{
    margin-bottom:18px;
    font-size:16px;
    line-height:1.85;
  }
}

.article-page .article-image-portrait{
  width:min(100%,460px);
  margin-right:auto;
  margin-left:auto;
}

@media(max-width:520px){
  .article-page .article-image-portrait{
    width:min(100%,320px);
  }
}