/* =============================================================
   SARIGÜL İLETİŞİM — AWARD-WINNING DESIGN SYSTEM
   Premium · Glassmorphism · Mesh Gradient · Micro-interactions
   ============================================================= */
:root{
    /* Brand colors */
    --primary:#7C3AED;      /* Violet */
    --primary-dark:#5B21B6;
    --primary-light:#A78BFA;
    --secondary:#EC4899;    /* Pink */
    --accent:#06B6D4;       /* Cyan */
    --neon:#00F5D4;
    --gold:#FCD34D;

    /* Surfaces */
    --bg:#FAFAFB;
    --bg-2:#F4F4F7;
    --surface:#FFFFFF;
    --surface-alt:#FAFAFB;
    --dark:#0A0A0F;
    --darker:#050507;
    --dark-2:#13131A;
    --dark-3:#1C1C25;

    /* Text */
    --text:#18181B;
    --text-2:#52525B;
    --text-3:#A1A1AA;
    --muted:#71717A;
    --border:#E4E4E7;
    --border-2:#D4D4D8;

    /* Effects */
    --grad:linear-gradient(135deg,#7C3AED 0%,#EC4899 50%,#F59E0B 100%);
    --grad-2:linear-gradient(135deg,#06B6D4 0%,#7C3AED 100%);
    --grad-3:linear-gradient(135deg,#00F5D4 0%,#06B6D4 50%,#7C3AED 100%);
    --grad-cool:linear-gradient(135deg,#667EEA 0%,#764BA2 100%);
    --grad-warm:linear-gradient(135deg,#F59E0B 0%,#EF4444 50%,#EC4899 100%);
    --grad-dark:linear-gradient(135deg,#0A0A0F 0%,#1E1B4B 50%,#312E81 100%);

    --shadow-sm:0 1px 2px rgba(10,10,15,.04);
    --shadow:0 4px 12px rgba(10,10,15,.06), 0 2px 4px rgba(10,10,15,.04);
    --shadow-lg:0 25px 50px -12px rgba(10,10,15,.15), 0 12px 24px rgba(10,10,15,.08);
    --shadow-xl:0 50px 100px -20px rgba(10,10,15,.25), 0 30px 60px -30px rgba(10,10,15,.3);
    --shadow-glow:0 0 40px rgba(124,58,237,.4), 0 0 80px rgba(236,72,153,.2);
    --shadow-neon:0 0 20px rgba(0,245,212,.6), 0 0 40px rgba(0,245,212,.3);

    --radius-sm:8px;
    --radius:16px;
    --radius-lg:24px;
    --radius-xl:32px;

    --ease:cubic-bezier(.4,0,.2,1);
    --ease-bounce:cubic-bezier(.34,1.56,.64,1);
    --ease-elastic:cubic-bezier(.68,-.55,.265,1.55);
}

/* Dark mode */
[data-theme="dark"]{
    --bg:#0A0A0F;
    --bg-2:#13131A;
    --surface:#13131A;
    --surface-alt:#1C1C25;
    --text:#FAFAFA;
    --text-2:#D4D4D8;
    --text-3:#A1A1AA;
    --muted:#71717A;
    --border:#27272A;
    --border-2:#3F3F46;
}

/* ============ RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:'Inter','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.65;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:'cv11','ss01','ss03';
    transition:background-color .4s var(--ease),color .4s var(--ease);
}
h1,h2,h3,h4,h5,h6{
    font-family:'Cal Sans','Inter','Outfit',sans-serif;
    color:var(--text);
    font-weight:700;
    letter-spacing:-.025em;
    line-height:1.1;
}
h1{font-size:clamp(2.5rem,6vw,5rem);font-weight:800;letter-spacing:-.04em}
h2{font-size:clamp(2rem,4vw,3.5rem);font-weight:800;letter-spacing:-.03em}
h3{font-size:clamp(1.4rem,2.2vw,1.75rem)}
h4{font-size:1.25rem}
p{color:var(--text-2);font-size:1rem;line-height:1.75}
a{color:var(--primary);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--secondary)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--primary);color:#fff}

/* Custom scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--secondary));border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--secondary),var(--primary))}

/* ============ TYPOGRAPHY HELPERS ============ */
.text-gradient{
    background:var(--grad);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    background-size:200% 200%;
    animation:gradientShift 6s ease infinite;
}
.text-gradient-cool{background:var(--grad-2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-gradient-warm{background:var(--grad-warm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-neon{color:var(--neon);text-shadow:0 0 20px rgba(0,245,212,.5)}
@keyframes gradientShift{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}
.text-glow{text-shadow:0 0 30px rgba(124,58,237,.5)}

/* Animated underline */
.underline-grad{position:relative;display:inline-block}
.underline-grad::after{
    content:'';position:absolute;left:0;right:0;bottom:-4px;height:3px;
    background:var(--grad);border-radius:2px;transform:scaleX(0);transform-origin:left;
    transition:transform .5s var(--ease);
}
.underline-grad:hover::after{transform:scaleX(1)}

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

/* ============ EYEBROW & SECTION HEAD ============ */
.eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.5rem 1rem;
    background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(236,72,153,.1));
    border:1px solid rgba(124,58,237,.2);
    color:var(--primary);
    font-weight:600;
    font-size:.8rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-radius:50px;
    backdrop-filter:blur(10px);
}
.eyebrow .dot{
    width:6px;height:6px;border-radius:50%;background:var(--primary);
    box-shadow:0 0 0 0 var(--primary);animation:pulse-ring 2s infinite;
}
@keyframes pulse-ring{
    0%{box-shadow:0 0 0 0 rgba(124,58,237,.5)}
    70%{box-shadow:0 0 0 10px rgba(124,58,237,0)}
    100%{box-shadow:0 0 0 0 rgba(124,58,237,0)}
}
.section-head{text-align:center;margin-bottom:4.5rem;max-width:760px;margin-left:auto;margin-right:auto}
.section-head h2{margin:1.2rem 0 1rem}
.section-head p{font-size:1.125rem;color:var(--text-2)}

/* ============ SECTION ============ */
.section{padding:120px 0;position:relative;overflow:hidden}
@media(max-width:768px){.section{padding:80px 0}}

/* ============ BUTTONS — PREMIUM ============ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-weight:600;font-size:.95rem;
    padding:.875rem 1.75rem;
    border-radius:50px;
    border:none;cursor:pointer;
    transition:all .3s var(--ease);
    position:relative;overflow:hidden;
    white-space:nowrap;
    text-decoration:none;
    line-height:1;
}
.btn-lg{padding:1.1rem 2.25rem;font-size:1rem}
.btn-sm{padding:.625rem 1.25rem;font-size:.85rem}
.btn i{font-size:1.1em}

/* Primary - gradient + glow */
.btn-primary,.btn-gradient{
    background:var(--grad);
    background-size:200% 200%;
    color:#fff;
    box-shadow:0 10px 30px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.2);
    animation:gradientShift 6s ease infinite;
}
.btn-primary:hover,.btn-gradient:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 20px 40px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.3);
    color:#fff;
}
.btn-primary::before,.btn-gradient::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
    transform:translateX(-100%);transition:transform .6s var(--ease);
}
.btn-primary:hover::before,.btn-gradient:hover::before{transform:translateX(100%)}

/* Glass button */
.btn-glass{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.btn-glass:hover{
    background:rgba(255,255,255,.15);
    border-color:rgba(255,255,255,.4);
    transform:translateY(-2px);color:#fff;
}

/* Outline */
.btn-outline{
    background:transparent;
    border:2px solid var(--primary);
    color:var(--primary);
}
.btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 10px 25px rgba(124,58,237,.4)}

.btn-dark{background:var(--text);color:#fff}
.btn-dark:hover{background:var(--dark);color:#fff;transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--primary);font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(0,0,0,.15);color:var(--primary-dark)}

/* Neon button */
.btn-neon{
    background:transparent;color:var(--neon);
    border:1.5px solid var(--neon);
    box-shadow:0 0 20px rgba(0,245,212,.3), inset 0 0 20px rgba(0,245,212,.1);
}
.btn-neon:hover{background:var(--neon);color:var(--dark);box-shadow:0 0 30px var(--neon);transform:translateY(-2px)}

/* Icon button */
.btn-icon{width:44px;height:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}

/* ============ TOP BAR — Premium ============ */
.top-bar{
    background:var(--dark);color:rgba(255,255,255,.85);
    font-size:.825rem;padding:.65rem 0;
    border-bottom:1px solid rgba(255,255,255,.05);
    position:relative;overflow:hidden;
}
.top-bar::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(124,58,237,.2),transparent);
    animation:slideAcross 8s linear infinite;
}
@keyframes slideAcross{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;position:relative}
.top-bar .info span{margin-right:1.5rem;display:inline-flex;align-items:center;gap:.4rem}
.top-bar .info i{color:var(--neon);font-size:.95em}
.top-bar .links{display:flex;align-items:center;gap:1rem}
.top-bar .links a{color:rgba(255,255,255,.85);transition:color .2s var(--ease);display:inline-flex;align-items:center;gap:.4rem}
.top-bar .links a:hover{color:var(--neon)}
.top-bar .socials a{
    width:28px;height:28px;border-radius:50%;
    background:rgba(255,255,255,.08);
    display:inline-flex;align-items:center;justify-content:center;
    transition:all .25s var(--ease);
}
.top-bar .socials a:hover{background:var(--grad);transform:translateY(-2px)}

/* ============ NAVBAR — Liquid Glass ============ */
.navbar-main{
    position:sticky;top:0;z-index:1000;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-bottom:1px solid rgba(0,0,0,.06);
    transition:all .4s var(--ease);
}
[data-theme="dark"] .navbar-main{
    background:rgba(10,10,15,.72);
    border-bottom-color:rgba(255,255,255,.08);
}
.navbar-main.scrolled{
    background:rgba(255,255,255,.92);
    box-shadow:0 4px 30px rgba(0,0,0,.05);
}
[data-theme="dark"] .navbar-main.scrolled{background:rgba(10,10,15,.95)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.1rem 0;transition:padding .3s}
.navbar-main.scrolled .navbar-inner{padding:.75rem 0}

.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:800;font-size:1.3rem;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
@media(max-width:480px){.brand{font-size:1.05rem}.brand-icon{width:36px;height:36px;font-size:1rem}}
.brand-icon{
    width:42px;height:42px;border-radius:12px;
    background:var(--grad);
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.2rem;
    box-shadow:0 8px 20px rgba(124,58,237,.35);
    position:relative;overflow:hidden;
}
.brand-icon::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.3),transparent);
}
.brand span.gr{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.nav-menu{display:flex;list-style:none;gap:.4rem;align-items:center}
.nav-menu li a{
    position:relative;
    padding:.6rem 1rem;
    font-weight:500;font-size:.94rem;
    color:var(--text-2);
    border-radius:10px;
    transition:all .25s var(--ease);
}
.nav-menu li a::before{
    content:'';position:absolute;left:50%;bottom:.2rem;
    width:0;height:2px;background:var(--grad);border-radius:2px;
    transform:translateX(-50%);transition:width .3s var(--ease);
}
.nav-menu li a:hover,.nav-menu li a.active{color:var(--text)}
.nav-menu li a:hover::before,.nav-menu li a.active::before{width:60%}

.nav-actions{display:flex;align-items:center;gap:.75rem}
.theme-toggle{
    width:42px;height:42px;border-radius:50%;
    background:var(--bg-2);
    border:1px solid var(--border);
    color:var(--text);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:1.1rem;
    transition:all .3s var(--ease);
}
.theme-toggle:hover{transform:rotate(15deg) scale(1.05);background:var(--grad);color:#fff;border-color:transparent}

.menu-toggle{display:none;width:42px;height:42px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border);font-size:1.4rem;cursor:pointer;color:var(--text)}

@media(max-width:992px){
    .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
    .nav-menu{
        position:fixed;top:0;right:-100%;
        width:85%;max-width:380px;height:100vh;
        background:var(--surface);
        flex-direction:column;align-items:stretch;
        padding:6rem 2rem 2rem;gap:.5rem;
        box-shadow:-20px 0 60px rgba(0,0,0,.2);
        transition:right .4s var(--ease);
        z-index:1100;
    }
    .nav-menu.open{right:0}
    .nav-menu li a{display:block;padding:1rem 1.2rem;font-size:1.05rem;border-radius:12px}
    .nav-menu li a:hover,.nav-menu li a.active{background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(236,72,153,.1))}
    .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1050;opacity:0;pointer-events:none;transition:.3s;backdrop-filter:blur(4px)}
    .nav-overlay.open{opacity:1;pointer-events:auto}
    .nav-actions .btn{display:none}
    .nav-actions .btn-mobile-show{display:inline-flex}
}

