/*
Theme Name: Purple
Theme URI: https://kuronei.com/themes/purple/
Author: Kuronei
Version: 2.0.0
Text Domain: purple
*/

/* =========================================================
   GOOGLE FONTS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cinzel+Decorative:wght@400;700;900&family=Nunito+Sans:wght@400;500;600;700;800&display=swap');


/* =========================================================
   MAGICAL ANIMATION COLOR SYSTEM
========================================================= */

:root{

    /* Background */
    --bg:#FFFAF7;
    --surface:#FFF0EB;
    --surface-2:#FFFFFF;

    /* Text */
    --text:#2B1718;
    --muted:#80696A;

    /* Brand */
    --primary:#C62828;
    --primary-dark:#8F171F;
    --primary-light:#F06A61;

    /* Supporting colors */
    --blue:#A83232;
    --sky:#F18A75;
    --cyan:#D95D39;
    --purple:#9E2430;
    --gold:#F2C078;
    --coral:#F04438;
    --green:#6E9B65;

    /* UI */
    --border:#E8C9C3;
    --link:#A51F2B;

    --radius:14px;

    --shadow:
        0 8px 30px rgba(160,32,42,.10);

    --header:72px;
    --container:1290px;
    --transition:.25s ease;

    --lp-cotainer-padding:0px;

    --animate-rgb:198,40,40;
}


/* =========================================================
   DARK MODE
========================================================= */

:root[data-theme=dark]{
    /* Dark purple palette inspired by the supplied color palette */
    --bg:#171020;
    --surface:#21172D;
    --surface-2:#2D1D3D;

    --text:#F7F0FF;
    --muted:#C6B5D8;

    --primary:#B66AE8;
    --primary-dark:#7B35B2;
    --primary-light:#D6A2F5;

    --blue:#7957B8;
    --sky:#A98AE0;
    --cyan:#59C4D1;
    --purple:#C05AA8;

    --gold:#E8C46A;
    --coral:#E98AAB;
    --green:#73C69A;

    --border:#49345D;
    --link:#D6A2F5;

    --shadow:
        0 10px 35px rgba(0,0,0,.42);

    --animate-rgb:182,106,232;
}


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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{

    margin:0;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(182,106,232,.10),
            transparent 30%
        ),
        var(--bg);

    color:var(--text);

    font-family:
        "Nunito Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:16px;
    line-height:1.75;

    transition:
        background var(--transition),
        color var(--transition);

    text-rendering:optimizeLegibility;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.comments-title,
.comment-reply-title{

    font-family:
        "Cinzel Decorative",
        "Cinzel",
        Georgia,
        serif;

    font-weight:700;

    letter-spacing:.015em;

    line-height:1.25;
}

h1{
    font-size:clamp(2.4rem,5vw,4.5rem);
}

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

h3{
    font-size:clamp(1.5rem,3vw,2rem);
}


/* =========================================================
   BASIC ELEMENTS
========================================================= */

img{
    display:block;
    max-width:100%;
    height:auto;
}

svg{
    display:block;
}

a{
    color:var(--link);
    text-decoration:none;
    transition:
        color var(--transition),
        opacity var(--transition),
        transform var(--transition);
}

a:hover{
    color:var(--primary);
    opacity:.85;
}

ul{
    list-style:none;
}

button,
input,
textarea,
select{

    font:inherit;
    color:inherit;
    background:none;
    border:none;
    outline:none;
}

button{
    cursor:pointer;
}

pre{
    white-space:pre-wrap;
    word-wrap:break-word;
    overflow-wrap:break-word;
}


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

.container{
    width:min(
        var(--container),
        calc(100% - 2rem)
    );

    margin:auto;
}

.container-fluid{
    width:100%;
    padding-inline:1rem;
}

.flex{
    display:flex;
}

.grid{
    display:grid;
    gap:2rem;
}

.center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{

    position:sticky;
    top:0;
    z-index:999;

    background:
        color-mix(
            in srgb,
            var(--bg) 92%,
            transparent
        );

    backdrop-filter:blur(14px);

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

    padding:10px 0;

    transition:
        background var(--transition),
        border var(--transition);
}

.site-header .container{
    display:flex;
    align-items:center;
}

.site-branding{
    flex:0 0 auto;
}

