:root{
  --purple:#6f2cff;
  --purple-dark:#5b21b6;
  --soft:#f6f2ff;
}

/* =========================
   GLOBAL
========================= */

body{
  background:#ffffff;
  color:#111;
}

a{
  text-decoration:none;
}

/* =========================
   NAVBAR
========================= */

.navbar{
  background:#ffffff;
  border-bottom:1px solid rgba(111,44,255,.15);
}

.brand-dot{
  width:10px;
  height:10px;
  background:var(--purple);
  border-radius:50%;
  display:inline-block;
  margin-right:8px;
}

.nav-link{
  font-weight:600;
  color:#111 !important;
}

.nav-link:hover{
  color:var(--purple) !important;
}

.btn-purple{
  background:var(--purple);
  color:#fff;
  border:none;
  border-radius:50px;
  font-weight:600;
}

.btn-purple:hover{
  background:var(--purple-dark);
  color:#fff;
}

/* =========================
   HOME HERO SECTION
========================= */

.hero{
  background:linear-gradient(180deg,var(--soft),#ffffff);
  color:#111;
}

/* =========================
   CAROUSEL
========================= */

.carousel-caption h3,
.carousel-caption p{
  color:white;
}

/* =========================
   POST CARDS (HOME)
========================= */

.post-card{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(111,44,255,.15);
  transition:0.2s;
  background:#fff;
}

.post-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(0,0,0,.08);
}

.badge-purple{
  background:rgba(111,44,255,.15);
  color:var(--purple);
  font-weight:600;
}

/* =========================
   ARTICLE PAGE HERO
========================= */