/* ============ HERO — INCREDIBLE ============ */
.hero{
    position:relative;
    min-height:100vh;
    display:flex;align-items:center;
    color:#fff;
    overflow:hidden;
    background:var(--grad-dark);
    isolation:isolate;
}
/* Mesh gradient animated */
.hero::before{
    content:'';position:absolute;inset:-20%;z-index:-1;
    background:
      radial-gradient(circle at 20% 30%,rgba(124,58,237,.6) 0%,transparent 35%),
      radial-gradient(circle at 80% 20%,rgba(236,72,153,.5) 0%,transparent 35%),
      radial-gradient(circle at 60% 80%,rgba(6,182,212,.4) 0%,transparent 35%),
      radial-gradient(circle at 30% 70%,rgba(0,245,212,.3) 0%,transparent 40%);
    filter:blur(40px);
    animation:meshMove 20s ease-in-out infinite alternate;
}
@keyframes meshMove{
    0%{transform:translate(0,0) rotate(0deg) scale(1)}
    50%{transform:translate(3%,-2%) rotate(180deg) scale(1.1)}
    100%{transform:translate(-2%,3%) rotate(360deg) scale(1)}
}
/* Grid overlay */
.hero::after{
    content:'';position:absolute;inset:0;z-index:-1;
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(circle at center,#000 30%,transparent 80%);
    -webkit-mask-image:radial-gradient(circle at center,#000 30%,transparent 80%);
}

.hero-content{position:relative;z-index:2;padding:6rem 0 4rem;width:100%}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
@media(max-width:992px){.hero-grid{grid-template-columns:1fr;gap:3rem;text-align:center}}

.hero h1{color:#fff;margin-bottom:1.5rem;text-shadow:0 4px 30px rgba(0,0,0,.3)}
.hero h1 .accent{position:relative;display:inline-block;background:linear-gradient(135deg,#00F5D4 0%,#FCD34D 50%,#EC4899 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero h1 .accent::after{
    content:'';position:absolute;left:0;bottom:-.1em;width:100%;height:.15em;
    background:linear-gradient(90deg,#00F5D4,#EC4899);border-radius:.1em;opacity:.4;
}
.hero .lead{font-size:1.2rem;color:rgba(255,255,255,.85);margin-bottom:2.5rem;max-width:540px;line-height:1.7}
@media(max-width:992px){.hero .lead{margin-left:auto;margin-right:auto}}

.hero-badge{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.5rem 1rem .5rem .5rem;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:50px;font-size:.85rem;font-weight:500;
    backdrop-filter:blur(20px);
    margin-bottom:2rem;
    color:rgba(255,255,255,.95);
}
.hero-badge .live{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.25rem .65rem;border-radius:50px;
    background:rgba(0,245,212,.15);color:var(--neon);
    font-weight:600;font-size:.78rem;
}
.hero-badge .live .dot{width:6px;height:6px;background:var(--neon);border-radius:50%;box-shadow:0 0 0 0 var(--neon);animation:pulse-ring 1.5s infinite}

.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}
@media(max-width:992px){.hero-ctas{justify-content:center}}

/* Hero stats — kart */
.hero-stats{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.hero-stat{
    padding:1.25rem 1rem;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    backdrop-filter:blur(20px);
    transition:all .3s var(--ease);
}
.hero-stat:hover{transform:translateY(-4px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.hero-stat strong{
    display:block;font-size:2rem;font-weight:800;
    background:linear-gradient(135deg,#00F5D4,#EC4899);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    line-height:1;margin-bottom:.4rem;
    font-family:'Cal Sans','Inter',sans-serif;
}
.hero-stat span{color:rgba(255,255,255,.7);font-size:.82rem}

/* Hero visual — 3D phone card */
.hero-visual{position:relative;perspective:1500px}
.phone-3d{
    position:relative;
    aspect-ratio:9/16;max-width:340px;margin:0 auto;
    border-radius:48px;
    background:linear-gradient(145deg,#1C1C25,#0A0A0F);
    padding:14px;
    box-shadow:
        0 50px 100px -20px rgba(0,0,0,.5),
        0 30px 60px -30px rgba(124,58,237,.4),
        inset 0 1px 0 rgba(255,255,255,.1);
    transform:rotateY(-15deg) rotateX(8deg);
    transition:transform .6s var(--ease);
    animation:floatPhone 6s ease-in-out infinite;
}
@keyframes floatPhone{
    0%,100%{transform:rotateY(-15deg) rotateX(8deg) translateY(0)}
    50%{transform:rotateY(-12deg) rotateX(5deg) translateY(-20px)}
}
.phone-3d:hover{transform:rotateY(0) rotateX(0)}
.phone-screen{
    width:100%;height:100%;
    border-radius:36px;
    background:linear-gradient(135deg,#7C3AED,#EC4899,#06B6D4);
    background-size:200% 200%;
    animation:gradientShift 8s ease infinite;
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    color:#fff;padding:2rem;
}
.phone-screen::before{
    content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);
    width:80px;height:22px;background:#0A0A0F;border-radius:20px;z-index:3;
}
.phone-screen .big-emoji{font-size:5rem;margin-bottom:1rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.phone-screen h3{color:#fff;font-size:1.4rem;margin-bottom:.5rem;text-align:center}
.phone-screen p{color:rgba(255,255,255,.85);font-size:.85rem;text-align:center;margin-bottom:1.5rem}
.phone-screen .mini-stats{display:flex;gap:1rem;width:100%;justify-content:space-around;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2)}
.phone-screen .mini-stats div{text-align:center}
.phone-screen .mini-stats strong{display:block;font-size:1.2rem;font-weight:800}
.phone-screen .mini-stats span{font-size:.7rem;opacity:.8}

/* Floating mini cards around phone */
.float-card{
    position:absolute;
    padding:1rem 1.2rem;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(20px);
    border-radius:18px;
    box-shadow:0 25px 50px -12px rgba(0,0,0,.4);
    display:flex;align-items:center;gap:.75rem;
    z-index:10;
    color:var(--text);
    animation:floatCard 5s ease-in-out infinite;
}
.float-card .ic{
    width:42px;height:42px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.2rem;
    box-shadow:0 8px 16px rgba(0,0,0,.2);
}
.float-card .ic.g1{background:var(--grad)}
.float-card .ic.g2{background:var(--grad-2)}
.float-card .ic.g3{background:var(--grad-warm)}
.float-card strong{display:block;font-size:.85rem;color:var(--text);font-weight:700}
.float-card small{display:block;font-size:.72rem;color:var(--muted)}
.float-card.fc-1{top:8%;left:-15%;animation-delay:0s}
.float-card.fc-2{top:42%;right:-18%;animation-delay:1.5s}
.float-card.fc-3{bottom:8%;left:-8%;animation-delay:3s}
@keyframes floatCard{
    0%,100%{transform:translateY(0) rotate(-2deg)}
    50%{transform:translateY(-12px) rotate(2deg)}
}
@media(max-width:992px){.float-card.fc-1,.float-card.fc-3{left:0}.float-card.fc-2{right:0}}

/* Scroll indicator */
.scroll-indicator{
    position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
    color:rgba(255,255,255,.5);font-size:.75rem;
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
    z-index:2;letter-spacing:.15em;text-transform:uppercase;
}
.scroll-indicator .mouse{
    width:24px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:14px;position:relative;
}
.scroll-indicator .mouse::before{
    content:'';position:absolute;left:50%;top:6px;transform:translateX(-50%);
    width:3px;height:8px;background:rgba(255,255,255,.6);border-radius:2px;
    animation:scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown{0%,100%{opacity:0;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(10px)}}

/* ============ MARQUEE / BRAND TICKER ============ */
.marquee{
    overflow:hidden;
    padding:2.5rem 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:var(--bg-2);
    position:relative;
}
.marquee::before,.marquee::after{
    content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--bg-2),transparent)}
.marquee-track{display:flex;gap:4rem;animation:marqueeScroll 30s linear infinite;width:max-content}
.marquee-item{
    display:inline-flex;align-items:center;gap:.75rem;
    font-size:1.5rem;font-weight:700;color:var(--text-2);
    white-space:nowrap;
    transition:color .3s;
}
.marquee-item:hover{color:var(--primary)}
.marquee-item i{font-size:2rem;color:var(--primary)}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============ SERVICES — PREMIUM CARDS ============ */
.section-services{background:var(--bg);position:relative}
.section-services::before{
    content:'';position:absolute;top:0;right:0;width:600px;height:600px;
    background:radial-gradient(circle,rgba(236,72,153,.08) 0%,transparent 70%);
    pointer-events:none;
}
.section-services::after{
    content:'';position:absolute;bottom:0;left:0;width:500px;height:500px;
    background:radial-gradient(circle,rgba(124,58,237,.08) 0%,transparent 70%);
    pointer-events:none;
}

.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;position:relative;z-index:1}

.service-card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    padding:2rem;
    transition:all .5s var(--ease);
    overflow:hidden;
    isolation:isolate;
    cursor:pointer;
}
.service-card::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    opacity:0;transition:opacity .5s var(--ease);
}
.service-card::after{
    content:'';position:absolute;inset:1px;border-radius:23px;background:var(--surface);z-index:-1;
    transition:background .5s var(--ease);
}
.service-card:hover{transform:translateY(-12px);border-color:transparent;box-shadow:0 30px 60px -20px rgba(124,58,237,.3)}
.service-card:hover::before{opacity:1}
.service-card:hover::after{background:var(--surface)}

.service-icon{
    width:64px;height:64px;border-radius:18px;
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(236,72,153,.1));
    color:var(--primary);font-size:1.6rem;
    margin-bottom:1.5rem;
    transition:all .5s var(--ease);
    position:relative;
}
.service-icon::after{
    content:'';position:absolute;inset:0;border-radius:18px;
    background:var(--grad);opacity:0;transition:opacity .5s var(--ease);z-index:-1;
}
.service-card:hover .service-icon{
    color:#fff;transform:rotate(-8deg) scale(1.1);
    box-shadow:0 15px 30px rgba(124,58,237,.4);
}
.service-card:hover .service-icon::after{opacity:1}

.service-card h3{font-size:1.3rem;margin-bottom:.75rem;color:var(--text);transition:color .3s}
.service-card p{color:var(--text-2);font-size:.95rem;margin-bottom:1.25rem;line-height:1.65}
.service-card .price{
    display:inline-flex;align-items:baseline;gap:.25rem;
    font-weight:800;font-family:'Cal Sans','Inter',sans-serif;
    background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
    font-size:1.4rem;margin-bottom:1rem;
}
.service-card .price small{font-size:.75rem;color:var(--muted);font-weight:500;-webkit-text-fill-color:var(--muted)}
.service-card .arrow{
    display:inline-flex;align-items:center;gap:.4rem;
    color:var(--primary);font-weight:600;font-size:.9rem;
    transition:gap .3s var(--ease);
}
.service-card .arrow i{transition:transform .3s var(--ease)}
.service-card:hover .arrow{gap:.7rem}
.service-card:hover .arrow i{transform:translateX(4px)}

/* Featured service - daha büyük */
.service-card.featured{
    background:var(--grad);color:#fff;border:none;
}
.service-card.featured::after,.service-card.featured::before{display:none}
.service-card.featured h3,.service-card.featured p,.service-card.featured .price{color:#fff;-webkit-text-fill-color:#fff;background:none}
.service-card.featured p{color:rgba(255,255,255,.85)}
.service-card.featured .service-icon{background:rgba(255,255,255,.15);color:#fff}
.service-card.featured .arrow{color:#fff}
.service-card.featured:hover{transform:translateY(-12px) scale(1.02)}

/* ============ FEATURES — Bento Grid ============ */
.section-features{background:var(--bg-2);position:relative;overflow:hidden}

.bento-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:minmax(180px,auto);
    gap:1.25rem;
}
.bento-item{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    padding:2rem;
    transition:all .4s var(--ease);
    position:relative;
    overflow:hidden;
    display:flex;flex-direction:column;justify-content:space-between;
}
.bento-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.3)}
.bento-item.big{grid-column:span 2;grid-row:span 2}
.bento-item.wide{grid-column:span 2}
.bento-item.tall{grid-row:span 2}

.bento-icon{
    width:50px;height:50px;border-radius:14px;
    background:var(--grad);
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.4rem;margin-bottom:1rem;
    box-shadow:0 10px 20px rgba(124,58,237,.3);
}
.bento-item h3{font-size:1.25rem;margin-bottom:.5rem}
.bento-item p{color:var(--text-2);font-size:.92rem;margin-bottom:0}

.bento-item.gradient{background:var(--grad);color:#fff;border:none}
.bento-item.gradient h3,.bento-item.gradient p{color:#fff}
.bento-item.gradient p{color:rgba(255,255,255,.9)}
.bento-item.gradient .bento-icon{background:rgba(255,255,255,.15)}

.bento-item.dark{background:var(--dark);color:#fff;border:none;position:relative;overflow:hidden}
.bento-item.dark::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at top right,rgba(124,58,237,.3),transparent 60%);
    pointer-events:none;
}
.bento-item.dark h3,.bento-item.dark p{color:#fff;position:relative}
.bento-item.dark p{color:rgba(255,255,255,.8)}

.bento-big-stat{font-size:5rem;font-weight:900;line-height:1;font-family:'Cal Sans','Inter',sans-serif;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}

@media(max-width:992px){
    .bento-grid{grid-template-columns:repeat(2,1fr)}
    .bento-item.big,.bento-item.wide{grid-column:span 2}
    .bento-item.tall{grid-row:auto}
}
@media(max-width:600px){
    .bento-grid{grid-template-columns:1fr}
    .bento-item.big,.bento-item.wide{grid-column:span 1}
}

/* ============ PROCESS — Timeline ============ */
.section-process{position:relative;background:var(--bg)}
.process-timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
.process-timeline::before{
    content:'';position:absolute;top:30px;left:8%;right:8%;height:2px;
    background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
    border-radius:2px;z-index:0;
}
@media(max-width:992px){.process-timeline{grid-template-columns:repeat(2,1fr)} .process-timeline::before{display:none}}
@media(max-width:600px){.process-timeline{grid-template-columns:1fr}}

.process-step{
    text-align:center;position:relative;z-index:1;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    padding:3rem 1.5rem 2rem;
    transition:all .4s var(--ease);
}
.process-step:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.3)}
.process-step .step-num{
    width:60px;height:60px;border-radius:50%;
    background:var(--grad);
    color:#fff;font-weight:800;font-size:1.5rem;font-family:'Cal Sans','Inter',sans-serif;
    display:inline-flex;align-items:center;justify-content:center;
    margin-top:-3.5rem;margin-bottom:1.5rem;
    box-shadow:0 15px 30px rgba(124,58,237,.4),0 0 0 6px var(--bg);
    transition:transform .4s var(--ease);
}
.process-step:hover .step-num{transform:rotate(360deg) scale(1.1)}
.process-step .step-icon{font-size:2.5rem;margin-bottom:1rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
.process-step h3{font-size:1.2rem;margin-bottom:.5rem}
.process-step p{color:var(--text-2);font-size:.9rem;margin-bottom:0}

/* ============ STATS COUNTER — Premium ============ */
.section-stats{
    background:var(--dark);color:#fff;
    position:relative;overflow:hidden;
}
.section-stats::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(circle at 20% 20%,rgba(124,58,237,.3) 0%,transparent 50%),
        radial-gradient(circle at 80% 80%,rgba(236,72,153,.3) 0%,transparent 50%),
        radial-gradient(circle at 50% 50%,rgba(6,182,212,.2) 0%,transparent 50%);
    animation:meshMove 25s ease-in-out infinite alternate;
}
.section-stats > .container{position:relative;z-index:1}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media(max-width:992px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.stats-grid{grid-template-columns:1fr}}
.stat-block{
    text-align:center;
    padding:2.5rem 1.5rem;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    backdrop-filter:blur(20px);
    transition:all .4s var(--ease);
    position:relative;overflow:hidden;
}
.stat-block::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.stat-block:hover{transform:translateY(-8px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.stat-block:hover::before{transform:scaleX(1)}
.stat-block .stat-ic{
    width:60px;height:60px;border-radius:18px;
    background:var(--grad);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1.6rem;margin-bottom:1.25rem;
    box-shadow:0 15px 30px rgba(124,58,237,.4);
}
.stat-block .stat-num{
    display:block;font-size:3.5rem;font-weight:900;
    background:linear-gradient(135deg,#00F5D4,#FCD34D,#EC4899);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    line-height:1;font-family:'Cal Sans','Inter',sans-serif;
    margin-bottom:.5rem;
}
.stat-block .stat-label{color:rgba(255,255,255,.7);font-size:.95rem;font-weight:500}

/* ============ BRANDS — Modern Cards ============ */
.section-brands{background:var(--bg)}
.brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.brand-card{
    aspect-ratio:1.4/1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
    padding:1.5rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    transition:all .4s var(--ease);
    position:relative;overflow:hidden;
    text-decoration:none;
}
.brand-card::before{
    content:'';position:absolute;inset:0;
    background:var(--grad);opacity:0;transition:opacity .4s;
}
.brand-card:hover{transform:translateY(-6px) scale(1.03);border-color:transparent;box-shadow:0 25px 50px -12px rgba(124,58,237,.3)}
.brand-card:hover::before{opacity:.05}
.brand-card .brand-emoji{font-size:2.5rem;position:relative;z-index:1;transition:transform .4s var(--ease)}
.brand-card:hover .brand-emoji{transform:scale(1.2) rotate(-5deg)}
.brand-card .brand-name{font-weight:700;color:var(--text);position:relative;z-index:1;font-size:1.05rem}
.brand-card img{max-height:50px;width:auto;object-fit:contain}

/* ============ TESTIMONIALS — Premium ============ */
.section-testimonials{
    background:var(--bg-2);position:relative;overflow:hidden;
}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.testimonials-grid{grid-template-columns:1fr}}

.testimonial-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    padding:2rem;
    position:relative;
    transition:all .4s var(--ease);
    overflow:hidden;
}
.testimonial-card::before{
    content:'';position:absolute;top:0;left:0;width:100%;height:4px;
    background:var(--grad);transform:scaleX(0);transform-origin:left;
    transition:transform .5s var(--ease);
}
.testimonial-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.testimonial-card:hover::before{transform:scaleX(1)}
.testimonial-card .quote-icon{
    position:absolute;top:1.5rem;right:1.5rem;
    width:50px;height:50px;border-radius:50%;
    background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(236,72,153,.1));
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--primary);font-size:1.5rem;
}
.testimonial-card .stars{color:var(--gold);margin-bottom:1rem;font-size:.95rem;letter-spacing:.1em}
.testimonial-card p{color:var(--text-2);font-size:1rem;line-height:1.75;margin-bottom:1.5rem;position:relative;z-index:1}
.testimonial-author{display:flex;align-items:center;gap:.85rem;padding-top:1.25rem;border-top:1px dashed var(--border)}
.testimonial-author .avatar{
    width:50px;height:50px;border-radius:50%;
    background:var(--grad);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:700;font-size:1.2rem;
    box-shadow:0 8px 16px rgba(124,58,237,.3);
}
.testimonial-author h6{margin:0;color:var(--text);font-size:1rem}
.testimonial-author span{color:var(--muted);font-size:.85rem}

/* ============ BLOG — Premium Cards ============ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}

.blog-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;
    transition:all .4s var(--ease);
    display:flex;flex-direction:column;
    text-decoration:none;color:inherit;
}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.3)}
.blog-thumb{
    aspect-ratio:16/10;background:var(--grad);position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:3rem;
}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.blog-card:hover .blog-thumb img{transform:scale(1.08)}
.blog-thumb .cat-badge{
    position:absolute;top:1rem;left:1rem;
    padding:.35rem .8rem;
    background:rgba(255,255,255,.95);color:var(--text);
    border-radius:50px;font-size:.75rem;font-weight:600;
    backdrop-filter:blur(10px);
    text-transform:uppercase;letter-spacing:.05em;
}
.blog-body{padding:1.75rem;display:flex;flex-direction:column;flex:1}
.blog-meta{display:flex;align-items:center;gap:1rem;font-size:.82rem;color:var(--muted);margin-bottom:1rem}
.blog-meta span{display:inline-flex;align-items:center;gap:.3rem}
.blog-body h3{font-size:1.25rem;line-height:1.35;margin-bottom:.75rem}
.blog-body p{color:var(--text-2);font-size:.95rem;margin-bottom:1.25rem;flex:1}
.blog-body .read-more{display:inline-flex;align-items:center;gap:.5rem;color:var(--primary);font-weight:600;font-size:.92rem;transition:gap .3s var(--ease)}
.blog-card:hover .read-more{gap:.75rem}

/* ============ FAQ — Premium ============ */
.section-faq{background:var(--bg);position:relative;overflow:hidden}
.faq-wrapper{display:grid;grid-template-columns:.9fr 1.4fr;gap:4rem;align-items:start}
@media(max-width:992px){.faq-wrapper{grid-template-columns:1fr}}

.faq-item{
    margin-bottom:1rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    transition:all .3s var(--ease);
}
.faq-item.open{border-color:var(--primary);box-shadow:0 15px 35px rgba(124,58,237,.15)}
.faq-question{
    width:100%;padding:1.25rem 1.5rem;
    background:transparent;border:none;
    display:flex;justify-content:space-between;align-items:center;gap:1rem;
    font-size:1.05rem;font-weight:600;color:var(--text);
    text-align:left;cursor:pointer;
    transition:color .3s;
    font-family:inherit;
}
.faq-item.open .faq-question{color:var(--primary)}
.faq-toggle{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(236,72,153,.1));
    color:var(--primary);
    display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;font-size:1rem;
    transition:all .3s var(--ease);
}
.faq-item.open .faq-toggle{background:var(--grad);color:#fff;transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-item.open .faq-answer{max-height:500px}
.faq-answer-inner{padding:0 1.5rem 1.5rem;color:var(--text-2);line-height:1.75}

/* ============ CTA SECTION ============ */
.cta-banner{
    background:var(--grad);
    background-size:200% 200%;
    animation:gradientShift 8s ease infinite;
    border-radius:32px;padding:4rem 3rem;
    color:#fff;
    position:relative;overflow:hidden;
    box-shadow:0 50px 100px -20px rgba(124,58,237,.5);
}
.cta-banner::before{
    content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;
    background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);
    border-radius:50%;
}
.cta-banner::after{
    content:'';position:absolute;bottom:-150px;left:-100px;width:500px;height:500px;
    background:radial-gradient(circle,rgba(0,245,212,.15),transparent 70%);
    border-radius:50%;
}
.cta-banner > *{position:relative;z-index:1}
.cta-banner h2{color:#fff;margin-bottom:1rem}
.cta-banner p{color:rgba(255,255,255,.9);font-size:1.15rem;margin-bottom:2rem;max-width:600px}

/* ============ PAGE BANNER ============ */
.page-banner{
    background:var(--grad-dark);color:#fff;
    padding:7rem 0 5rem;position:relative;overflow:hidden;
}
.page-banner::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(circle at 20% 30%,rgba(124,58,237,.4) 0%,transparent 50%),
        radial-gradient(circle at 80% 70%,rgba(236,72,153,.3) 0%,transparent 50%);
    animation:meshMove 18s ease-in-out infinite alternate;
}
.page-banner::after{
    content:'';position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:50px 50px;
    mask-image:radial-gradient(circle at center,#000 30%,transparent 80%);
}
.page-banner > .container{position:relative;z-index:1}
.page-banner h1{color:#fff;margin-bottom:1rem;text-align:center}
.breadcrumb-nav{display:flex;justify-content:center;gap:.6rem;font-size:.92rem;color:rgba(255,255,255,.7);align-items:center;flex-wrap:wrap}
.breadcrumb-nav a{color:rgba(255,255,255,.85);transition:color .2s}
.breadcrumb-nav a:hover{color:var(--neon)}
.breadcrumb-nav .sep{color:rgba(255,255,255,.4)}

/* ============ FORMS — Premium ============ */
.form-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    padding:2.5rem;
    box-shadow:var(--shadow);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-grid .full{grid-column:1/-1}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}

.form-group{position:relative}
.form-label{
    display:block;font-weight:600;font-size:.88rem;
    color:var(--text);margin-bottom:.5rem;
    letter-spacing:.01em;
}
.form-control,.form-select,textarea.form-control{
    width:100%;
    padding:.95rem 1.1rem;
    background:var(--bg);
    border:2px solid var(--border);
    border-radius:12px;
    font-size:.95rem;
    color:var(--text);
    font-family:inherit;
    transition:all .25s var(--ease);
    outline:none;
}
.form-control:focus,.form-select:focus,textarea.form-control:focus{
    border-color:var(--primary);
    background:var(--surface);
    box-shadow:0 0 0 4px rgba(124,58,237,.12);
}
textarea.form-control{resize:vertical;min-height:120px;line-height:1.6}
.form-control::placeholder{color:var(--text-3)}

/* ============ ALERTS ============ */
.alert{
    padding:1rem 1.25rem;
    border-radius:14px;
    margin-bottom:1.25rem;
    border:1px solid transparent;
    display:flex;align-items:center;gap:.75rem;
    font-weight:500;font-size:.95rem;
    animation:slideDown .4s var(--ease);
}
@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}
.alert-success{background:rgba(16,185,129,.08);color:#047857;border-color:rgba(16,185,129,.25)}
.alert-danger,.alert-error{background:rgba(239,68,68,.08);color:#B91C1C;border-color:rgba(239,68,68,.25)}
.alert-info{background:rgba(6,182,212,.08);color:#0E7490;border-color:rgba(6,182,212,.25)}
.alert-warning{background:rgba(245,158,11,.08);color:#B45309;border-color:rgba(245,158,11,.25)}

/* ============ CONTACT INFO CARDS ============ */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
@media(max-width:900px){.contact-cards{grid-template-columns:1fr}}
.contact-info-card{
    text-align:center;padding:2.5rem 1.5rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    transition:all .4s var(--ease);
    position:relative;overflow:hidden;
}
.contact-info-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.3)}
.contact-info-card .ci-icon{
    width:70px;height:70px;border-radius:20px;
    background:var(--grad);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1.7rem;margin-bottom:1.25rem;
    box-shadow:0 15px 30px rgba(124,58,237,.3);
}
.contact-info-card h5{font-size:1.1rem;margin-bottom:.5rem}
.contact-info-card a,.contact-info-card span{color:var(--text-2);font-weight:500;display:block;font-size:.95rem}

/* ============ SIDEBAR ============ */
.sidebar-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:1.75rem;
    margin-bottom:1.5rem;
    transition:all .3s var(--ease);
}
.sidebar-card h5{font-size:1.1rem;margin-bottom:1.25rem;padding-bottom:.85rem;border-bottom:2px solid var(--border);position:relative}
.sidebar-card h5::after{content:'';position:absolute;left:0;bottom:-2px;width:40px;height:2px;background:var(--grad)}
.sidebar-list{list-style:none}
.sidebar-list li a{
    display:flex;justify-content:space-between;align-items:center;
    padding:.85rem 0;
    color:var(--text-2);font-weight:500;font-size:.93rem;
    border-bottom:1px dashed var(--border);
    transition:all .25s var(--ease);
}
.sidebar-list li:last-child a{border-bottom:none}
.sidebar-list li a:hover{color:var(--primary);padding-left:.5rem}
.sidebar-list li a i{color:var(--text-3);transition:transform .3s}
.sidebar-list li a:hover i{transform:translateX(3px);color:var(--primary)}

.sidebar-card.gradient{background:var(--grad);color:#fff;border:none;text-align:center;padding:2rem;position:relative;overflow:hidden}
.sidebar-card.gradient::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,255,255,.2),transparent 60%)}
.sidebar-card.gradient > *{position:relative;z-index:1}
.sidebar-card.gradient h5{color:#fff;border-color:rgba(255,255,255,.2)}
.sidebar-card.gradient h5::after{background:rgba(255,255,255,.5)}
.sidebar-card.gradient p{color:rgba(255,255,255,.9)}

/* ============ ARTICLE / DETAIL ============ */
.article-content{font-size:1.05rem;line-height:1.85;color:var(--text-2)}
.article-content h2{font-size:1.7rem;margin:2rem 0 1rem;color:var(--text)}
.article-content h3{font-size:1.35rem;margin:1.75rem 0 .85rem;color:var(--text)}
.article-content p{margin-bottom:1.25rem;color:var(--text-2)}
.article-content ul,.article-content ol{margin:1rem 0 1.5rem 1.5rem;color:var(--text-2)}
.article-content li{margin-bottom:.5rem}
.article-content strong{color:var(--text);font-weight:700}
.article-content img{border-radius:16px;margin:1.5rem 0}
.article-content blockquote{
    border-left:4px solid var(--primary);
    padding:1.25rem 1.5rem;
    background:linear-gradient(90deg,rgba(124,58,237,.05),transparent);
    border-radius:12px;font-style:italic;margin:1.5rem 0;
}

/* ============ FOOTER ============ */
.footer{background:var(--darker);color:rgba(255,255,255,.7);position:relative;overflow:hidden}
.footer::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--primary),var(--secondary),transparent);
    opacity:.6;
}
.footer-cta{
    padding:3.5rem 0;background:var(--grad);
    position:relative;overflow:hidden;color:#fff;
}
.footer-cta::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at top right,rgba(255,255,255,.2),transparent 60%);
}
.footer-cta-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer-cta h3{color:#fff;margin-bottom:.4rem;font-size:1.75rem}
.footer-cta p{color:rgba(255,255,255,.9);margin:0}

.footer-main{padding:5rem 0 3rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:3rem}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}