.logo{

    font-family:
        "Cinzel Decorative",
        "Cinzel",
        Georgia,
        serif;

    font-size:1.35rem;

    font-weight:700;

    letter-spacing:.04em;

    color:var(--text);
}

.logo img{
    max-height:46px;
    width:auto;
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-nav{
    margin-left:auto;
}

.site-nav ul{
    display:flex;
    align-items:center;
    gap:2rem;
}

.site-nav li{
    position:relative;
}

.site-nav a{

    font-family:
        "Nunito Sans",
        sans-serif;

    font-weight:700;

    color:var(--text);

    position:relative;
}


/* magical underline */

.site-nav > ul > li > a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-7px;

    width:0;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--gold)
        );

    border-radius:10px;

    transform:translateX(-50%);

    transition:
        width .25s ease;
}

.site-nav > ul > li:hover > a::after{
    width:100%;
}


/* dropdown */

.site-nav li ul{

    position:absolute;

    left:0;
    top:calc(100% + 14px);

    display:none;

    min-width:220px;

    background:var(--surface);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:.5rem 0;

    flex-direction:column;

    gap:0;
}

.site-nav li:hover>ul{
    display:flex;
}

.site-nav li ul li{
    width:100%;
}

.site-nav li ul a{

    display:block;

    padding:.8rem 1rem;

    color:var(--text);
}

.site-nav li ul li:hover{

    background:
        linear-gradient(
            90deg,
            rgba(182,106,232,.14),
            rgba(192,90,168,.10)
        );
}


/* =========================================================
   MENU TOGGLE
========================================================= */

.menu-toggle{

    display:none;

    width:42px;
    height:42px;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--surface);

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

/* =========================================================
   MENU TOGGLE
========================================================= */

.single .container {
    margin-top: 20px;
}

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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:640px;

    overflow:hidden;
}

.hero img{

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.01);
}

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    color:#fff;

    background:

        linear-gradient(
            180deg,
            rgba(13,16,38,.05),
            rgba(13,16,38,.80)
        );
}

.hero-overlay .container{

    display:flex;

    flex-direction:column;

    align-items:flex-end;
}

.hero h1{

    max-width:720px;

    margin-bottom:1rem;

    color:#fff;

    text-shadow:
        0 3px 20px rgba(0,0,0,.45);
}

.hero p{

    max-width:640px;

    margin-bottom:2rem;

    font-size:
        clamp(1rem,2vw,1.35rem);

    color:#fff;

    opacity:.92;
}

.hero h1,
.hero p{
    text-align:right;
}

.hero a{

    display:inline-flex;

    padding:.9rem 1.5rem;

    color:#fff;

    font-weight:800;

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

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(198,40,40,.95),
            rgba(143,23,31,.90)
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,.25);
}

.hero a:hover{

    transform:translateY(-2px);

    color:#fff;

    opacity:1;
}


/* =========================================================
   POSTS
========================================================= */

.posts{

    padding:30px 0;

    display:grid;

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

    gap:2rem;
}

article{

    display:flex;

    flex-direction:column;

    background:var(--surface);

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

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

article:hover{

    transform:translateY(-5px);

    border-color:
        color-mix(
            in srgb,
            var(--primary) 45%,
            var(--border)
        );

    box-shadow:
        0 15px 40px
        rgba(112,58,150,.24);
}

.posts .post img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:
        transform .4s ease;
}

article:hover .post img{
    transform:scale(1.03);
}

.entry{
    padding:1.6rem;
}

.entry-title{

    font-size:1.55rem;

    line-height:1.3;

    margin-bottom:.8rem;

    font-weight:700;
}

.entry-title a{
    color:var(--text);
}

.entry-title a:hover{
    color:var(--primary);
}


/* =========================================================
   META
========================================================= */

.entry-meta{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

    font-size:.85rem;

    color:var(--muted);

    margin-bottom:1rem;
}


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

.entry-tags{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;

    margin-top:2rem;
}

.entry-tags a{

    padding:.45rem .8rem;

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

    border-radius:999px;

    font-size:.85rem;

    background:
        rgba(182,106,232,.08);
}

.entry-tags a:hover{

    color:#fff;

    background:var(--primary);

    border-color:var(--primary);
}


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

