body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: "Open Sans", serif;
}

a {
    text-decoration: none !important;
    /*color: #0d4767 !important;*/
    color: #9ac !important;
}
a:hover {
    opacity: 0.85;
}

.logo-wrap {
    position: relative;
    width: 100%;
    padding: 0 40px; /* kiri & kanan ada space */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(60px);
    animation: qiqlo-logo-rise 3.5s ease forwards 5s;
}

.logo-wrap svg {
    max-width: 900px;
    width: 100%;
    height: auto;
}

.logo-box {
    position: relative;
    display: inline-block;
}

.logo-box svg {
    display: block;
}

h2 {
    /*color: #555;*/
    color: #ddd;
    text-align: center;
    margin-top: 2.5rem;
    font-size: 14pt;
    font-weight: normal;
}

p {
    /*color: #555;*/
    color: #ddd;
    text-align: center;
    font-size: 8pt;
    margin: 0;
}

@keyframes qiqlo-logo-rise {
    from {
        transform: translateY(60px);
    }
    to {
        transform: translateY(-20px);
    }
}

/* Tablet */
@media (max-width: 1368px) {
    .logo-wrap svg {
        max-width: 700px;
    }

    h2 {
        font-size: 13pt;
    }
}

/* Mobile */
@media (max-width: 800px) {
    .logo-wrap {
        padding: 0 20px;
        transform: translateY(80px);
    }

    .logo-wrap svg {
        max-width: 650px;
    }

    h2 {
        margin-top: 1rem;
        font-size: 12pt;
    }

    @keyframes qiqlo-logo-rise {
        from {
            transform: translateY(80px);
        }
        to {
            transform: translateY(10px);
        }
    }
}

/* Mobile Small */
@media (max-width: 480px) {
    .logo-wrap {
        padding: 0 20px;
        transform: translateY(80px);
    }

    .logo-wrap svg {
        max-width: 400px;
    }

    h2 {
        margin-top: 1rem;
        font-size: 12pt;
    }

    @keyframes qiqlo-logo-rise {
        from {
            transform: translateY(80px);
        }
        to {
            transform: translateY(10px);
        }
    }
}

/* === ANIMASI GARIS + FILL === */
.logo-wrap svg .str0 {
    stroke: #a8b1b7;
    stroke-width: 2;
    fill: none;

    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;

    animation:
        qiqlo-draw 6.5s ease forwards,
        qiqlo-fill 1.5s ease forwards 2.5s,
        qiqlo-hide-stroke 2.5s ease forwards 2.5s;
}

@media (max-width: 480px) {
    .logo-wrap svg .str0 {
        stroke-width: 4;
    }
}

@keyframes qiqlo-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes qiqlo-fill {
    from {
        fill: transparent;
    }
    to   {
        /*fill: #485157;*/
        fill: #eee;
    }
}

@keyframes qiqlo-hide-stroke {
    from {
        stroke-width: 2;
        stroke: #a8b1b7;
    }
    to {
        stroke-width: 0;
        stroke: transparent;
    }
}


/* === ANIMASI GARIS TITIK–TITIK DASAR (GUIDE) === */

.logo-wrap svg .guide-dot {
    stroke: #b8bec2;          /* warna garis dasar, bisa disesuaikan */
    stroke-width: .8;
    stroke-dasharray: 4 6;    /* pola titik2: 4px garis, 6px kosong */
    stroke-dashoffset: 120;   /* mulai "mundur" supaya bisa di-draw */
    fill: none;

    opacity: 0;

    /* tidak mengubah timing animasi logo, ini animasi terpisah */
    animation:
        guide-fade-in 0.6s ease forwards 0.8s,  /* muncul pelan */
        guide-draw 3s ease-out forwards 0.8s;
}

@keyframes guide-fade-in {
    to {
        opacity: 1;
    }
}

@keyframes guide-draw {
    to {
        stroke-dashoffset: 0;
    }
}


/* === BACKGROUND LAYER === */
/*.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/bg.jpg') no-repeat center center / cover;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    animation: bg-fade-in 5s ease forwards 3s;
}

@keyframes bg-fade-in {
    from {
        opacity: 0;
        filter: blur(0px);
        transform: scale(1.5);
    }
    to {
        opacity: 1;
        filter: blur(12px);
        transform: scale(1.05);
    }
}*/

.bg-layer { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/bg2.jpg') no-repeat center center / cover;
    opacity: 0;
    pointer-events: none;
    z-index: -2;
    animation: bg-fade-in 5s ease forwards 3s;
    filter: blur(0px)
            brightness(112%)
            contrast(88%)
            saturate(65%)
            grayscale(15%);
}

/* Lapisan tint warna deep navy */
.bg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.50); /* elegant black */
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    animation: overlay-fade-in 5s ease forwards 3s;
}

/* Animasi halus */
@keyframes bg-fade-in {
    from {
        opacity: 0;
        transform: scale(1.25);
    }
    to {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* === ETC === */
.pause-anim * {
    animation-play-state: paused !important;
}


/* Registered mark */
.qiqlo-reg {
    position: absolute;
    /*font-weight: bold;*/
    /*color: #485157;*/
    color: #eee;
    font-size: 30px;
    opacity: 0;
    transform: scale(0.2);
    pointer-events: none;
    top: -12px;
    right: -22px;
    animation: reg-fade-in 1s ease forwards 7s;
}

/* Responsive scale */
@media (max-width: 800px) {
    .qiqlo-reg {
        font-size: 24px;
        right: -14px;
    }
}

@media (max-width: 480px) {
    .qiqlo-reg {
        font-size: 18px;
        right: -10px;
    }
}

/* Animasi muncul lembut */
@keyframes reg-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}




.cta-wrap {
    display: inline-block;
}
.cta-button {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.5rem 1.5rem;
    background-color: #1a73e8;
    color: #fff !important;
    font-size: 1.1rem;
    border-radius: 4px;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        transform 1.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-button:hover {
    background-color: #155ab6;
    transform: scale(1.08) translateY(-2px) !important;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;

    padding: 12px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center !important;
    font-size: 0.65rem;
    /*color: #555;*/
    color: #ddd;
    z-index: 999;
}

.footer img {
    max-width: 120px;
    opacity: 0.9;
    margin: 8px 0;
}

.footer .copyright {
    font-size: 0.55rem;
    line-height: 1.3;
    opacity: 0.8;
}

.footer .credit {
    font-size: 0.55rem;
    line-height: 1.3;
    opacity: 0.8;
}

/* mobile */
@media (max-width: 800px) {
    .footer {
        max-width: 320px;
        font-size: 0.58rem;
        padding: 10px 10px;
    }

    .footer img {
        max-width: 90px;
        margin: 6px 0;
    }

    .footer .copyright {
        font-size: 0.5rem;
    }

    .footer .credit {
        font-size: 0.5rem;
    }
}