/* ========================================
   Startthegame – Custom CSS
   Bootstrap 5.3.3 override & animations
   ======================================== */

:root {
    --primary: #010080;
    --primary-h: #0100B3;
    --accent: #FFBC42;
    --accent-h: #FFD073;
    --light-bg: #F5F5F7;
    --success: #4CAF50;
    --danger-c: #E53E3E;
    --border-r: 0.625rem;
}

/* ── Animations ── */
@keyframes float-up {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

@keyframes float-down {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(15px) rotate(-10deg);
    }
}

@keyframes spin-slow {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-scale {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.float-up {
    animation: float-up 4s ease-in-out infinite;
}

.float-down {
    animation: float-down 3s ease-in-out infinite;
}

.spin-slow {
    animation: spin-slow 20s linear infinite;
}

.pulse-anim {
    animation: pulse-scale 3s ease-in-out infinite;
}

/* ── Scroll animations ── */
.anim {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .6s ease, transform .6s ease;
}

    .anim.visible {
        opacity: 1;
        transform: translateY(0);
    }

.anim-scale {
    opacity: 0;
    transform: scale(.92);
    transition: opacity .6s ease, transform .6s ease;
}

    .anim-scale.visible {
        opacity: 1;
        transform: scale(1);
    }

/* stagger delays */
.delay-1 {
    transition-delay: .15s;
}

.delay-2 {
    transition-delay: .30s;
}

.delay-3 {
    transition-delay: .45s;
}

.delay-4 {
    transition-delay: .60s;
}

.delay-5 {
    transition-delay: .75s;
}

.delay-6 {
    transition-delay: .90s;
}

/* ── Hero ── */
.hero-section {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.text-accent {
    color: var(--accent);
}

.text-primary-c {
    color: var(--primary);
}

.bg-light-bg {
    background-color: var(--light-bg);
}

/* ── Card hover ── */
.card-hover {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    cursor: default;
}

    .card-hover:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 20px 60px rgba(1,0,128,.15) !important;
    }

/* ── Buttons ── */
.btn-pill {
    border-radius: 999px;
    padding: .7rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all .25s;
}

.btn-pill-lg {
    border-radius: 999px;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all .25s;
}

.btn-deep-blue {
    background: var(--primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 20px rgba(1,0,128,.25);
}

    .btn-deep-blue:hover {
        background: var(--primary-h);
        color: #fff;
        transform: scale(1.04);
        box-shadow: 0 6px 24px rgba(1,0,128,.35);
    }

    .btn-deep-blue:focus,
    .btn-deep-blue:focus-visible,
    .btn-deep-blue:active {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 4px 20px rgba(1,0,128,.25);
    }

    .btn-deep-blue:disabled,
    .btn-deep-blue[disabled] {
        background: var(--primary) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 20px rgba(1,0,128,.25);
        opacity: .75;
    }

.btn-accent {
    background: var(--accent);
    color: var(--primary);
    border: none;
    box-shadow: 0 4px 20px rgba(255,188,66,.35);
}

    .btn-accent:hover {
        background: var(--accent-h);
        color: var(--primary);
        transform: scale(1.04);
    }

    .btn-accent:focus,
    .btn-accent:focus-visible,
    .btn-accent:active {
        background: var(--accent);
        color: var(--primary);
        box-shadow: 0 4px 20px rgba(255,188,66,.35);
    }

/* ── Badge / chip ── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem 1rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
}

.chip-primary {
    background: rgba(1,0,128,.1);
    color: var(--primary);
    border: 2px solid rgba(1,0,128,.2);
}

/* ── Section padding ── */
.section-py {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* ── Step card ── */
.step-badge {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-h));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255,188,66,.4);
}

/* ── Icon box ── */
.icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── CTA dark card ── */
.cta-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-h) 100%);
    border-radius: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(1,0,128,.35);
}

.cta-deco-right {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: var(--accent);
    opacity: .2;
    font-size: 6rem;
}

.cta-deco-left {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    color: #fff;
    opacity: .1;
    font-size: 5rem;
}

/* ── Demo modal ── */
.modal-content {
    border-radius: 1.5rem;
    border: none;
}

