/* ==========================================================
   PORTAL GTK KABUPATEN KONAWE
   File    : 16-layanan.css
   Version : 5.0
   Modul   : AI Workspace & Services System
==========================================================*/


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

.layanan{

    width:100%;

    margin:var(--space-xl) auto;

}


/* ==========================================================
   HERO AI WRAPPER
==========================================================*/

.hero-ai{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}


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

.hero-chat{

    width:100%;

    background:var(--white);

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

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

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

    padding:55px;

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:center;

    animation:fadeHero .7s ease;

}


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

.hero-title-area{

    text-align:center;

    margin-bottom:25px;

}

.hero-title-area h1{

    font-size:44px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:12px;

    letter-spacing:.5px;

}

.hero-title-area p{

    font-size:18px;

    color:var(--text-light);

}


/* ==========================================================
   AI SPEECH
==========================================================*/

.ai-speech{

    position:relative;

    max-width:620px;

    background:#F8FBFF;

    border:1px solid #D7E7FF;

    border-radius:22px;

    padding:20px 26px;

    margin-bottom:35px;

    text-align:center;

    line-height:1.8;

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

    transition:var(--transition);

}

.ai-speech::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-16px;

    transform:translateX(-50%);

    border-width:10px;

    border-style:solid;

    border-color:#F8FBFF transparent transparent transparent;

}

.ai-message{

    display:block;

    font-size:16px;

    color:var(--text);

}

.ai-mini{

    display:none;

}


/* ==========================================================
   MODE COLLAPSE
==========================================================*/

.ai-speech.collapsed{

    padding:10px 18px;

    border-radius:999px;

}

.ai-speech.collapsed .ai-message{

    display:none;

}

.ai-speech.collapsed .ai-mini{

    display:block;

    color:var(--primary);

    font-weight:600;

}


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

.hero-maskot{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    margin-bottom:30px;

}

.ai-maskot{

    width:230px;

    max-width:100%;

    cursor:pointer;

    transition:var(--transition);

    animation:floatMaskot 4s ease-in-out infinite;

}

.ai-maskot:hover{

    transform:scale(1.05);

}


/* ==========================================================
   SHADOW MASKOT
==========================================================*/

.hero-maskot::after{

    content:"";

    position:absolute;

    bottom:6px;

    left:50%;

    transform:translateX(-50%);

    width:130px;

    height:18px;

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

    filter:blur(10px);

    border-radius:50%;

}


/* ==========================================================
   PROMPT LABEL
==========================================================*/

.prompt-label{

    width:100%;

    max-width:760px;

    margin:0 auto 15px;

    text-align:left;

    font-size:16px;

    font-weight:600;

    color:var(--primary);

}


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

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes floatMaskot{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.chat-container{

    width:100%;

    max-width:920px;

    margin:0 auto;

}


/* ==========================================================
   CHAT BOX
==========================================================*/

.chat-box{

    width:100%;

    background:var(--white);

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

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

    overflow:hidden;

    transition:var(--transition);

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

}

.chat-box:hover{

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

}

.chat-box:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 0 5px rgba(30,99,198,.12);

}


/* ==========================================================
   TEXTAREA
==========================================================*/

.chat-box textarea{

    width:100%;

    min-height:170px;

    max-height:320px;

    resize:none;

    border:none;

    outline:none;

    background:transparent;

    padding:28px;

    font-family:inherit;

    font-size:17px;

    line-height:1.8;

    color:var(--text);

    overflow-y:auto;

}


/* ==========================================================
   PLACEHOLDER
==========================================================*/

.chat-box textarea::placeholder{

    color:#9CA3AF;

    line-height:1.8;

    transition:var(--transition);

}


/* ==========================================================
   SCROLLBAR
==========================================================*/

.chat-box textarea::-webkit-scrollbar{

    width:8px;

}

