/* ============================================
   HN Creative - Component Styles
   components.css
   Page-specific CSS for cekturnitin.html
   ============================================ */

/* --- Form Input Focus --- */
input:focus {
    border-color: #9CAF88;
    outline: none;
}
input[type="checkbox"] {
    accent-color: #9CAF88;
}

/* --- Drag & Drop Zone --- */
.drop-zone--over {
    border-color: #7C8D6B;
    background-color: #E8EDE3;
}
.dark .drop-zone--over {
    border-color: #9CAF88;
    background-color: rgba(156, 175, 136, 0.15);
}

/* --- Premium Button (Turnitin CTA) --- */
@keyframes shine {
    0%   { left: -100%; }
    20%  { left: 100%; }
    100% { left: 100%; }
}

.btn-premium {
    position: relative;
    overflow: hidden;
    animation: float 4s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-premium::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 100%;
    height: 200%;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(35deg);
    animation: shine 5s infinite;
}
.btn-premium:hover {
    animation-play-state: paused;
    transform: scale(1.03);
    box-shadow: 0 25px 50px -12px rgba(156, 175, 136, 0.5);
}

/* --- Multi-Step Form Animation --- */
@keyframes slideFadeIn {
    0%   { opacity: 0; transform: translateX(15px); }
    100% { opacity: 1; transform: translateX(0); }
}
.step-animate {
    animation: slideFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Scroll Float Text Animation (per-character) --- */
.scroll-float { overflow: visible; }
.scroll-float .scroll-float-text {
    display: inline-block;
    white-space: nowrap;
}
.scroll-float .char {
    display: inline-block;
    will-change: transform, opacity;
    transform: translateY(60%) scaleY(1.8) scaleX(0.7);
    transform-origin: 50% 0%;
    opacity: 0;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(.2, .9, .3, 1);
}
.scroll-float.in-view .char {
    transform: translateY(0) scaleY(1) scaleX(1);
    opacity: 1;
}

/* --- Honeypot Anti-Spam Field --- */
.hidden-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}