.entry-content>*+*{
    margin-top:1rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4{

    line-height:1.3;

    margin-top:2rem;

    color:var(--primary);
}

.entry-content p{
    margin-top:1rem;
}

.entry-content ul,
.entry-content ol{
    padding-left:1.25rem;
}

.entry-content ul{
    list-style:disc;
}

.entry-content ol{
    list-style:decimal;
}


/* =========================================================
   BLOCKQUOTE
========================================================= */

.entry-content blockquote{

    padding:1rem 1.5rem;

    border-left:
        4px solid var(--gold);

    background:
        linear-gradient(
            90deg,
            rgba(232,196,106,.12),
            rgba(182,106,232,.08)
        );

    border-radius:0 var(--radius) var(--radius) 0;

    font-style:italic;
}


/* =========================================================
   CODE
========================================================= */

.entry-content pre{

    overflow:auto;

    padding:1rem;

    background:#241416;

    color:#fff;

    border-radius:var(--radius);
}

.entry-content code{

    font-family:
        Consolas,
        Monaco,
        monospace;
}


/* =========================================================
   PAGINATION
========================================================= */

.pagination{

    display:flex;

    justify-content:center;

    gap:.5rem;

    margin-top:2rem;
}

.pagination a,
.pagination span{

    padding:.65rem 1rem;

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

    border-radius:999px;

    background:var(--surface);
}

.pagination .current{

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );

    color:#fff;

    border-color:transparent;
}


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

.search-form{

    display:flex;

    gap:.5rem;
}

.search-form input{

    flex:1;

    padding:.75rem 1rem;

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

    border-radius:999px;

    background:var(--surface);
}

.search-form button{

    padding:.75rem 1.25rem;

    border:1px solid transparent;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:700;
}

.search-form button:hover{

    background:var(--primary-dark);

    transform:translateY(-1px);
}


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

.comments-title{

    margin-bottom:2rem;

    font-size:1.6rem;
}

.comment-list,
.comment-list ol{

    margin:0;

    padding:0;

    list-style:none;
}

.comment-list{

    display:grid;

    gap:1.5rem;
}

.comment-body{

    display:flex;

    gap:1rem;

    padding:1.25rem;

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

    border-radius:var(--radius);

    background:var(--surface);

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

.comment-body .avatar{

    width:48px;
    height:48px;

    border-radius:50%;

    flex-shrink:0;
}

.comment-box{

    flex:1;

    min-width:0;
}

.comment-author{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    margin-bottom:.75rem;

    font-style:normal;
}

.comment-author strong{

    font-size:1rem;

    font-weight:700;
}

.comment-meta{

    font-size:.85rem;

    color:var(--muted);
}

.children{

    margin-top:1.25rem;

    margin-left:3rem;

    display:grid;

    gap:1rem;
}

.reply{
    margin-top:1rem;
}

.reply a{

    display:inline-block;

    padding:.45rem .9rem;

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

    border-radius:999px;

    font-size:.85rem;
}


/* =========================================================
   COMMENT FORM
========================================================= */

.comment-respond{

    margin-top:3rem;

    padding-top:2rem;
}

.comment-form{

    display:grid;

    gap:1rem;
}

.comment-form label{

    display:block;

    margin-bottom:.35rem;

    font-weight:700;
}

.comment-form input:not([type=checkbox]):not([type=submit]),
.comment-form textarea{

    width:100%;

    padding:.85rem 1rem;

    background:var(--surface);

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

    border-radius:10px;

    color:inherit;
}

.comment-form textarea{

    min-height:180px;

    resize:vertical;
}

.comment-form input[type=submit]{

    padding:.85rem 1.4rem;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );

    color:#fff;

    border:0;

    border-radius:999px;

    cursor:pointer;

    font-weight:800;
}


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

.site-footer{

    padding:5rem 0 2rem;

    font-size:.9rem;

    color:var(--muted);

    text-align:center;

}


/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle{

    position:fixed;

    left:24px;

    bottom:24px;

    width:52px;
    height:52px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            var(--surface),
            var(--surface-2)
        );

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

    border-radius:50%;

    box-shadow:var(--shadow);

    cursor:pointer;

    z-index:9999;

    transition:
        transform .25s ease,
        background .25s ease;
}

.theme-toggle:hover{

    transform:
        translateY(-3px)
        rotate(8deg);
}


/* =========================================================
   LEARNPRESS
========================================================= */

#popup-course,
body .lp-single-course__header{

    background:var(--surface);
}

.lp-course-curriculum
.course-section
.course-section-header,

