/* ======================================================
   KEBIJAKAN PRIVASI
   PT Lentera Abadi Solusinet
   PART 1 - GLOBAL, HERO & ALERT
====================================================== */

/* ===========================
   ROOT
=========================== */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#dbeafe;

    --secondary:#0f172a;

    --bg:#f8fafc;

    --white:#ffffff;

    --text:#334155;

    --text-light:#64748b;

    --border:#e2e8f0;

    --radius:20px;

    --shadow-sm:0 10px 25px rgba(15,23,42,.05);

    --shadow-md:0 18px 45px rgba(15,23,42,.08);

    --shadow-lg:0 28px 70px rgba(15,23,42,.12);

}

/* ===========================
   RESET
=========================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    line-height:1.8;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

.privacy-policy{

    overflow:hidden;

}

/* ===========================
   CONTAINER
=========================== */

.container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 24px;

}

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

section{

    position:relative;

}

section + section{

    margin-top:70px;

}

h1,h2,h3{

    color:var(--secondary);

    line-height:1.3;

}

p{

    color:var(--text);

}

/* ======================================================
   HERO
====================================================== */

.privacy-hero{

    background:
    linear-gradient(
        135deg,
        #08142f 0%,
        #163c91 55%,
        #2563eb 100%
    );

    color:#fff;

    padding:90px 0 140px;

    text-align:center;

    overflow:hidden;

    position:relative;

}

/* Decorative circles */

.privacy-hero::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    right:-140px;

    top:-180px;

}

.privacy-hero::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(125,211,252,.08);

    left:-120px;

    bottom:-140px;

}

/* ===========================
   BADGE
=========================== */

.privacy-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(14px);

    color:#fff;

    font-size:.92rem;

    font-weight:600;

    margin-bottom:26px;

}

/* ===========================
   HERO TITLE
=========================== */

.privacy-hero h1{

    color:#fff;

    font-size:clamp(2.6rem,5vw,3.8rem);

    font-weight:800;

    margin-bottom:24px;

}

.privacy-hero h1 span{

    color:#7dd3fc;

}

/* ===========================
   HERO DESCRIPTION
=========================== */

.privacy-hero p{

    max-width:760px;

    margin:0 auto;

    color:rgba(255,255,255,.92);

    font-size:1.08rem;

    line-height:1.9;

}

/* ===========================
   LAST UPDATED
=========================== */

.last-updated{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:36px;

    padding:14px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    color:#fff;

    font-weight:500;

}

.last-updated i{

    color:#7dd3fc;

}

/* ======================================================
   ALERT
====================================================== */

.privacy-alert{

    margin-top:-70px;

}

.alert-box{

    background:#fff;

    border-radius:26px;

    padding:36px 40px;

    display:flex;

    align-items:flex-start;

    gap:22px;

    box-shadow:var(--shadow-md);

    border:1px solid rgba(37,99,235,.08);

}

/* ===========================
   ALERT ICON
=========================== */

.alert-box i{

    width:64px;

    height:64px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#eff6ff;

    color:#2563eb;

    font-size:28px;

}

/* ===========================
   ALERT TEXT
=========================== */

.alert-box h3{

    font-size:1.45rem;

    margin-bottom:10px;

    color:var(--secondary);

}

.alert-box p{

    color:var(--text-light);

    line-height:1.9;

}

/* ======================================================
   PART 2
   TABLE OF CONTENTS
====================================================== */

.privacy-toc{

    padding:30px 0 10px;

}

.privacy-toc h2{

    text-align:center;

    font-size:2.2rem;

    font-weight:800;

    margin-bottom:12px;

}

.privacy-toc>.container>p{

    text-align:center;

    color:var(--text-light);

    max-width:720px;

    margin:0 auto 50px;

}

/* ===========================
   GRID
=========================== */

.privacy-toc ul{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

}

/* ===========================
   CARD
=========================== */