.chat-box textarea::-webkit-scrollbar-thumb{

    background:#C8D4E4;

    border-radius:30px;

}

.chat-box textarea::-webkit-scrollbar-track{

    background:transparent;

}


/* ==========================================================
   TOOLBAR
==========================================================*/

.chat-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:15px 20px;

    background:#F8FAFD;

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

}


/* ==========================================================
   TOOLBAR LEFT
==========================================================*/

.toolbar-left{

    display:flex;

    align-items:center;

    gap:12px;

}


/* ==========================================================
   TOOLBAR RIGHT
==========================================================*/

.toolbar-right{

    display:flex;

    align-items:center;

    gap:16px;

}


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

.tool-btn{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--white);

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:18px;

    color:var(--primary);

    transition:var(--transition);

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

}

.tool-btn:hover{

    background:var(--primary);

    color:var(--white);

    transform:translateY(-2px);

}


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

.send-btn{

    width:54px;

    height:54px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:var(--primary);

    color:var(--white);

    font-size:18px;

    transition:var(--transition);

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

}

.send-btn:hover{

    background:var(--primary-dark);

    transform:scale(1.08);

}

.send-btn:active{

    transform:scale(.95);

}


/* ==========================================================
   AI STATUS
==========================================================*/

.ai-status{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    font-weight:600;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

    animation:pulseAI 2s infinite;

}

.status-text{

    color:var(--success);

}


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

@keyframes pulseAI{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.4);

        opacity:.55;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


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

.chat-box{

    animation:chatFade .7s ease;

}

@keyframes chatFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   AI RESPONSE PANEL
==========================================================*/

.ai-response{

    width:100%;

    max-width:920px;

    margin:30px auto;

    background:var(--white);

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

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

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

    overflow:hidden;

    display:none;

}

.ai-response.show{

    display:block;

    animation:responseFade .45s ease;

}


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

.response-header{

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

    color:var(--white);

    padding:18px 24px;

    font-size:18px;

    font-weight:700;

}


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

.response-content{

    padding:28px;

    font-size:16px;

    line-height:1.9;

    color:var(--text);

}

.response-content h3{

    color:var(--primary);

    margin-bottom:16px;

    font-size:24px;

}

.response-content p{

    margin-bottom:18px;

}


/* ==========================================================
   SOURCE
==========================================================*/

.response-source{

    margin-top:25px;

    padding:18px 20px;

    background:#F8FBFF;

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

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

    font-size:15px;

    line-height:1.8;

}


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

.response-meta{

    margin-top:25px;

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

    padding-top:18px;

}

.meta-item{

    display:flex;

    gap:12px;

    align-items:flex-start;

    margin-bottom:12px;

}

.meta-item i{

    color:var(--primary);

    margin-top:3px;

}

.meta-label{

    font-weight:700;

    color:var(--primary);

}


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

.response-action{

    display:flex;

    justify-content:flex-end;

    margin-top:25px;

}

.response-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 24px;

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

    background:var(--primary);

    color:var(--white);

    font-weight:600;

    transition:var(--transition);

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

}

.response-button:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}


/* ==========================================================
   QUICK GUIDE
==========================================================*/

.quick-guide{

    width:100%;

    max-width:920px;

    margin:35px auto;

    padding:28px;

    background:#F8FBFF;

    border:1px solid #DCEBFF;

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

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

}


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

.guide-title{

    font-size:22px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:22px;

}


/* ==========================================================
   GUIDE ITEM
==========================================================*/

.guide-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    margin-bottom:18px;

}

.guide-item span{

    font-size:26px;

    line-height:1;

}

.guide-item p{

    font-size:16px;

    line-height:1.8;

    color:var(--text);

}


/* ==========================================================
   GUIDE TIP
==========================================================*/

.guide-tip{

    margin-top:20px;

    padding:18px;

    background:#EEF6FF;

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

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

    font-size:15px;

    line-height:1.8;

    color:var(--text);

}


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