.footer-brand{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-weight:800;font-size:1.6rem;margin-bottom:1rem;text-decoration:none}
.footer p.lead{color:rgba(255,255,255,.7);margin-bottom:1.5rem;line-height:1.7;font-size:.95rem}
.footer h6{color:#fff;font-weight:700;font-size:1.05rem;margin-bottom:1.5rem;position:relative;padding-bottom:.75rem}
.footer h6::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--grad);border-radius:2px}
.footer ul{list-style:none}
.footer ul li{margin-bottom:.7rem}
.footer ul a{color:rgba(255,255,255,.65);font-size:.92rem;transition:all .25s var(--ease);display:inline-block}
.footer ul a:hover{color:#fff;transform:translateX(5px)}
.footer .contact-list li{display:flex;gap:.7rem;align-items:flex-start;color:rgba(255,255,255,.7)}
.footer .contact-list i{color:var(--neon);flex-shrink:0;margin-top:.25rem}

.newsletter-form{
    display:flex;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:50px;overflow:hidden;
    transition:border-color .3s;
}
.newsletter-form:focus-within{border-color:var(--primary)}
.newsletter-form input{
    flex:1;background:transparent;border:none;color:#fff;
    padding:.85rem 1.25rem;outline:none;font-size:.92rem;
}
.newsletter-form input::placeholder{color:rgba(255,255,255,.4)}
.newsletter-form button{
    background:var(--grad);color:#fff;border:none;
    padding:0 1.6rem;cursor:pointer;font-size:1.1rem;
    transition:transform .25s;
}
.newsletter-form button:hover{transform:translateX(2px)}

.footer-socials{display:flex;gap:.6rem;margin-top:1.25rem}
.footer-socials a{
    width:40px;height:40px;border-radius:12px;
    background:rgba(255,255,255,.06);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    transition:all .3s var(--ease);
}
.footer-socials a:hover{background:var(--grad);transform:translateY(-3px);box-shadow:0 10px 20px rgba(124,58,237,.4)}

.footer-bottom{
    padding:1.5rem 0;
    border-top:1px solid rgba(255,255,255,.06);
    font-size:.88rem;
}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-bottom .legal{display:flex;gap:1.5rem}
.footer-bottom .legal a{color:rgba(255,255,255,.6)}
.footer-bottom .legal a:hover{color:#fff}

/* ============ FLOATING BUTTONS ============ */
.fab-stack{
    position:fixed;right:24px;bottom:24px;z-index:9999;
    display:flex;flex-direction:column;gap:12px;
}
.fab{
    width:58px;height:58px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.5rem;
    box-shadow:0 15px 30px rgba(0,0,0,.25);
    transition:all .3s var(--ease);
    position:relative;
}
.fab:hover{transform:translateY(-4px) scale(1.08);color:#fff}
.fab.whatsapp{background:#25D366;box-shadow:0 15px 30px rgba(37,211,102,.5)}
.fab.phone{background:var(--grad);box-shadow:0 15px 30px rgba(124,58,237,.5)}
.fab::after{
    content:'';position:absolute;inset:0;border-radius:50%;
    border:2px solid currentColor;opacity:.6;
    animation:fabPulse 2s ease-out infinite;
}
@keyframes fabPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}

/* Scroll to top */
.scroll-top{
    position:fixed;bottom:24px;left:24px;z-index:9998;
    width:48px;height:48px;border-radius:12px;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);font-size:1.2rem;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;opacity:0;pointer-events:none;
    transition:all .3s var(--ease);
    box-shadow:var(--shadow);
}
.scroll-top.show{opacity:1;pointer-events:auto}
.scroll-top:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-3px)}