.privacy-toc li a{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    min-height:170px;

    padding:24px;

    background:#fff;

    border-radius:22px;

    border:1px solid var(--border);

    position:relative;

    overflow:hidden;

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

/* garis kiri */

.privacy-toc li a::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--primary);

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

/* hover */

.privacy-toc li a:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:var(--shadow-md);

}

.privacy-toc li a:hover::before{

    transform:scaleY(1);

}

/* ===========================
   NUMBER
=========================== */

.toc-number{

    font-size:2.8rem;

    font-weight:900;

    color:var(--primary);

    opacity:.15;

    line-height:1;

    margin-bottom:16px;

}

/* ===========================
   TITLE
=========================== */

.privacy-toc h3{

    font-size:1.1rem;

    margin:0;

    color:var(--secondary);

    font-weight:700;

}

/* ===========================
   DESCRIPTION
=========================== */

.privacy-toc li p{

    margin-top:8px;

    margin-bottom:0;

    color:var(--text-light);

    text-align:left;

    font-size:.92rem;

    line-height:1.6;

}

/* ======================================================
   SECTION
====================================================== */

.privacy-section{

    padding:15px 0;

}

.section-card{

    background:#fff;

    border-radius:24px;

    padding:50px;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:var(--shadow-sm);

    position:relative;

    overflow:hidden;

    transition:
        transform .35s,
        box-shadow .35s,
        opacity .8s;

    opacity:0;

    transform:translateY(35px);

}

/* garis kiri */

.section-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:linear-gradient(
        to bottom,
        #2563eb,
        #38bdf8
    );

}

/* hover */

.section-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-lg);

}

/* ===========================
   TITLE
=========================== */

.section-card h2{

    font-size:2rem;

    font-weight:800;

    color:var(--secondary);

    margin-bottom:26px;

}

.section-card h2::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    border-radius:20px;

    background:var(--primary);

    margin-top:14px;

}

/* ===========================
   PARAGRAPH
=========================== */

.section-card p{

    font-size:1rem;

    color:var(--text);

    line-height:1.95;

    margin-bottom:18px;

}

/* ===========================
   LIST
=========================== */

.section-card ul{

    margin-top:24px;

    padding:0;

}

.section-card li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:16px;

    color:var(--text);

    line-height:1.8;

}

/* checklist */

.section-card li::before{

    content:"✓";

    width:28px;

    height:28px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#dbeafe;

    color:var(--primary);

    font-size:.8rem;

    font-weight:700;

}

/* ===========================
   ANIMATION
=========================== */

.section-card.visible{

    opacity:1;

    transform:none;

}

/* ======================================================
   PART 3
   CONTACT CTA
====================================================== */

.privacy-contact{

    padding:90px 0 100px;

}

.privacy-contact-card{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1d4ed8
    );

    border-radius:30px;

    padding:70px 60px;

    text-align:center;

    color:#fff;

    box-shadow:var(--shadow-lg);

}

/* decorative circle */

.privacy-contact-card::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    right:-120px;

    top:-120px;

}

.privacy-contact-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(125,211,252,.08);

    left:-60px;

    bottom:-60px;

}

/* ===========================
   BADGE
=========================== */

.contact-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.5px;

}

/* ===========================
   TITLE
=========================== */

.privacy-contact-card h2{

    color:#fff;

    margin-top:26px;

    margin-bottom:20px;

    font-size:clamp(2rem,4vw,3rem);

    font-weight:800;

}

/* ===========================
   DESCRIPTION
=========================== */

.privacy-contact-card p{

    max-width:720px;

    margin:0 auto;

    color:rgba(255,255,255,.92);

    line-height:1.9;

}

/* ===========================
   CONTACT INFO
=========================== */

.privacy-contact-info{

    margin:45px 0;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 24px;

    border-radius:16px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-weight:600;

}

.contact-item i{

    color:#84cc16;

    font-size:18px;

}