.post-hero{
  background:linear-gradient(180deg,var(--soft),#ffffff);
  border-bottom:1px solid rgba(111,44,255,.12);
}

.breadcrumb-link{
  color:var(--purple);
}

.breadcrumb-link:hover{
  text-decoration:underline;
}

.post-title{
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.1;
}

.post-subtitle{
  color:#4b5563;
  max-width:70ch;
}

.post-meta{
  color:#6b7280;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.meta-link{
  color:var(--purple);
  font-weight:700;
}

.meta-link:hover{
  text-decoration:underline;
}

.dot{
  opacity:.6;
}

/* =========================
   ARTICLE CONTENT
========================= */

.post-cover{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(111,44,255,.12);
}

.post-content{
  font-size:1.02rem;
  line-height:1.75;
  max-width:72ch;
}

.post-content h2{
  font-weight:900;
  margin-top:2rem;
}

.post-content pre{
  background:#0b1020;
  color:#e5e7eb;
  padding:1rem;
  border-radius:14px;
  overflow:auto;
}

.post-content blockquote{
  border-left:4px solid var(--purple);
  background:rgba(111,44,255,.06);
  padding:1rem;
  border-radius:14px;
}

/* =========================
   CALLOUT
========================= */

.callout{
  border:1px solid rgba(111,44,255,.18);
  background:rgba(111,44,255,.06);
  padding:1rem;
  border-radius:18px;
  margin:1.25rem 0;
}

.callout-title{
  font-weight:900;
  color:var(--purple);
}

/* =========================
   TAGS
========================= */

.tags{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.tag{
  font-weight:700;
  color:var(--purple);
  background:rgba(111,44,255,.10);
  border:1px solid rgba(111,44,255,.16);
  padding:.35rem .75rem;
  border-radius:999px;
}

.tag:hover{
  background:rgba(111,44,255,.16);
}

/* =========================
   SIDEBAR
========================= */

.side-card{
  background:#fff;
  border:1px solid rgba(111,44,255,.12);
  border-radius:18px;
  padding:1rem;
  box-shadow:0 10px 24px rgba(17,12,46,.05);
}

.side-title{
  font-weight:900;
  margin-bottom:.75rem;
}

.related{
  display:flex;
  gap:.75rem;
  padding:.6rem;
  border-radius:14px;
  border:1px solid rgba(111,44,255,.10);
  margin-bottom:.6rem;
  color:#111;
}

.related:hover{
  background:rgba(111,44,255,.06);
}

.related img{
  width:80px;
  height:60px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(111,44,255,.12);
}

/* =========================
   AUTHOR BOX
========================= */

.author-box{
  background:#fff;
  border:1px solid rgba(111,44,255,.12);
  border-radius:18px;
  padding:1rem;
}

.author-avatar{
  width:56px;
  height:56px;
  border-radius:999px;
  border:2px solid rgba(111,44,255,.2);
}

.author-name{
  font-weight:900;
}

.author-bio{
  color:#4b5563;
}

/* =========================
   SEARCH AUTOCOMPLETE
========================= */

.search-autocomplete-wrapper{
    position:relative;
    min-width:280px;
}

.search-input{
    border:2px solid rgba(111,44,255,.2);
    transition:all 0.2s ease;
}

.search-input:focus{
    border-color:var(--purple);
    box-shadow:0 0 0 0.25rem rgba(111,44,255,.15);
}

.search-autocomplete{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-top:0.5rem;
    background:#fff;
    border:1px solid rgba(111,44,255,.15);
    border-radius:16px;
    box-shadow:0 10px 40px rgba(17,12,46,.15);
    z-index:1050;
    overflow:hidden;
    animation:slideDown 0.2s ease;
}

@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.search-loading{
    padding:1.5rem;
    text-align:center;
    color:#6b7280;
}

.text-purple{
    color:var(--purple)!important;
}

.search-results{
    max-height:400px;
    overflow-y:auto;
}

.search-result-item{
    display:block;
    padding:0.875rem 1rem;
    border-bottom:1px solid rgba(111,44,255,.08);
    text-decoration:none;
    color:inherit;
    transition:all 0.15s ease;
}

.search-result-item:last-child{
    border-bottom:none;
}

.search-result-item:hover,
.search-result-item.selected{
    background:var(--soft);
    text-decoration:none;
    color:inherit;
}

.search-result-item.selected{
    background:rgba(111,44,255,.1);
}

.search-result-image{
    width:48px;
    height:48px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;
    border:1px solid rgba(111,44,255,.1);
}

.search-result-image-placeholder{
    width:48px;
    height:48px;
    border-radius:10px;
    background:rgba(111,44,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--purple);
    flex-shrink:0;
}

.search-result-title{
    font-weight:600;
    color:#111;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:0.25rem;
}

.search-result-title mark{
    background:rgba(111,44,255,.2);
    color:inherit;
    padding:0 2px;
    border-radius:3px;
}

.search-result-category{
    font-size:0.8rem;
    color:var(--purple);
    background:rgba(111,44,255,.1);
    padding:2px 8px;
    border-radius:20px;
}

.search-no-results{
    padding:2rem;
    text-align:center;
    color:#6b7280;
}

.search-footer{
    padding:0.75rem 1rem;
    background:#f8f9fa;
    border-top:1px solid rgba(111,44,255,.1);
    text-align:center;
}

.search-footer a{
    color:var(--purple);
    font-weight:600;
    text-decoration:none;
}

.search-footer a:hover{
    text-decoration:underline;
}

/* Mobile responsive */
@media (max-width: 768px){
    .search-autocomplete-wrapper{
        min-width:unset;
        width:100%;
    }
    
    .search-autocomplete{
        position:fixed;
        top:70px;
        left:1rem;
        right:1rem;
        margin-top:0;
    }
}

/* =========================
   SOCIAL SHARING
========================= */

.social-share{
  border-top:1px solid rgba(111,44,255,.15);
  padding-top:1.5rem;
  margin-top:1.5rem;
}

.social-buttons{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
}

.btn-social{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  border-radius:50px;
  font-weight:600;
  font-size:0.9rem;
  border:2px solid transparent;
  transition:all 0.2s ease;
  text-decoration:none;
}

.btn-social:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* LinkedIn - Purple theme matching */
.btn-linkedin{
  background:var(--purple);
  color:#fff;
  border-color:var(--purple);
}

.btn-linkedin:hover{
  background:var(--purple-dark);
  border-color:var(--purple-dark);
  color:#fff;
}

/* Twitter/X */
.btn-twitter{
  background:#1da1f2;
  color:#fff;
  border-color:#1da1f2;
}

.btn-twitter:hover{
  background:#0d8bd9;
  border-color:#0d8bd9;
  color:#fff;
}

/* Facebook */
.btn-facebook{
  background:#4267B2;
  color:#fff;
  border-color:#4267B2;
}

.btn-facebook:hover{
  background:#365899;
  border-color:#365899;
  color:#fff;
}

/* WhatsApp */
.btn-whatsapp{
  background:#25D366;
  color:#fff;
  border-color:#25D366;
}

.btn-whatsapp:hover{
  background:#1ebe57;
  border-color:#1ebe57;
  color:#fff;
}

/* Email */
.btn-email{
  background:#6c757d;
  color:#fff;
  border-color:#6c757d;
}

.btn-email:hover{
  background:#5a6268;
  border-color:#5a6268;
  color:#fff;
}

/* Copy Link - Purple outline */
.btn-copy{
  background:transparent;
  color:var(--purple);
  border-color:var(--purple);
}

.btn-copy:hover{
  background:var(--purple);
  color:#fff;
}

/* Mobile responsive */
@media (max-width: 576px){
  .btn-social span{
    display:none;
  }
  
  .btn-social{
    padding:0.5rem;
    width:44px;
    height:44px;
    justify-content:center;
  }
}

/* =========================
   COMMENTS
========================= */

.comments-title{
  font-weight:900;
  font-size:1.5rem;
}

.comment-form-card{
  background:#fff;
  border:1px solid rgba(111,44,255,.12);
  border-radius:18px;
  padding:1.5rem;
  box-shadow:0 4px 12px rgba(17,12,46,.05);
}

.comment-card{
  background:#fff;
  border:1px solid rgba(111,44,255,.12);
  border-radius:18px;
  padding:1.25rem;
  margin-bottom:1rem;
}

.comment-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.25rem;
  flex-shrink:0;
}

.comment-header{
  margin-bottom:0.5rem;
}

.comment-name{
  font-weight:700;
  color:#111;
}

.comment-date{
  font-size:0.85rem;
  color:#6b7280;
}

.comment-text{
  color:#4b5563;
  line-height:1.6;
}

.comments-list{
  margin-top:1.5rem;
}

.comment-form textarea{
  border-radius:14px;
  border:1px solid rgba(111,44,255,.18);
}

.comment-form .form-control:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 0.2rem rgba(111,44,255,.15);
}

/* =========================
   FOOTER
========================= */

footer{
  border-top:1px solid rgba(111,44,255,.15); 
  background:#fff;
}