.lp-single-course
.lp-single-course-main__right__inner{

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

    border-radius:var(--radius);

    background-color:var(--surface);

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

.learn-press-courses[data-layout=grid]
.wp-block-learnpress-course-item-template,

.learn-press-courses[data-layout=grid]
.course-item,

.learn-press-courses.lp-courses-related
.wp-block-learnpress-course-item-template,

.learn-press-courses.lp-courses-related
.course-item,

.lp-course-curriculum
.course-section{

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

    border-radius:var(--radius);
}

.learn-press-courses[data-layout="list"]
.course{

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

.lp-section-instructor{
    display:none;
}


/* =========================================================
   SMALL MAGICAL DETAILS
========================================================= */

::selection{

    background:var(--primary);

    color:#fff;
}


/* scrollbar */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:var(--bg);
}

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            var(--primary),
            var(--blue)
        );

    border-radius:20px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:992px){

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


@media (max-width:768px){

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

    .hero{

        height:100vh;

        min-height:540px;
    }

    .menu-toggle{
        display:flex;
    }

    .site-header{
        padding:12px 0;
    }

    .site-nav{

        position:fixed;

        inset:var(--header) 0 auto 0;

        background:var(--bg);

        display:none;

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

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

    .site-nav.open{
        display:block;
    }

    .site-nav ul{

        display:flex;

        flex-direction:column;

        gap:0;
    }

    .site-nav li{
        width:100%;
    }

    .site-nav a{

        display:block;

        width:100%;

        padding:.7rem 1rem;
    }

    .site-nav > ul > li > a::after{
        display:none;
    }

    .site-nav li ul{

        position:static;

        display:none;

        box-shadow:none;

        border:none;

        border-radius:0;

        padding-left:1rem;

        background:transparent;
    }

    .site-nav li:hover>ul{
        display:block;
    }

    .menu-toggle{

        margin-left:auto;

        display:flex;
    }

    .hero-overlay .container{
        align-items:center;
    }

    .hero h1,
    .hero p{
        text-align:center;
    }

    .hero p{
        line-height:1.8rem;
    }

    .entry{
        padding:1.2rem;
    }

    .entry-title{
        font-size:1.35rem;
    }

    .theme-toggle{

        left:16px;
        bottom:16px;

        width:48px;
        height:48px;
    }
}

/* =========================================================
   LANGUAGE TOGGLE
========================================================= */

.language-toggle{

    position:fixed;

    left:88px;
    bottom:24px;

    z-index:9999;

    display:flex;

    align-items:center;

    gap:.5rem;

    min-height:52px;

    padding:.35rem .8rem;

    background:
        linear-gradient(
            135deg,
            var(--surface),
            var(--surface-2)
        );

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

    border-radius:999px;

    box-shadow:var(--shadow);

    transition:
        background var(--transition),
        border var(--transition),
        transform .25s ease;
}

.language-toggle:hover{
    transform:translateY(-2px);
}

.language-icon{
    font-size:1.1rem;
    line-height:1;
}


/* Google Translate dropdown */

#google_translate_element{
    display:flex;
    align-items:center;
}

#google_translate_element select{

    appearance:none;
    -webkit-appearance:none;

    min-width:110px;

    padding:.35rem 1.4rem .35rem .5rem;

    border:0;

    border-radius:999px;

    background:
        var(--surface-2)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
        no-repeat
        right .4rem center;

    color:var(--text);

    font-family:
        "Nunito Sans",
        sans-serif;

    font-size:.85rem;

    font-weight:700;

    cursor:pointer;

    outline:none;
}

#google_translate_element select:focus{
    box-shadow:0 0 0 2px var(--primary-light);
}


/* Hilangkan branding Google yang tidak diperlukan */

.goog-logo-link{
    display:none !important;
}

.goog-te-gadget{
    font-size:0 !important;
}

.goog-te-gadget span{
    display:none !important;
}

.goog-te-gadget .goog-te-combo{
    margin:0 !important;
}


/* Google toolbar di bagian atas */

body > .skiptranslate{
    display:none !important;
}

body{
    top:0 !important;
}


/* Mobile */

@media (max-width:768px){

    .language-toggle{

        left:76px;
        bottom:16px;

        min-height:48px;

        padding:.3rem .65rem;
    }

    #google_translate_element select{

        min-width:95px;

        font-size:.8rem;
    }

    .language-icon{
        font-size:1rem;
    }
}