/* ============ BADGES ============ */
.badge{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.3rem .7rem;border-radius:50px;
    font-size:.75rem;font-weight:600;
    letter-spacing:.02em;
}
.badge-success{background:rgba(16,185,129,.1);color:#059669}
.badge-warning{background:rgba(245,158,11,.1);color:#D97706}
.badge-info{background:rgba(6,182,212,.1);color:#0891B2}
.badge-primary{background:rgba(124,58,237,.1);color:var(--primary)}
.badge-danger{background:rgba(239,68,68,.1);color:#DC2626}
.badge-dark{background:var(--dark);color:#fff}
.badge-gradient{background:var(--grad);color:#fff}

/* ============ UTILITY ============ */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.mb-5{margin-bottom:3rem}
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.d-flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.gap-2{gap:.5rem}.gap-3{gap:1rem}.gap-4{gap:1.5rem}
.align-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.w-100{width:100%}
.rounded{border-radius:var(--radius)}

/* ============ PAGINATION ============ */
.pagination{display:flex;gap:.4rem;justify-content:center;list-style:none;margin:2rem 0;flex-wrap:wrap}
.pagination .page-link{
    padding:.6rem 1rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--text);
    text-decoration:none;font-weight:500;font-size:.92rem;
    transition:all .25s var(--ease);
    display:inline-block;
}
.pagination .page-link:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px)}
.pagination .page-item.active .page-link{background:var(--grad);color:#fff;border-color:transparent}
.pagination .page-item.disabled .page-link{opacity:.4;pointer-events:none}

/* ============ AOS-LIKE ANIMATIONS (own implementation) ============ */
[data-anim]{opacity:0;transform:translateY(40px);transition:all .8s var(--ease)}
[data-anim].in-view{opacity:1;transform:translateY(0)}
[data-anim="fade-left"]{transform:translateX(-40px)}
[data-anim="fade-left"].in-view{transform:translateX(0)}
[data-anim="fade-right"]{transform:translateX(40px)}
[data-anim="fade-right"].in-view{transform:translateX(0)}
[data-anim="zoom"]{transform:scale(.9)}
[data-anim="zoom"].in-view{transform:scale(1)}
[data-delay="100"]{transition-delay:.1s}
[data-delay="200"]{transition-delay:.2s}
[data-delay="300"]{transition-delay:.3s}
[data-delay="400"]{transition-delay:.4s}

/* ============ LOADER ============ */
.page-loader{
    position:fixed;inset:0;z-index:99999;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .6s ease,visibility .6s;
}
.page-loader.hidden{opacity:0;visibility:hidden}
.loader-spinner{
    width:50px;height:50px;border-radius:50%;
    border:3px solid var(--border);
    border-top-color:var(--primary);
    animation:spin 1s linear infinite;
}
@keyframes spin{100%{transform:rotate(360deg)}}

/* ============ RESPONSIVE ============ */
@media(max-width:768px){
    .hero{min-height:auto;padding:60px 0}
    .hero-stats{gap:.75rem}
    .hero-stat{padding:1rem .75rem}
    .hero-stat strong{font-size:1.5rem}
    .fab{width:52px;height:52px;font-size:1.3rem}
    .fab-stack{right:16px;bottom:16px;gap:8px}
    .scroll-top{left:16px;bottom:16px;width:42px;height:42px}
    .float-card{padding:.75rem 1rem;font-size:.85rem}
    .float-card .ic{width:34px;height:34px;font-size:1rem}
    .cta-banner{padding:2.5rem 1.5rem;border-radius:24px}
}

/* ============================================================
   GALLERY — Facebook style + Premium
   ============================================================ */
.gallery-section{background:var(--bg);position:relative}
.gallery-filters{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:3rem}
.gallery-filter{
    padding:.6rem 1.25rem;border-radius:50px;
    background:var(--surface);border:1px solid var(--border);
    color:var(--text-2);font-weight:600;font-size:.88rem;
    cursor:pointer;transition:all .3s var(--ease);
    text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
}
.gallery-filter:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.gallery-filter.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(124,58,237,.3)}
.gallery-filter .count{background:rgba(0,0,0,.1);padding:.15rem .5rem;border-radius:50px;font-size:.7rem}
.gallery-filter.active .count{background:rgba(255,255,255,.25)}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:1.25rem;
}
.gallery-grid.masonry{
    grid-auto-rows:240px;
    grid-auto-flow:dense;
}
.gallery-grid.masonry .gallery-card.tall{grid-row:span 2}
.gallery-grid.masonry .gallery-card.wide{grid-column:span 2}

.gallery-card{
    position:relative;border-radius:20px;overflow:hidden;
    background:var(--dark);
    cursor:pointer;transition:all .5s var(--ease);
    aspect-ratio:1/1;
}
.gallery-card.tall{aspect-ratio:1/2}
.gallery-card.wide{aspect-ratio:2/1}
.gallery-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 30px 60px -20px rgba(124,58,237,.4)}
.gallery-card img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .8s var(--ease);
    display:block;
}
.gallery-card:hover img{transform:scale(1.1)}
.gallery-card .overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 30%,rgba(10,10,15,.85) 100%);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:1.5rem;
    opacity:0;transition:opacity .4s var(--ease);
    color:#fff;
}
.gallery-card:hover .overlay{opacity:1}
.gallery-card .overlay .cat-tag{
    align-self:flex-start;
    padding:.3rem .75rem;
    background:rgba(255,255,255,.95);color:var(--text);
    border-radius:50px;font-size:.72rem;font-weight:700;
    margin-bottom:.75rem;backdrop-filter:blur(10px);
    text-transform:uppercase;letter-spacing:.05em;
}
.gallery-card .overlay h4{color:#fff;font-size:1.05rem;margin-bottom:.4rem;line-height:1.3}
.gallery-card .overlay .meta{display:flex;gap:1rem;font-size:.78rem;color:rgba(255,255,255,.85)}
.gallery-card .overlay .meta span{display:inline-flex;align-items:center;gap:.3rem}

.gallery-card .badge-featured{
    position:absolute;top:1rem;right:1rem;z-index:2;
    padding:.35rem .7rem;border-radius:50px;
    background:linear-gradient(135deg,#FCD34D,#F59E0B);
    color:#fff;font-size:.7rem;font-weight:700;
    box-shadow:0 8px 16px rgba(245,158,11,.4);
    display:inline-flex;align-items:center;gap:.3rem;
    backdrop-filter:blur(10px);
}

/* Gallery Detail / Single */
.gallery-detail{padding:4rem 0;background:var(--bg)}
.gallery-detail-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:start}
@media(max-width:992px){.gallery-detail-wrap{grid-template-columns:1fr}}
.gallery-main-image{
    border-radius:24px;overflow:hidden;
    background:var(--dark);
    box-shadow:var(--shadow-lg);
    position:sticky;top:100px;
}
.gallery-main-image img{width:100%;height:auto;display:block}
.gallery-info-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:24px;padding:2rem;
}
.gallery-info-card .cat-badge{
    display:inline-block;padding:.4rem 1rem;
    background:var(--grad);color:#fff;
    border-radius:50px;font-size:.8rem;font-weight:600;
    margin-bottom:1rem;
}
.gallery-info-card h1{font-size:2rem;line-height:1.2;margin-bottom:1rem}
.gallery-info-card .meta-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:1rem;
    margin:1.5rem 0;padding:1.5rem;
    background:var(--bg);border-radius:16px;
}
.gallery-info-card .meta-grid div small{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:.25rem}
.gallery-info-card .meta-grid div strong{color:var(--text);font-size:.95rem}
.gallery-actions{display:flex;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap}
.like-btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.7rem 1.25rem;
    background:rgba(236,72,153,.1);color:var(--secondary);
    border:2px solid rgba(236,72,153,.3);
    border-radius:50px;font-weight:600;font-size:.92rem;
    cursor:pointer;transition:all .25s var(--ease);
}
.like-btn:hover,.like-btn.liked{background:var(--secondary);color:#fff;border-color:var(--secondary);transform:scale(1.05)}
.gallery-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.5rem}
.gallery-tag{
    padding:.3rem .75rem;background:var(--bg);
    border:1px solid var(--border);border-radius:8px;
    font-size:.78rem;color:var(--text-2);
}