@keyframes responseFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}




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

.layanan-header{

    text-align:center;

    margin:70px auto 40px;

}

.layanan-header h2{

    font-size:36px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:12px;

}

.layanan-header p{

    font-size:17px;

    color:var(--text-light);

}


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

.layanan-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:28px;

}


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

.layanan-card{

    position:relative;

    overflow:hidden;

    background:var(--white);

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

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

    padding:38px 24px;

    text-align:center;

    transition:var(--transition);

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

}

.layanan-card:hover{

    transform:translateY(-8px);

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

}


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

.layanan-card i{

    font-size:52px;

    margin-bottom:20px;

    transition:var(--transition);

}

.layanan-card:hover i{

    transform:scale(1.15) rotate(-5deg);

}


/* ==========================================================
   JUDUL
==========================================================*/

.layanan-card h3{

    font-size:22px;

    font-weight:700;

    margin-bottom:10px;

    color:var(--text);

}


/* ==========================================================
   DESKRIPSI
==========================================================*/

.layanan-card p{

    font-size:15px;

    line-height:1.8;

    color:var(--text-light);

}


/* ==========================================================
   EFEK KILAU
==========================================================*/

.layanan-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:.9s;

}

.layanan-card:hover::before{

    left:150%;

}


/* ==========================================================
   GARIS WARNA
==========================================================*/

.layanan-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:var(--primary);

}


/* ==========================================================
   WARNA MASING-MASING KARTU
==========================================================*/

.tpg::after{

    background:#16A34A;

}

.tpg i{

    color:#16A34A;

}

.sktp::after{

    background:#2563EB;

}

.sktp i{

    color:#2563EB;

}

.ppg::after{

    background:#9333EA;

}

.ppg i{

    color:#9333EA;

}

.simpkb::after{

    background:#EA580C;

}

.simpkb i{

    color:#EA580C;

}

.download::after{

    background:#0891B2;

}

.download i{

    color:#0891B2;

}

.informasi::after{

    background:#DC2626;

}

.informasi i{

    color:#DC2626;

}

.regulasi::after{

    background:#CA8A04;

}

.regulasi i{

    color:#CA8A04;

}

.berita::after{

    background:#7C3AED;

}

.berita i{

    color:#7C3AED;

}


/* ==========================================================
   ANIMASI MASUK
==========================================================*/

.layanan-card{

    animation:cardFade .6s ease both;

}

.layanan-card:nth-child(1){animation-delay:.10s;}
.layanan-card:nth-child(2){animation-delay:.20s;}
.layanan-card:nth-child(3){animation-delay:.30s;}
.layanan-card:nth-child(4){animation-delay:.40s;}
.layanan-card:nth-child(5){animation-delay:.50s;}
.layanan-card:nth-child(6){animation-delay:.60s;}
.layanan-card:nth-child(7){animation-delay:.70s;}
.layanan-card:nth-child(8){animation-delay:.80s;}

@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:992px){

.layanan-grid{

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

}

}


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

@media(max-width:768px){

.layanan-header{

    margin-top:55px;

}

.layanan-header h2{

    font-size:30px;

}

.layanan-header p{

    font-size:15px;

}

.layanan-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.layanan-card{

    padding:30px 22px;

}

.layanan-card i{

    font-size:46px;

}

.layanan-card h3{

    font-size:20px;

}

}


/* ==========================================================
   RESPONSIVE SYSTEM
   DESKTOP
==========================================================*/

@media(max-width:1200px){

.hero-chat{

    padding:45px;

}

.hero-title-area h1{

    font-size:40px;

}

.chat-container{

    max-width:780px;

}

.ai-response{

    max-width:780px;

}

.quick-guide{

    max-width:780px;

}

}


/* ==========================================================
   LAPTOP
==========================================================*/