/* ======================================================
   BUTTON
====================================================== */

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:240px;

    height:58px;

    padding:0 36px;

    background:#84cc16;

    color:#fff;

    border-radius:16px;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 10px 25px rgba(132,204,22,.25);

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:#65a30d;

    box-shadow:
    0 18px 40px rgba(132,204,22,.35);

}

/* ======================================================
   READING PROGRESS
====================================================== */

.reading-progress{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:4px;

    z-index:99999;

}

.reading-progress-bar{

    width:0;

    height:100%;

    background:
    linear-gradient(
        90deg,
        #2563eb,
        #38bdf8
    );

}

/* ======================================================
   PART 4
   RESPONSIVE & FINISHING
====================================================== */

/* ===========================
   DESKTOP
=========================== */

@media (max-width:1200px){

    .container{

        max-width:1000px;

    }

    .privacy-toc ul{

        grid-template-columns:repeat(3,1fr);

    }

    .section-card{

        padding:42px;

    }

}

/* ===========================
   TABLET
=========================== */

@media (max-width:992px){

    section + section{

        margin-top:55px;

    }

    .privacy-hero{

        padding:80px 0 110px;

    }

    .privacy-hero h1{

        font-size:2.8rem;

    }

    .alert-box{

        flex-direction:column;

        text-align:left;

    }

    .privacy-toc ul{

        grid-template-columns:repeat(2,1fr);

    }

    .section-card{

        padding:38px;

    }

    .privacy-contact{

        padding:70px 0 80px;

    }

    .privacy-contact-card{

        padding:55px 40px;

    }

}

/* ===========================
   MOBILE
=========================== */

@media (max-width:768px){

    .container{

        padding:0 18px;

    }

    section + section{

        margin-top:45px;

    }

    .privacy-hero{

        padding:70px 0 95px;

    }

    .privacy-badge{

        font-size:.8rem;

    }

    .privacy-hero h1{

        font-size:2.2rem;

    }

    .privacy-hero p{

        font-size:1rem;

    }

    .last-updated{

        width:100%;

        justify-content:center;

        font-size:.9rem;

    }

    .alert-box{

        padding:28px;

    }

    .alert-box i{

        width:56px;

        height:56px;

        font-size:24px;

    }

    .privacy-toc h2{

        font-size:1.8rem;

    }

    .privacy-toc ul{

        grid-template-columns:1fr;

    }

    .privacy-toc li a{

        min-height:140px;

    }

    .toc-number{

        font-size:2.3rem;

    }

    .section-card{

        padding:30px 24px;

        border-radius:20px;

    }

    .section-card h2{

        font-size:1.6rem;

    }

    .section-card h2::after{

        width:55px;

    }

    .privacy-contact-card{

        padding:45px 28px;

        border-radius:24px;

    }

    .privacy-contact-card h2{

        font-size:2rem;

    }

    .privacy-contact-info{

        flex-direction:column;

    }

    .contact-item{

        width:100%;

        justify-content:center;

    }

    .btn-primary{

        width:100%;

    }

}

/* ===========================
   SMALL MOBILE
=========================== */

@media (max-width:480px){

    .privacy-hero h1{

        font-size:1.9rem;

    }

    .privacy-contact-card{

        padding:38px 22px;

    }

}

/* ======================================================
   INTERACTION
====================================================== */

.privacy-toc li a:focus-visible,
.btn-primary:focus-visible,
#backToTop:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:4px;

}

/* ======================================================
   SMOOTH ANIMATION
====================================================== */

.privacy-toc li a,
.section-card,
.contact-item,
.btn-primary,
#backToTop{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease;

}

/* ======================================================
   PRINT
====================================================== */

@media print{

    .reading-progress,
    #backToTop,
    .privacy-contact{

        display:none !important;

    }

    body{

        background:#fff;

    }

    .section-card{

        box-shadow:none;

        border:1px solid #ddd;

        break-inside:avoid;

    }

}