/* ============================================================
   TESTIMONIAL FORM
   ============================================================ */
.rating-input{display:inline-flex;gap:.3rem;direction:rtl;margin:.5rem 0}
.rating-input input{display:none}
.rating-input label{
    cursor:pointer;font-size:1.8rem;color:var(--border);
    transition:all .2s var(--ease);
}
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label{
    color:var(--gold);
    transform:scale(1.15);
    filter:drop-shadow(0 0 8px rgba(252,211,77,.6));
}

/* Testimonial cards - Premium */
.testimonial-card-pro{
    background:var(--surface);border:1px solid var(--border);
    border-radius:24px;padding:2.5rem 2rem;
    position:relative;transition:all .4s var(--ease);
    overflow:hidden;
}
.testimonial-card-pro::before{
    content:'';position:absolute;top:-40px;right:-40px;
    width:160px;height:160px;border-radius:50%;
    background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(236,72,153,.08));
    transition:transform .6s var(--ease);
}
.testimonial-card-pro:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.testimonial-card-pro:hover::before{transform:scale(1.5)}
.testimonial-card-pro .quote-mark{
    position:relative;display:inline-block;
    font-family:Georgia,serif;font-size:5rem;
    line-height:.5;color:var(--primary);
    background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:.5rem;font-weight:900;
}
.testimonial-card-pro .stars-row{color:var(--gold);font-size:1.1rem;letter-spacing:.15em;margin-bottom:1rem;position:relative}
.testimonial-card-pro p{font-size:1.05rem;line-height:1.75;color:var(--text);position:relative;margin-bottom:1.5rem;font-weight:400}
.testimonial-card-pro .author-row{
    display:flex;align-items:center;gap:1rem;
    padding-top:1.25rem;border-top:1px dashed var(--border);position:relative;
}
.testimonial-card-pro .author-avatar{
    width:54px;height:54px;border-radius:50%;
    background:var(--grad);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:800;font-size:1.3rem;flex-shrink:0;
    box-shadow:0 10px 20px rgba(124,58,237,.3);
}
.testimonial-card-pro .author-info h6{margin:0;color:var(--text);font-size:1rem;font-weight:700}
.testimonial-card-pro .author-info span{color:var(--muted);font-size:.85rem;display:block;margin-top:.15rem}
.testimonial-card-pro .verified{
    display:inline-flex;align-items:center;gap:.25rem;
    color:#10B981;font-size:.78rem;font-weight:600;margin-top:.3rem;
}