@media(max-width:992px){

.hero-chat{

    padding:40px 30px;

}

.hero-title-area h1{

    font-size:34px;

}

.hero-title-area p{

    font-size:17px;

}

.ai-maskot{

    width:190px;

}

.ai-speech{

    max-width:100%;

}

.chat-container{

    max-width:100%;

}

.chat-box textarea{

    min-height:150px;

}

.toolbar-right{

    gap:12px;

}

.layanan-grid{

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

}

}


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

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


@media(max-width:768px){

.hero-chat{

    padding:30px 20px;

}

.hero-title-area h1{

    font-size:30px;

}

.hero-title-area p{

    font-size:15px;

}

.ai-maskot{

    width:165px;

}

.ai-speech{

    padding:18px;

    font-size:15px;

}

.prompt-label{

    font-size:15px;

}

    /* ================= CHAT ================= */

.chat-box textarea{

    min-height:130px;

    font-size:15px;

    padding:22px;

}

.chat-toolbar{

    padding:14px;

    flex-wrap:wrap;

    gap:15px;

}

.toolbar-left{

    width:100%;

    justify-content:flex-start;

}

.toolbar-right{

    width:100%;

    justify-content:space-between;

}

.send-btn{

    width:50px;

    height:50px;

}

.ai-status{

    font-size:13px;

}



    /* ================= RESPONSE ================= */

    .response-content{

        padding:22px;

    }

    .response-content h3{

        font-size:21px;

    }

    .response-action{

        justify-content:center;

    }

    .response-button{

        width:100%;

        justify-content:center;

    }


    /* ================= QUICK GUIDE ================= */

    .quick-guide{

        padding:22px;

    }

    .guide-title{

        font-size:20px;

    }

    .guide-item{

        gap:12px;

    }


    /* ================= LAYANAN ================= */

    .layanan-header{

        margin-top:50px;

    }

    .layanan-header h2{

        font-size:28px;

    }

    .layanan-grid{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:576px){

.hero-chat{

    padding:22px 16px;

}

.hero-title-area h1{

    font-size:26px;

}

.hero-title-area p{

    font-size:14px;

}

.ai-maskot{

    width:145px;

}

.ai-speech{

    padding:15px;

    font-size:14px;

}

.prompt-label{

    font-size:14px;

}

.chat-box{

    border-radius:18px;

}

.chat-box textarea{

    min-height:120px;

    padding:18px;

    font-size:14px;

}

.chat-toolbar{

    padding:12px;

}

.tool-btn{

    width:42px;

    height:42px;

    font-size:16px;

}

.send-btn{

    width:46px;

    height:46px;

}

.status-text{

    font-size:12px;

}

.response-content{

    padding:18px;

}

.response-content h3{

    font-size:20px;

}

.response-button{

    width:100%;

    justify-content:center;

}

.guide-title{

    font-size:18px;

}

.guide-item{

    align-items:flex-start;

}

.layanan-card{

    padding:28px 18px;

}

.layanan-card i{

    font-size:42px;

}

.layanan-card h3{

    font-size:19px;

}

}


/* ==========================================================
   EXTRA SMALL
==========================================================*/

@media(max-width:380px){

.hero-title-area h1{

    font-size:23px;

}

.hero-title-area p{

    font-size:13px;

}

.ai-maskot{

    width:125px;

}

.ai-speech{

    padding:13px;

}

.chat-box textarea{

    min-height:110px;

    padding:16px;

}

.tool-btn{

    width:40px;

    height:40px;

}

.send-btn{

    width:44px;

    height:44px;

}

.status-text{

    display:none;

}

.prompt-label{

    font-size:13px;

}

.guide-item{

    flex-direction:column;

    gap:8px;

}

.guide-item span{

    font-size:22px;

}

}


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

@media(max-height:500px) and (orientation:landscape){

.hero-chat{

    padding:18px;

}

.ai-maskot{

    width:110px;

}

.chat-box textarea{

    min-height:90px;

}

}