/*
Theme Name: Ticaret Kapında
Theme URI: https://ticaretkapinda.com
Author: Ticaret Kapında
Author URI: https://ticaretkapinda.com
Description: Ticaret Kapında özel WordPress teması.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ticaretkapinda
*/

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.animate-border-rotate {
    animation: borderRotate 4s linear infinite;
    background-size: 400% 400%;
}

.animate-slide-right {
    animation: slideRight 1s ease-out forwards;
}

.animate-pop-in {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-coin-drop {
    animation: coinDrop 1s bounce infinite;
}

details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

/* Işıklı Border Efekti */
.glow-border-wrapper {
    position: relative;
    background: linear-gradient(45deg, #ffffff, #333333, #000000);
    padding: 1px;
    border-radius: 1rem;
    overflow: hidden;
}

.glow-border-content {
    background-color: #0a0a0a;
    border-radius: 1rem;
    height: 100%;
    position: relative;
    z-index: 10;
}

/* Animated Gradient Border for Pricing */
.animated-gradient-border {
    position: relative;
    border-radius: 1.5rem;
    z-index: 1;
}

.animated-gradient-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 1.6rem;
    background: linear-gradient(45deg, #ffffff, #666666, #000000, #666666);
    background-size: 400% 400%;
    animation: borderFlow 4s ease infinite;
    z-index: -1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #000;
}

/* TELEFON ANİMASYONLARI */
/* 1. Grafik Çubukları Yükseliş */
@keyframes growUp {
    from {
        height: 0% !important;
        opacity: 0;
    }

    to {
        opacity: 1;
        /* height inline style'dan gelecek */
    }
}

/* 2. Bildirim (Notification) Kayması */
@keyframes notificationSlide {
    0% {
        top: -100px;
        opacity: 0;
    }

    10% {
        top: 20px;
        opacity: 1;
    }

    90% {
        top: 20px;
        opacity: 1;
    }

    100% {
        top: -100px;
        opacity: 0;
    }
}

/* 3. Liste Elemanları Giriş */
@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-bar {
    animation: growUp 1.5s ease-out forwards;
}

.animate-notify {
    animation: notificationSlide 5s ease-in-out forwards;
    animation-delay: 1s;
}

.animate-list-item {
    animation: slideInRight 0.8s ease-out forwards;
}

/* Marquee Animation */
@keyframes marquee {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes wobble {

    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
}

.animate-wobble {
    animation: wobble 1s ease-in-out infinite;
}

/* --- MANAGEMENT PANEL ANIMATIONS (UPDATED FOR 3 TABS) --- */
/* Cycle Duration: 18s (6s per tab) */

/* 1. Cursor Movement Path */
@keyframes cursorPath {
    0% {
        top: 10%;
        left: 17%;
    }

    /* Start at Tab 1 */
    5% {
        top: 10%;
        left: 17%;
        transform: scale(1);
    }

    /* Click Tab 1 */
    8% {
        top: 10%;
        left: 17%;
        transform: scale(0.9);
    }

    10% {
        top: 40%;
        left: 22%;
        transform: scale(1);
    }

    /* Move to Color 1 */
    12% {
        top: 40%;
        left: 22%;
        transform: scale(0.9);
    }

    /* Click Color 1 */
    15% {
        top: 40%;
        left: 32%;
        transform: scale(1);
    }

    /* Move to Color 2 */
    18% {
        top: 40%;
        left: 32%;
        transform: scale(0.9);
    }

    /* Click Color 2 */
    25% {
        top: 40%;
        left: 42%;
        transform: scale(1);
    }

    /* Move to Color 3 */
    28% {
        top: 40%;
        left: 42%;
        transform: scale(0.9);
    }

    /* Click Color 3 */
    33% {
        top: 10%;
        left: 50%;
        transform: scale(1);
    }

    /* Move to Tab 2 */
    36% {
        top: 10%;
        left: 50%;
        transform: scale(0.9);
    }

    /* Click Tab 2 */
    40% {
        top: 50%;
        left: 48%;
        transform: scale(1);
    }

    /* Move to Slider */
    50% {
        top: 50%;
        left: 48%;
        transform: scale(0.9);
    }

    /* Drag Slider Start */
    60% {
        top: 50%;
        left: 65%;
        transform: scale(0.9);
    }

    /* Drag Slider End */
    66% {
        top: 10%;
        left: 83%;
        transform: scale(1);
    }

    /* Move to Tab 3 */
    69% {
        top: 10%;
        left: 83%;
        transform: scale(0.9);
    }

    /* Click Tab 3 */
    75% {
        top: 60%;
        left: 25%;
        transform: scale(1);
    }

    /* Move to Video 1 */
    78% {
        top: 60%;
        left: 25%;
        transform: scale(0.9);
    }

    /* Click Video 1 */
    85% {
        top: 60%;
        left: 75%;
        transform: scale(1);
    }

    /* Move to Video 2 */
    88% {
        top: 60%;
        left: 75%;
        transform: scale(0.9);
    }

    /* Click Video 2 */
    100% {
        top: 10%;
        left: 17%;
        transform: scale(1);
    }
}

/* 2. Tab Switching */
@keyframes tab1Active {

    0%,
    32% {
        background-color: #000;
        color: #fff;
        border-color: #000;
    }

    33%,
    100% {
        background-color: #fff;
        color: #71717a;
        border-color: #e4e4e7;
    }
}

@keyframes tab2Active {

    0%,
    32% {
        background-color: #fff;
        color: #71717a;
        border-color: #e4e4e7;
    }

    33%,
    65% {
        background-color: #000;
        color: #fff;
        border-color: #000;
    }

    66%,
    100% {
        background-color: #fff;
        color: #71717a;
        border-color: #e4e4e7;
    }
}

@keyframes tab3Active {

    0%,
    65% {
        background-color: #fff;
        color: #71717a;
        border-color: #e4e4e7;
    }

    66%,
    100% {
        background-color: #000;
        color: #fff;
        border-color: #000;
    }
}

/* 3. Content Visibility */
@keyframes showContent1 {

    0%,
    32% {
        opacity: 1;
        z-index: 10;
    }

    33%,
    100% {
        opacity: 0;
        z-index: 0;
    }
}

@keyframes showContent2 {

    0%,
    32% {
        opacity: 0;
        z-index: 0;
    }

    33%,
    65% {
        opacity: 1;
        z-index: 10;
    }

    66%,
    100% {
        opacity: 0;
        z-index: 0;
    }
}

@keyframes showContent3 {

    0%,
    65% {
        opacity: 0;
        z-index: 0;
    }

    66%,
    100% {
        opacity: 1;
        z-index: 10;
    }
}

/* 4. Fast Color Change (0-33%) */
@keyframes colorChangeBg {

    0%,
    10% {
        background-color: #18181b;
    }

    /* Black */
    11%,
    20% {
        background-color: #2563eb;
    }

    /* Blue */
    21%,
    33% {
        background-color: #16a34a;
    }

    /* Green */
    34%,
    100% {
        background-color: #18181b;
    }

    /* Reset */
}

@keyframes colorChangeText {

    0%,
    10% {
        color: #18181b;
    }

    11%,
    20% {
        color: #2563eb;
    }

    21%,
    33% {
        color: #16a34a;
    }

    34%,
    100% {
        color: #18181b;
    }
}

/* 5. Slider Movement (33-66%) */
@keyframes sliderMove {

    0%,
    40% {
        width: 30%;
    }

    50%,
    66% {
        width: 75%;
    }

    67%,
    100% {
        width: 30%;
    }
}

/* 6. Earnings & Price Count Up */
@keyframes earningsUp {

    0%,
    40% {
        content: "15.000₺";
    }

    50%,
    100% {
        content: "45.000₺";
    }
}

@keyframes priceUp {

    0%,
    40% {
        content: "100₺";
    }

    50%,
    100% {
        content: "145₺";
    }
}

/* Animation Classes */
/* Cursor animation is now handled by JavaScript for element-based positioning */

.anim-tab1 {
    animation: tab1Active 18s step-end infinite;
}

.anim-tab2 {
    animation: tab2Active 18s step-end infinite;
}

.anim-tab3 {
    animation: tab3Active 18s step-end infinite;
}

.anim-content1 {
    animation: showContent1 18s step-end infinite;
}

.anim-content2 {
    animation: showContent2 18s step-end infinite;
}

.anim-content3 {
    animation: showContent3 18s step-end infinite;
}

.anim-bg-change {
    animation: colorChangeBg 18s step-end infinite;
}

.anim-text-change {
    animation: colorChangeText 18s step-end infinite;
}

.anim-slider-bar {
    animation: sliderMove 18s ease-in-out infinite;
}

/* Form Styles */
.form-error-container,
.form-success-container {
    margin-bottom: 1rem;
}

.form-error-container .bg-red-50 {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.form-success-container .bg-green-50 {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.field-error-message {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc2626;
}

/* Loading State */
button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

button[type="submit"] .fa-spin {
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Real-time Validation Feedback */
input.border-red-500,
textarea.border-red-500,
select.border-red-500 {
    border-color: #ef4444 !important;
    border-width: 2px !important;
}

input:focus.border-red-500,
textarea:focus.border-red-500,
select:focus.border-red-500 {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Form Success Animation */
.form-success-container {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Error Animation */
.form-error-container {
    animation: shake 0.3s ease-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}