/* Aggregate rating display */
.rating-summary{
    text-align:center;padding:3rem;
    background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(236,72,153,.05));
    border-radius:24px;margin-bottom:3rem;
    border:1px solid var(--border);
}
.rating-summary .big-rating{
    font-size:5rem;font-weight:900;line-height:1;
    background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:.5rem;font-family:'Cal Sans','Inter',sans-serif;
}
.rating-summary .stars-big{color:var(--gold);font-size:1.6rem;letter-spacing:.2em;margin-bottom:1rem}
.rating-summary .count{color:var(--muted);font-size:1.05rem}

/* ============================================================
   HERO WITH REAL IMAGE
   ============================================================ */
.hero-with-image .hero-visual{position:relative}
.hero-image-wrap{
    position:relative;border-radius:32px;overflow:hidden;
    box-shadow:0 50px 100px -20px rgba(0,0,0,.5),0 30px 60px -30px rgba(124,58,237,.5);
    aspect-ratio:4/5;
    background:#000;
}
.hero-image-wrap img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .8s var(--ease);
}
.hero-image-wrap:hover img{transform:scale(1.04)}
.hero-image-wrap::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 50%,rgba(10,10,15,.4) 100%);
    pointer-events:none;
}
.hero-image-overlay{
    position:absolute;bottom:1.5rem;left:1.5rem;right:1.5rem;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:18px;padding:1.25rem;
    color:#fff;z-index:2;
}
.hero-image-overlay strong{display:block;font-size:.95rem;margin-bottom:.3rem}
.hero-image-overlay small{color:rgba(255,255,255,.75);font-size:.8rem}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
    position:fixed;inset:0;z-index:99999;
    background:rgba(10,10,15,.95);
    backdrop-filter:blur(20px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease);
    padding:2rem;
}
.lightbox.show{opacity:1;pointer-events:auto}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:16px;box-shadow:0 50px 100px rgba(0,0,0,.5)}
.lightbox-close{
    position:absolute;top:2rem;right:2rem;
    width:48px;height:48px;border-radius:50%;
    background:rgba(255,255,255,.1);color:#fff;
    border:1px solid rgba(255,255,255,.2);
    font-size:1.5rem;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:all .25s;
}
.lightbox-close:hover{background:var(--secondary);transform:rotate(90deg)}

/* ============================================================
   IMAGE OPTIMIZATION
   ============================================================ */
.img-fit{object-fit:cover;width:100%;height:100%}
.lazy{opacity:0;transition:opacity .5s var(--ease)}
.lazy.loaded{opacity:1}


@keyframes heartBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.shake{animation:shake .5s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}


/* ============================================================
   BLOG MAGAZINE — Premium Design
   ============================================================ */

