/* =========================================================
   KUDU SOFTWARE — INDEX DÜZELTMELERİ
   Bu dosya style.css ve contact-form.css dosyalarından sonra yüklenmelidir.
   ========================================================= */

/* Hero alanında 3D katmanların birbirini yanlış örtmesini engeller. */
.hero-visual {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.developer-stage {
    position: relative;
    isolation: isolate;
    overflow: visible;
    transform-style: preserve-3d;
}

.code-studio {
    z-index: 5;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Profil görseli masaüstünde kod penceresinin kesinlikle önünde kalır. */
.profile-node {
    z-index: 100 !important;
    overflow: visible;
    transform: translateZ(180px) rotate(4deg) !important;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

.profile-node-ring {
    z-index: 1;
    pointer-events: none;
}

.profile-node img {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    backface-visibility: hidden;
}

.profile-node .online-dot {
    z-index: 5;
}

.metric-card,
.orbit {
    backface-visibility: hidden;
}

.metric-card {
    z-index: 30 !important;
    transform: translateZ(80px);
}

/* Büyük masaüstünde profil için ayrı ve görünür alan bırakır. */
@media (min-width: 1025px) {
    .hero-visual {
        min-height: 660px;
    }

    .developer-stage {
        min-height: 630px;
        padding-top: 18px;
    }

    .code-studio {
        inset: 62px 76px 124px 0;
        z-index: 5;
    }

    .profile-node {
        top: -8px !important;
        right: -10px !important;
        width: 156px;
        height: 156px;
    }

    .metric-speed {
        left: 18px;
        bottom: 12px;
    }

    .metric-status {
        right: 14px;
        bottom: 12px;
    }
}

/* Orta masaüstü ve yatay tabletler. */
@media (min-width: 821px) and (max-width: 1024px) {
    .hero-visual {
        min-height: 620px;
    }

    .developer-stage {
        min-height: 600px;
    }

    .code-studio {
        inset: 58px 64px 118px 0;
    }

    .profile-node {
        top: 0 !important;
        right: 0 !important;
        width: 138px;
        height: 138px;
    }
}

/* Mobilde profil taşmadan ön planda kalır. */
@media (max-width: 820px) {
    .profile-node {
        z-index: 100 !important;
        transform: translateZ(100px) rotate(3deg) !important;
    }
}

/* Form sonucu: başarı, uyarı ve hata aynı tasarım sistemiyle görünür. */
.form-feedback {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    margin-top: 15px;
    padding: 15px 17px;
    border: 1px solid transparent;
    border-radius: 16px;
    animation: formFeedbackIn .35s ease both;
}

.form-feedback-icon {
    display: grid;
    flex: 0 0 31px;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.form-feedback-copy {
    min-width: 0;
}

.form-feedback-copy strong {
    display: block;
    margin: 1px 0 4px;
    font-size: 14px;
}

.form-feedback-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.form-feedback.success {
    color: #baf8d7;
    border-color: rgba(42, 211, 130, .3);
    background: rgba(22, 163, 99, .14);
}

.form-feedback.success .form-feedback-icon {
    color: #062d1a;
    background: #42dfa0;
}

.form-feedback.warning {
    color: #ffe8a9;
    border-color: rgba(255, 192, 69, .32);
    background: rgba(211, 145, 22, .14);
}

.form-feedback.warning .form-feedback-icon {
    color: #352300;
    background: #ffc84c;
}

.form-feedback.error {
    color: #ffc6ca;
    border-color: rgba(255, 88, 101, .32);
    background: rgba(211, 45, 61, .14);
}

.form-feedback.error .form-feedback-icon {
    color: #350208;
    background: #ff7480;
}

/* Açık temada okunabilirlik. */
html:not([data-theme="dark"]) .form-feedback.success {
    color: #116b46;
    background: rgba(22, 163, 99, .09);
}

html:not([data-theme="dark"]) .form-feedback.warning {
    color: #855b08;
    background: rgba(211, 145, 22, .09);
}

html:not([data-theme="dark"]) .form-feedback.error {
    color: #a52631;
    background: rgba(211, 45, 61, .08);
}

@keyframes formFeedbackIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media (max-width: 600px) {
    .form-feedback {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-feedback {
        animation: none;
    }
}