/* ========================================
   CONTACT PAGE - Mobile Dark Theme
   Enterprise Level Responsive Design
   ======================================== */

@media (max-width: 768px) {
    
    /* ===== HERO SECTION ===== */
    body[data-page="contact"] .contact-hero {
        height: auto;
        min-height: 280px;
        padding: 80px 0 60px; /* Navbar'dan uzaklaştır */
    }
    
    body[data-page="contact"] .contact-hero-glow {
        width: 350px;
        height: 280px;
        top: -80px;
    }
    
    body[data-page="contact"] .contact-hero-content {
        padding: 0 24px;
    }
    
    body[data-page="contact"] .contact-hero-title {
        font-size: clamp(1.625rem, 6.5vw, 2.25rem);
        line-height: 1.2;
        letter-spacing: -0.02em;
        margin-bottom: 12px;
    }
    
    body[data-page="contact"] .contact-hero-title .accent::after {
        height: 2px;
        bottom: 0;
    }
    
    body[data-page="contact"] .contact-hero-subtitle {
        font-size: 0.9375rem;
        line-height: 1.55;
        max-width: 100%;
        color: rgba(255, 255, 255, 0.6);
    }
    
    /* ===== MAIN SECTION ===== */
    body[data-page="contact"] .contact-main {
        margin-top: -30px;
        padding-bottom: 48px;
    }
    
    body[data-page="contact"] .contact-main .container {
        padding: 0 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* ===== WRAPPER ===== */
    body[data-page="contact"] .contact-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
        max-width: 100%;
    }
    
    /* ===== FORM CARD - ORGANIZED LAYOUT ===== */
    body[data-page="contact"] .contact-form-card {
        padding: 28px 20px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    body[data-page="contact"] .contact-form {
        gap: 0;
        width: 100%;
    }
    
    /* ===== FORM ROW - STACKED BUT ORGANIZED ===== */
    body[data-page="contact"] .form-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
        width: 100%;
    }
    
    /* ===== FORM GROUP ===== */
    body[data-page="contact"] .form-group {
        margin-bottom: 18px;
        width: 100%;
    }
    
    body[data-page="contact"] .form-group-full {
        margin-bottom: 20px;
        width: 100%;
    }
    
    /* ===== FORM LABELS - VISIBLE ON MOBILE ===== */
    body[data-page="contact"] .form-group::before {
        display: none; /* Labels are in placeholders */
    }
    
    /* ===== FORM INPUTS - CLEAN & CONSISTENT ===== */
    body[data-page="contact"] .form-input,
    body[data-page="contact"] .form-select {
        height: 54px;
        padding: 0 18px;
        font-size: 1rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffffff;
        width: 100%;
        box-sizing: border-box;
    }
    
    body[data-page="contact"] .form-input::placeholder {
        color: rgba(255, 255, 255, 0.45);
        font-weight: 400;
    }
    
    body[data-page="contact"] .form-input:focus,
    body[data-page="contact"] .form-select:focus {
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.06);
        outline: none;
    }
    
    body[data-page="contact"] .form-textarea {
        padding: 16px 18px;
        font-size: 1rem;
        min-height: 140px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffffff;
        width: 100%;
        box-sizing: border-box;
        resize: vertical;
        line-height: 1.6;
    }
    
    body[data-page="contact"] .form-textarea::placeholder {
        color: rgba(255, 255, 255, 0.45);
    }
    
    body[data-page="contact"] .form-textarea:focus {
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.06);
        outline: none;
    }
    
    body[data-page="contact"] .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 16px center;
        background-repeat: no-repeat;
        background-size: 18px;
        color: rgba(255, 255, 255, 0.6);
        padding-right: 48px;
    }
    
    body[data-page="contact"] .form-select:focus {
        color: #ffffff;
    }
    
    /* ===== FORM ERROR ===== */
    body[data-page="contact"] .form-error {
        font-size: 0.8125rem;
        color: #f87171;
        margin-top: 6px;
        min-height: 0;
    }
    
    /* ===== SUBMIT BUTTON ===== */
    body[data-page="contact"] .btn-submit {
        width: 100%;
        height: 56px;
        padding: 0 24px;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 14px;
        justify-content: center;
        margin-top: 8px;
        background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
        color: #000000;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.12);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    body[data-page="contact"] .btn-submit:active {
        transform: scale(0.98);
    }
    
    /* ===== MESSAGE ALERT ===== */
    body[data-page="contact"] .message-alert {
        margin-bottom: 20px;
        padding: 14px 18px;
        border-radius: 12px;
    }
    
    body[data-page="contact"] .alert-content {
        font-size: 0.9375rem;
        line-height: 1.5;
    }
    
    /* ===== INFO SIDEBAR ===== */
    body[data-page="contact"] .contact-info-sidebar {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding-top: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* ===== INFO CARD ===== */
    body[data-page="contact"] .info-card {
        padding: 20px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    body[data-page="contact"] .info-card-title {
        font-size: 0.9375rem;
        margin-bottom: 12px;
        color: #ffffff;
        font-weight: 600;
    }
    
    body[data-page="contact"] .info-card-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    body[data-page="contact"] .info-link,
    body[data-page="contact"] .info-text {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.6);
    }
    
    body[data-page="contact"] .info-link {
        text-decoration: none;
    }
    
    /* ===== WORKING HOURS ===== */
    body[data-page="contact"] .info-hours {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px 0 0;
        gap: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    body[data-page="contact"] .hours-label {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
    }
    
    body[data-page="contact"] .hours-value {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 600;
    }
}

/* ===== SMALL MOBILE (480px and below) ===== */
@media (max-width: 480px) {
    
    body[data-page="contact"] .contact-hero {
        min-height: 240px;
        padding: 70px 0 50px;
    }
    
    body[data-page="contact"] .contact-hero-glow {
        width: 280px;
        height: 220px;
        top: -60px;
    }
    
    body[data-page="contact"] .contact-hero-content {
        padding: 0 16px;
    }
    
    body[data-page="contact"] .contact-hero-title {
        font-size: clamp(1.375rem, 6vw, 1.875rem);
    }
    
    body[data-page="contact"] .contact-hero-subtitle {
        font-size: 0.875rem;
    }
    
    body[data-page="contact"] .contact-main .container {
        padding: 0 14px;
    }
    
    body[data-page="contact"] .contact-form-card {
        padding: 24px 16px;
        border-radius: 14px;
    }
    
    body[data-page="contact"] .form-group {
        margin-bottom: 16px;
    }
    
    body[data-page="contact"] .form-input,
    body[data-page="contact"] .form-select {
        height: 52px;
        padding: 0 16px;
        font-size: 0.9375rem;
        border-radius: 10px;
    }
    
    body[data-page="contact"] .form-textarea {
        padding: 14px 16px;
        font-size: 0.9375rem;
        min-height: 120px;
        border-radius: 10px;
    }
    
    body[data-page="contact"] .btn-submit {
        height: 52px;
        font-size: 0.9375rem;
        border-radius: 12px;
    }
    
    body[data-page="contact"] .info-card {
        padding: 18px;
        border-radius: 12px;
    }
    
    body[data-page="contact"] .info-card-title {
        font-size: 0.875rem;
    }
    
    body[data-page="contact"] .info-link,
    body[data-page="contact"] .info-text {
        font-size: 0.8125rem;
    }
}