/* Featured Blog (Hero) */
.blog-hero{
    background:linear-gradient(135deg,#0A0A0F 0%,#1E1B4B 100%);
    color:#fff;padding:5rem 0 4rem;
    position:relative;overflow:hidden;
}
.blog-hero::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 20% 30%,rgba(124,58,237,.3) 0%,transparent 40%),
               radial-gradient(circle at 80% 70%,rgba(236,72,153,.3) 0%,transparent 40%);
    animation:meshMove 18s ease-in-out infinite alternate;
}
.blog-hero > .container{position:relative;z-index:1}
.blog-hero h1{color:#fff;margin-bottom:.75rem;font-size:clamp(2rem,4.5vw,3.5rem)}
.blog-hero p{color:rgba(255,255,255,.8);font-size:1.15rem;max-width:600px;margin:0 auto}

/* Blog Search */
.blog-search{
    max-width:560px;margin:2rem auto 0;
    display:flex;background:rgba(255,255,255,.1);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:50px;overflow:hidden;
}
.blog-search input{
    flex:1;background:transparent;border:none;color:#fff;
    padding:1rem 1.5rem;outline:none;font-size:.95rem;
}
.blog-search input::placeholder{color:rgba(255,255,255,.5)}
.blog-search button{
    background:var(--grad);color:#fff;border:none;
    padding:0 1.75rem;cursor:pointer;font-size:1rem;font-weight:600;
}

/* Featured Hero Card */
.featured-hero{
    display:grid;grid-template-columns:1.4fr 1fr;gap:0;
    border-radius:32px;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);
    box-shadow:0 30px 60px -20px rgba(124,58,237,.2);
    margin-bottom:2rem;
    transition:all .4s var(--ease);
    text-decoration:none;color:inherit;
}
.featured-hero:hover{transform:translateY(-6px);box-shadow:0 40px 80px -20px rgba(124,58,237,.3)}
.featured-hero-img{
    aspect-ratio:16/11;overflow:hidden;position:relative;
    background:var(--grad);
}
.featured-hero-img img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .8s var(--ease);
}
.featured-hero:hover .featured-hero-img img{transform:scale(1.05)}
.featured-hero-img .featured-badge{
    position:absolute;top:1.5rem;left:1.5rem;z-index:2;
    padding:.5rem 1rem;
    background:linear-gradient(135deg,#FCD34D,#F59E0B);
    color:#fff;font-weight:700;font-size:.78rem;
    border-radius:50px;letter-spacing:.05em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:.4rem;
    box-shadow:0 10px 20px rgba(245,158,11,.4);
}
.featured-hero-content{padding:3rem;display:flex;flex-direction:column;justify-content:center}
.featured-hero .cat-tag{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.4rem .9rem;border-radius:50px;font-size:.78rem;font-weight:700;
    margin-bottom:1.25rem;width:fit-content;
    text-transform:uppercase;letter-spacing:.05em;
}
.featured-hero h2{font-size:clamp(1.5rem,2.5vw,2.25rem);margin-bottom:.75rem;line-height:1.2}
.featured-hero .subtitle{color:var(--text-2);font-size:1.05rem;line-height:1.6;margin-bottom:1.5rem}
.featured-hero .meta-row{display:flex;gap:1.25rem;color:var(--muted);font-size:.85rem;margin-bottom:1rem}
.featured-hero .meta-row span{display:inline-flex;align-items:center;gap:.35rem}
.featured-hero .read-link{
    display:inline-flex;align-items:center;gap:.5rem;
    color:var(--primary);font-weight:700;font-size:.95rem;
    transition:gap .3s var(--ease);
}
.featured-hero:hover .read-link{gap:.85rem}

@media(max-width:992px){
    .featured-hero{grid-template-columns:1fr}
    .featured-hero-content{padding:2rem}
}

/* Featured Mini Cards (2 yan yana) */
.featured-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:3rem}
@media(max-width:768px){.featured-mini-grid{grid-template-columns:1fr}}
.featured-mini{
    display:flex;gap:1.25rem;
    background:var(--surface);border:1px solid var(--border);
    border-radius:20px;padding:1.25rem;
    text-decoration:none;color:inherit;
    transition:all .4s var(--ease);
}
.featured-mini:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.3)}
.featured-mini-img{
    flex-shrink:0;width:140px;height:140px;
    border-radius:14px;overflow:hidden;
    background:var(--grad);
}
.featured-mini-img img{width:100%;height:100%;object-fit:cover}
.featured-mini-content{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.featured-mini .cat-tag-sm{font-size:.7rem;padding:.25rem .65rem;border-radius:50px;display:inline-block;margin-bottom:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;width:fit-content}
.featured-mini h3{font-size:1.1rem;line-height:1.3;margin-bottom:.5rem}
.featured-mini h3 a{color:var(--text)}
.featured-mini .meta{display:flex;gap:.85rem;color:var(--muted);font-size:.78rem;margin-top:auto}

/* Blog Layout (List + Sidebar) */
.blog-layout{
    display:grid;grid-template-columns:1fr 320px;gap:3rem;
    margin-top:3rem;
}
@media(max-width:1024px){.blog-layout{grid-template-columns:1fr}}

/* Blog Article Card (Magazine) */
.blog-article-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:20px;overflow:hidden;
    transition:all .4s var(--ease);
    display:flex;flex-direction:column;
    text-decoration:none;color:inherit;height:100%;
}
.blog-article-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.25)}
.blog-article-img{
    aspect-ratio:16/10;overflow:hidden;position:relative;
    background:var(--grad);
}
.blog-article-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.blog-article-card:hover .blog-article-img img{transform:scale(1.08)}
.blog-article-img .cat-badge-floating{
    position:absolute;bottom:1rem;left:1rem;z-index:2;
    padding:.35rem .8rem;
    background:rgba(255,255,255,.95);
    border-radius:50px;font-size:.7rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;
    backdrop-filter:blur(10px);
}
.blog-article-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.blog-article-body h3{font-size:1.2rem;line-height:1.35;margin-bottom:.6rem;color:var(--text)}
.blog-article-body p{color:var(--text-2);font-size:.92rem;line-height:1.6;margin-bottom:1rem;flex:1}
.blog-article-meta{
    display:flex;gap:.85rem;align-items:center;
    color:var(--muted);font-size:.8rem;
    padding-top:1rem;border-top:1px dashed var(--border);
}
.blog-article-meta span{display:inline-flex;align-items:center;gap:.3rem}

/* Sidebar Widgets */
.blog-sidebar{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:100px;align-self:start}
@media(max-width:1024px){.blog-sidebar{position:static}}

.widget{
    background:var(--surface);border:1px solid var(--border);
    border-radius:20px;padding:1.5rem;
}
.widget-title{
    font-size:1.05rem;font-weight:700;margin-bottom:1.25rem;
    padding-bottom:.75rem;border-bottom:2px solid var(--border);
    position:relative;display:flex;align-items:center;gap:.5rem;
}
.widget-title::after{content:'';position:absolute;left:0;bottom:-2px;width:40px;height:2px;background:var(--grad)}

/* Categories widget */
.cat-list{list-style:none;padding:0;margin:0}
.cat-list li a{
    display:flex;justify-content:space-between;align-items:center;
    padding:.7rem 0;color:var(--text-2);font-weight:500;font-size:.92rem;
    border-bottom:1px dashed var(--border);transition:all .25s var(--ease);
}
.cat-list li:last-child a{border-bottom:none}
.cat-list li a:hover{color:var(--primary);padding-left:.5rem}
.cat-list li a.active{color:var(--primary);font-weight:700}
.cat-list .count{
    background:var(--bg-2);padding:.2rem .55rem;border-radius:50px;
    font-size:.72rem;font-weight:600;color:var(--text-2);
}
.cat-list li a:hover .count,.cat-list li a.active .count{background:var(--grad);color:#fff}

/* Popular posts widget */
.popular-list{display:flex;flex-direction:column;gap:1rem}
.popular-item{display:flex;gap:.85rem;text-decoration:none;color:inherit;transition:.25s var(--ease)}
.popular-item:hover{transform:translateX(4px)}
.popular-num{
    flex-shrink:0;width:32px;height:32px;border-radius:50%;
    background:var(--grad);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:800;font-size:.9rem;
}
.popular-content h6{font-size:.88rem;line-height:1.35;margin:0 0 .3rem;color:var(--text);font-weight:600}
.popular-content .meta{color:var(--muted);font-size:.75rem}

/* Tags cloud */
.tags-cloud{display:flex;gap:.5rem;flex-wrap:wrap}
.tag-link{
    padding:.35rem .75rem;background:var(--bg-2);
    border-radius:8px;font-size:.78rem;color:var(--text-2);
    text-decoration:none;transition:.25s var(--ease);
    border:1px solid transparent;
}
.tag-link:hover,.tag-link.active{background:var(--grad);color:#fff}

/* Newsletter widget */
.widget-newsletter{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;text-align:center;position:relative;overflow:hidden;
}
.widget-newsletter::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at top right,rgba(255,255,255,.2),transparent 60%);
}
.widget-newsletter > *{position:relative;z-index:1}
.widget-newsletter .widget-title{color:#fff;border-color:rgba(255,255,255,.2)}
.widget-newsletter .widget-title::after{background:rgba(255,255,255,.6)}
.widget-newsletter p{color:rgba(255,255,255,.9);font-size:.9rem;margin-bottom:1.25rem}
.widget-newsletter input{
    width:100%;padding:.75rem 1rem;border-radius:10px;border:none;
    background:rgba(255,255,255,.15);color:#fff;
    margin-bottom:.75rem;font-size:.9rem;outline:none;
}
.widget-newsletter input::placeholder{color:rgba(255,255,255,.6)}
.widget-newsletter button{
    width:100%;padding:.75rem;background:#fff;color:var(--primary);
    border:none;border-radius:10px;font-weight:700;cursor:pointer;
    transition:transform .25s;
}
.widget-newsletter button:hover{transform:translateY(-2px)}

/* ============================================================
   BLOG SINGLE — Premium Article
   ============================================================ */
.reading-progress{
    position:fixed;top:0;left:0;right:0;height:4px;
    background:rgba(0,0,0,.05);z-index:1001;
}
.reading-progress-bar{
    height:100%;width:0;background:var(--grad);
    transition:width .15s linear;
    box-shadow:0 0 10px rgba(124,58,237,.5);
}

.article-hero{
    padding:5rem 0 2rem;background:var(--bg);
    position:relative;
}
.article-hero .article-meta-top{
    display:flex;align-items:center;gap:1rem;
    margin-bottom:1.5rem;flex-wrap:wrap;
}
.article-cat-pill{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.5rem 1rem;border-radius:50px;
    font-weight:700;font-size:.78rem;
    text-transform:uppercase;letter-spacing:.05em;
}
.article-hero h1{
    font-size:clamp(2rem,4.5vw,3.5rem);
    line-height:1.15;letter-spacing:-.03em;
    max-width:900px;margin:0 0 1.25rem;
}
.article-subtitle{
    font-size:1.2rem;color:var(--text-2);line-height:1.5;
    max-width:800px;margin-bottom:2rem;
}
.author-section{
    display:flex;align-items:center;gap:1rem;
    padding:1rem 0;margin-bottom:1.5rem;
}
.author-avatar-big{
    width:54px;height:54px;border-radius:50%;
    background:var(--grad);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:800;font-size:1.4rem;
    box-shadow:0 10px 20px rgba(124,58,237,.3);
}
.author-avatar-big img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.author-section .info h6{margin:0;font-size:1rem;color:var(--text);font-weight:700}
.author-section .info .meta{color:var(--muted);font-size:.85rem;display:flex;gap:.85rem;margin-top:.15rem}
.author-section .info .meta span{display:inline-flex;align-items:center;gap:.3rem}

.article-feature-img{
    width:100%;border-radius:24px;overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.2);
    margin-bottom:3rem;
    aspect-ratio:16/9;background:var(--grad);
}
.article-feature-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Article Content Wrapper */
.article-wrapper{display:grid;grid-template-columns:240px 1fr 280px;gap:3rem;align-items:start}
@media(max-width:1200px){.article-wrapper{grid-template-columns:1fr 280px}.article-toc-side{display:none}}
@media(max-width:992px){.article-wrapper{grid-template-columns:1fr}.article-share-side{display:none}}