.form-input {
    padding: .9rem 1rem .9rem 3rem;
    border-radius: 1rem;
    border: 2px solid #e5e5e5;
    background: var(--light-bg);
    outline: none;
    width: 100%;
    transition: border-color .2s;
    font-size: .95rem;
}

    .form-input:focus {
        border-color: var(--primary);
    }

.form-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.form-textarea {
    padding: .9rem 1rem;
    border-radius: 1rem;
    border: 2px solid #e5e5e5;
    background: var(--light-bg);
    outline: none;
    width: 100%;
    resize: none;
    transition: border-color .2s;
    font-size: .95rem;
}

    .form-textarea:focus {
        border-color: var(--primary);
    }

/* ── Scroll to top ── */
#scrollTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 2.8rem;
    height: 2.8rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(1,0,128,.35);
    cursor: pointer;
    z-index: 9999;
    transition: opacity .25s, transform .25s;
}

    #scrollTop:hover {
        transform: scale(1.1);
    }

/* ── Responsive ── */
@media (max-width: 767px) {
    .hero-section {
        min-height: 80vh;
    }
}

/******************************************/

/* ── Hero section ── */
.company-hero-padding {
    padding-top: 5rem;
    padding-bottom: 4rem;
}

.company-hero-deco-trophy {
    top: 8rem;
    left: 8%;
    opacity: .15;
    font-size: 4rem;
    color: #FFBC42;
}

.company-hero-deco-code {
    bottom: 2rem;
    right: 10%;
    opacity: .08;
    font-size: 5rem;
    color: #010080;
}

.company-hero-content {
    z-index: 2;
    max-width: 60rem;
    margin: 0 auto;
    padding-top: 4rem;
}

.company-hero-heading {
    font-size: clamp(2rem, 5.5vw, 4.2rem);
    font-weight: 400;
    line-height: 1.2;
}

.company-hero-desc {
    max-width: 44rem;
}

.company-hero-fade {
    height: 6rem;
    background: linear-gradient(to top, #F5F5F7, transparent);
    pointer-events: none;
}

/* ── Çözümler section ── */
.company-sol-card-primary {
    border-color: rgba(1,0,128,.25) !important;
}

.company-sol-card-accent {
    border-color: rgba(255,188,66,.4) !important;
}

.company-sol-icon-primary {
    background: rgba(1,0,128,.12);
    border: 2px solid rgba(1,0,128,.2);
}

.company-sol-icon-accent {
    background: rgba(255,188,66,.15);
    border: 2px solid rgba(255,188,66,.4);
}

/* ── Platform özellikleri section ── */
.company-feat-icon-accent {
    background: rgba(255,188,66,.12);
}

.company-feat-icon-primary {
    background: rgba(1,0,128,.1);
}

/* ── Nasıl çalışır section ── */
.company-step-card-primary {
    border-color: rgba(1,0,128,.25) !important;
}

.company-step-card-accent {
    border-color: rgba(255,188,66,.4) !important;
}

.company-step-icon-primary {
    background: rgba(1,0,128,.12);
    border: 2px solid rgba(1,0,128,.2);
}

.company-step-icon-accent {
    background: rgba(255,188,66,.15);
    border: 2px solid rgba(255,188,66,.4);
}

/* ── CTA section ── */
.company-cta-inner {
    z-index: 2;
}

.company-cta-desc {
    max-width: 36rem;
    opacity: .9;
}

/* ── Modal section ── */
.company-modal-success-icon {
    width: 5rem;
    height: 5rem;
    background: #d1fae5;
}

.company-modal-disclaimer {
    font-size: .82rem;
}

/* ── Wrong-Hire Cost Stats ── */
.company-cost-stats { text-align: center; }

.company-cost-stats-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: .55;
    margin-bottom: 1rem;
}

.company-cost-card {
    background: var(--light-bg);
    border: 2px solid #e5e5e5;
    border-radius: 1rem;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    transition: transform .3s ease, box-shadow .3s ease;
}

.company-cost-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(1,0,128,.12);
}

.company-cost-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.company-cost-icon-primary { color: var(--primary); }
.company-cost-icon-accent  { color: var(--accent);  }

.company-cost-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.company-cost-value-primary { color: var(--primary); }
.company-cost-value-accent  { color: var(--accent);  }

.company-cost-arrow { font-size: 1.4rem; }

.company-cost-label {
    font-size: .85rem;
    color: var(--primary);
    opacity: .65;
}