/* TOC Sidebar */
.article-toc-side{position:sticky;top:120px;align-self:start}
.toc-container{
    background:var(--surface);border:1px solid var(--border);
    border-radius:16px;padding:1.25rem;
}
.toc-title{
    font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
    color:var(--muted);font-weight:700;margin-bottom:.75rem;
}
.toc-list{list-style:none;padding:0;margin:0}
.toc-list li{margin-bottom:.5rem}
.toc-list a{
    display:block;color:var(--text-2);font-size:.85rem;
    padding:.4rem .6rem;border-radius:8px;line-height:1.4;
    transition:all .25s var(--ease);
    border-left:2px solid transparent;
    text-decoration:none;
}
.toc-list a:hover,.toc-list a.active{
    color:var(--primary);background:rgba(124,58,237,.05);
    border-left-color:var(--primary);
}

/* Share Sidebar */
.article-share-side{position:sticky;top:120px;align-self:start}
.share-vertical{
    background:var(--surface);border:1px solid var(--border);
    border-radius:16px;padding:1rem;
    display:flex;flex-direction:column;gap:.5rem;align-items:center;
}
.share-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;writing-mode:vertical-rl;text-orientation:mixed;margin:.5rem 0}
.share-btn{
    width:44px;height:44px;border-radius:12px;
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.1rem;text-decoration:none;
    transition:all .3s var(--ease);
}
.share-btn:hover{transform:translateY(-3px) scale(1.1);color:#fff}
.share-btn.fb{background:#1877F2}
.share-btn.tw{background:#000}
.share-btn.wa{background:#25D366}
.share-btn.li{background:#0A66C2}
.share-btn.tl{background:#0088CC}
.share-btn.cp{background:var(--text-2)}

/* Article Body — Premium typography */
.article-body{
    font-family:'Inter','Plus Jakarta Sans',serif;
    font-size:1.075rem;line-height:1.85;color:var(--text);
    max-width:760px;
}
.article-body p{margin-bottom:1.4rem;color:var(--text-2)}
.article-body p.lead{font-size:1.25rem;line-height:1.65;color:var(--text);font-weight:500;margin-bottom:2rem;letter-spacing:-.01em}
.article-body h2{
    font-size:1.85rem;margin:3rem 0 1.25rem;color:var(--text);
    line-height:1.2;font-weight:800;letter-spacing:-.02em;
    scroll-margin-top:100px;
}
.article-body h2::before{
    content:'';display:inline-block;width:6px;height:1.5rem;
    background:var(--grad);border-radius:3px;margin-right:.85rem;
    vertical-align:-.15em;
}
.article-body h3{
    font-size:1.4rem;margin:2rem 0 .85rem;color:var(--text);
    font-weight:700;scroll-margin-top:100px;
}
.article-body strong{color:var(--text);font-weight:700;background:linear-gradient(180deg,transparent 65%,rgba(252,211,77,.4) 65%);padding:0 2px}
.article-body em{color:var(--primary);font-style:italic}
.article-body a{color:var(--primary);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}
.article-body a:hover{color:var(--secondary)}
.article-body ul,.article-body ol{margin:1.25rem 0 1.5rem;padding-left:1.5rem;color:var(--text-2)}
.article-body li{margin-bottom:.6rem;line-height:1.7}
.article-body li::marker{color:var(--primary);font-weight:700}
.article-body blockquote{
    margin:2rem 0;padding:1.5rem 1.75rem;
    background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(236,72,153,.04));
    border-left:4px solid var(--primary);
    border-radius:0 16px 16px 0;
    font-size:1.1rem;line-height:1.6;color:var(--text);font-style:italic;
    position:relative;
}
.article-body blockquote::before{
    content:'\201C';position:absolute;top:-.5rem;left:1rem;
    font-size:4rem;color:var(--primary);opacity:.3;line-height:1;
    font-family:Georgia,serif;
}
.article-body img{border-radius:16px;margin:1.5rem 0;width:100%;height:auto;box-shadow:var(--shadow-lg)}
.article-body table{
    width:100%;border-collapse:collapse;margin:2rem 0;
    background:var(--surface);border-radius:14px;overflow:hidden;
    border:1px solid var(--border);font-size:.95rem;
}
.article-body table th{
    background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(236,72,153,.05));
    padding:.85rem 1rem;text-align:left;font-weight:700;color:var(--text);
    border-bottom:2px solid var(--border);
}
.article-body table td{padding:.75rem 1rem;border-bottom:1px solid var(--border);color:var(--text-2)}
.article-body table tr:last-child td{border-bottom:none}
.article-body table tr:hover td{background:var(--bg-2)}
.article-body hr{
    margin:3rem 0;border:none;height:1px;
    background:linear-gradient(90deg,transparent,var(--border) 20%,var(--border) 80%,transparent);
}

/* Article Tags */
.article-tags{
    display:flex;flex-wrap:wrap;gap:.5rem;
    margin:2.5rem 0;padding-top:2rem;
    border-top:1px solid var(--border);
}
.article-tags .tag-link{font-size:.82rem;padding:.45rem 1rem}

/* Author Card */
.author-card{
    background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(236,72,153,.04));
    border:1px solid var(--border);
    border-radius:24px;padding:2rem;
    display:flex;gap:1.5rem;align-items:center;
    margin:3rem 0;
}
@media(max-width:600px){.author-card{flex-direction:column;text-align:center}}
.author-card-img{
    flex-shrink:0;width:90px;height:90px;border-radius:50%;
    background:var(--grad);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:800;font-size:2.2rem;
    box-shadow:0 15px 30px rgba(124,58,237,.3);
    overflow:hidden;
}
.author-card-img img{width:100%;height:100%;object-fit:cover}
.author-card-info h5{margin:0 0 .4rem;font-size:1.15rem}
.author-card-info p{color:var(--text-2);font-size:.92rem;margin:0 0 .75rem}
.author-social{display:flex;gap:.5rem}
.author-social a{
    width:36px;height:36px;border-radius:50%;background:var(--surface);
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--text-2);transition:.25s var(--ease);
}
.author-social a:hover{background:var(--grad);color:#fff;transform:translateY(-3px)}

/* Prev/Next Navigation */
.article-nav{
    display:grid;grid-template-columns:1fr 1fr;gap:1rem;
    margin:3rem 0;
}
@media(max-width:768px){.article-nav{grid-template-columns:1fr}}
.article-nav-link{
    background:var(--surface);border:1px solid var(--border);
    border-radius:16px;padding:1.25rem;
    text-decoration:none;color:inherit;
    transition:all .3s var(--ease);
    display:flex;flex-direction:column;gap:.4rem;
}
.article-nav-link:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow)}
.article-nav-link.next{text-align:right;align-items:flex-end}
.article-nav-link .label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;display:inline-flex;align-items:center;gap:.4rem}
.article-nav-link h6{margin:0;font-size:1rem;color:var(--text);font-weight:700;line-height:1.4}

/* Comments Section */
.comments-section{margin-top:4rem;padding-top:3rem;border-top:1px solid var(--border)}
.comments-header{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem}
.comments-header h3{margin:0;font-size:1.5rem}
.comments-header .count{
    padding:.25rem .75rem;background:var(--grad);color:#fff;
    border-radius:50px;font-size:.78rem;font-weight:700;
}

.comment-item{
    display:flex;gap:1rem;padding:1.5rem 0;
    border-bottom:1px solid var(--border);
}
.comment-item:last-child{border-bottom:none}
.comment-avatar{
    flex-shrink:0;width:44px;height:44px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:1.1rem;
}
.comment-content{flex:1}
.comment-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.4rem;flex-wrap:wrap}
.comment-author{font-weight:700;color:var(--text);font-size:.95rem}
.comment-date{color:var(--muted);font-size:.8rem}
.comment-text{color:var(--text-2);line-height:1.65;margin:0}
.comment-reply{background:none;border:none;color:var(--primary);font-weight:600;font-size:.82rem;cursor:pointer;padding:0;margin-top:.5rem;display:inline-flex;align-items:center;gap:.3rem}
.comment-reply:hover{color:var(--secondary)}

.comment-replies{margin-left:3.5rem;margin-top:1rem;padding-left:1rem;border-left:2px solid var(--border)}

/* Comment Form */
.comment-form{
    background:var(--surface);border:1px solid var(--border);
    border-radius:20px;padding:2rem;margin-bottom:2.5rem;
}
.comment-form h4{margin:0 0 1rem;font-size:1.25rem}

/* Related Posts */
.related-section{
    background:var(--bg-2);padding:4rem 0;margin-top:4rem;
}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
@media(max-width:900px){.related-grid{grid-template-columns:1fr}}

/* No Results */
.no-results{
    text-align:center;padding:5rem 2rem;
    background:var(--surface);border-radius:24px;
}
.no-results i{font-size:4rem;color:var(--muted);margin-bottom:1rem;display:block}
.no-results h3{margin-bottom:.5rem}
.no-results p{color:var(--text-2);margin-bottom:1.5rem}

/* Filter Bar */
.filter-bar{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    margin-bottom:2rem;padding:1.25rem;
    background:var(--surface);border:1px solid var(--border);
    border-radius:16px;flex-wrap:wrap;
}
.filter-info{font-size:.92rem;color:var(--text-2)}
.filter-info strong{color:var(--text)}
.filter-clear{
    padding:.4rem 1rem;background:rgba(239,68,68,.1);color:#DC2626;
    border-radius:50px;font-size:.82rem;font-weight:600;
    text-decoration:none;transition:.25s;
}
.filter-clear:hover{background:#DC2626;color:#fff}