/* ===================================
   GLOBAL SITTERS - RESPONSIVE CSS
   Mobil uyumluluk için ek CSS kuralları
   Mevcut tasarımı bozmadan sadece mobil sorunları düzeltir
   =================================== */

/* ===================================
   MOBİL HTML YAPISI CSS STİLLERİ
   =================================== */

/* Mobilde orijinal logo ve toggle button'ı gizle */
@media (max-width: 767px) {
    .navbar .logo-dark,
    .navbar .logo-light,
    .navbar .navbar-toggler {
        display: none !important;
    }
}

/* Mobil Header Wrapper */
.mobile-header-wrapper {
    width: 100%;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 0;
}

.mobile-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.mobile-logo-section {
    flex: 1;
}

.mobile-logo {
    height: 32px;
    width: auto;
}

.mobile-actions {
    display: flex;
    align-items: center;
}

.mobile-menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.mobile-menu-btn:hover {
    background-color: #f3f4f6;
}

.mobile-header-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mobile-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.15rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.mobile-btn-primary {
    background-color: #8b5cf6;
    color: white;
}

.mobile-btn-primary:hover {
    background-color: #7c3aed;
    color: white;
}

.mobile-btn-secondary {
    background-color: #6b7280;
    color: white;
}

.mobile-btn-secondary:hover {
    background-color: #4b5563;
    color: white;
}

.mobile-btn-secondary i {
    background-color: white;
}

/* Mobil Menü Wrapper */
.mobile-menu-wrapper {
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 1rem;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.mobile-menu-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.mobile-menu-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #6b7280;
    transition: all 0.2s ease;
}

.mobile-menu-close:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-item {
    border-bottom: 1px solid #f3f4f6;
}

.mobile-menu-item:last-child {
    border-bottom: none;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.mobile-menu-link:hover {
    color: #8b5cf6;
}

.mobile-menu-link i {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

/* Mobil Hero Wrapper */
.mobile-hero-wrapper {
    padding: 0 1rem;
}

/* Mobil Search Form */
.mobile-search-form {
    margin-top: 1.5rem;
}

.mobile-search-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.mobile-search-grid .col-span-12 {
    grid-column: span 12 / span 12 !important;
}

.trending-cities-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Dark Mode Mobil Düzenlemeler */
.dark .mobile-header-wrapper {
    background: #1f2937;
    border-bottom-color: #374151;
}

.dark .mobile-logo {
    filter: brightness(0) invert(1);
}

.dark .mobile-menu-wrapper {
    background: #1f2937;
    border-top-color: #374151;
}

.dark .mobile-menu-header {
    border-bottom-color: #374151;
}

.dark .mobile-menu-title {
    color: #f9fafb;
}

.dark .mobile-menu-close {
    color: #9ca3af;
}

.dark .mobile-menu-close:hover {
    background-color: #374151;
    color: #d1d5db;
}

.dark .mobile-menu-item {
    border-bottom-color: #374151;
}

.dark .mobile-menu-link {
    color: #d1d5db;
}

.dark .mobile-menu-link:hover {
    color: #a78bfa;
}

/* ===================================
   MOBİL BREAKPOINT'LER
   =================================== */
@media (max-width: 767px) {
    /* Mobile First Approach */
}

@media (max-width: 575px) {
    /* Extra Small Devices */

    /* Header mobilde daha da küçült */
    .navbar {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .logo-dark, .logo-light {
        height: 32px !important;
    }

    /* Hero section mobilde daha da küçült */
    .py-64.md\\:py-48.lg\\:py-64 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Ana başlık mobilde daha da küçült */
    .text-3xl.sm\\:text-4xl.md\\:text-5xl {
        font-size: 1.375rem !important;
        line-height: 1.75rem !important;
        padding: 0 0.375rem !important;
    }

    /* Alt metin mobilde daha da küçült */
    .text-base.md\\:text-lg {
        font-size: 0.8125rem !important;
        padding: 0 0.375rem !important;
    }

    /* Search form mobilde daha da küçült */
    .main-search {
        padding: 0 0.375rem !important;
    }

    .registration-form .grid {
        gap: 0.625rem !important;
    }

    /* Form elemanları mobilde daha da küçült */
    .form-select {
        font-size: 0.8125rem !important;
        padding: 0.5625rem 0.6875rem !important;
    }

    /* Search butonu mobilde daha da küçült */
    .btn.w-full {
        padding: 0.8125rem !important;
        font-size: 0.8125rem !important;
    }

    /* Trending cities mobilde daha da küçült */
    .flex.flex-wrap.items-center.justify-center.gap-2 {
        gap: 0.375rem !important;
        padding: 0 0.375rem !important;
    }

    .flex.flex-wrap.items-center.justify-center.gap-2 li {
        font-size: 0.6875rem !important;
    }

    /* Container padding mobilde daha da azalt */
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Section padding mobilde daha da azalt */
    .py-20 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-12 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    /* Margin değerleri mobilde daha da azalt */
    .mb-6 {
        margin-bottom: 1.25rem !important;
    }

    .mb-8 {
        margin-bottom: 1.75rem !important;
    }

    .mt-6 {
        margin-top: 1.25rem !important;
    }

    .mt-8 {
        margin-top: 1.75rem !important;
    }
}

@media (max-width: 480px) {
    /* Very Small Devices */

    /* Header mobilde daha da küçült */
    .navbar {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .logo-dark, .logo-light {
        height: 30px !important;
    }

    /* Hero section mobilde daha da küçült */
    .py-64.md\\:py-48.lg\\:py-64 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Ana başlık mobilde daha da küçült */
    .text-3xl.sm\\:text-4xl.md\\:text-5xl {
        font-size: 1.125rem !important;
        line-height: 1.5rem !important;
        padding: 0 0.25rem !important;
    }

    /* Alt metin mobilde daha da küçült */
    .text-base.md\\:text-lg {
        font-size: 0.75rem !important;
        padding: 0 0.25rem !important;
    }

    /* Search form mobilde daha da küçült */
    .main-search {
        padding: 0 0.25rem !important;
    }

    .registration-form .grid {
        gap: 0.5rem !important;
    }

    /* Form elemanları mobilde daha da küçült */
    .form-select {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.625rem !important;
    }

    /* Search butonu mobilde daha da küçült */
    .btn.w-full {
        padding: 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Trending cities mobilde daha da küçült */
    .flex.flex-wrap.items-center.justify-center.gap-2 {
        gap: 0.25rem !important;
        padding: 0 0.25rem !important;
    }

    .flex.flex-wrap.items-center.justify-center.gap-2 li {
        font-size: 0.625rem !important;
    }

    /* Container padding mobilde daha da azalt */
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Section padding mobilde daha da azalt */
    .py-20 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-12 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Margin değerleri mobilde daha da azalt */
    .mb-6 {
        margin-bottom: 1rem !important;
    }

    .mb-8 {
        margin-bottom: 1.5rem !important;
    }

    .mt-6 {
        margin-top: 1rem !important;
    }

    .mt-8 {
        margin-top: 1.5rem !important;
    }
}

/* ===================================
   HEADER & NAVIGATION MOBİL DÜZELTMELERİ
   =================================== */

/* Top Bar - Mobilde gizle */
@media (max-width: 767px) {
    .hidden.md\\:block {
        display: none !important;
    }
}

/* Navbar - Mobil düzenlemeler */
@media (max-width: 767px) {
    .navbar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .navbar .container-fluid {
        padding: 0;
    }

    /* Logo boyutu mobilde küçült */
    .logo-dark, .logo-light {
        height: 35px !important;
    }

    /* Mobil menü butonları düzenle */
    .navbar-toggler {
        padding: 0.5rem !important;
        margin-right: 0 !important;
    }

    /* Mobil menü açıldığında */
    .navbar-res {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
        z-index: 50 !important;
    }

    /* Mobil menü linkleri */
    .navbar-res ul li {
        border-bottom: 1px solid #f3f4f6 !important;
        width: 100% !important;
    }

    .navbar-res ul li a {
        padding: 1rem 1.5rem !important;
        display: block !important;
        width: 100% !important;
    }

    /* Header butonları mobilde düzenle */
    .header-button {
        width: auto !important;
        margin-right: 0 !important;
    }

    .header-button .buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .header-button .buttons a {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap !important;
    }
}

/* ===================================
   HERO SECTION & SEARCH FORM MOBİL DÜZELTMELERİ
   =================================== */

@media (max-width: 767px) {
    /* Hero section padding mobilde azalt */
    .py-64.md\\:py-48.lg\\:py-64 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* Ana başlık mobilde küçült */
    .text-3xl.sm\\:text-4xl.md\\:text-5xl {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
        padding: 0 1rem !important;
    }

    /* Alt metin mobilde düzenle */
    .text-base.md\\:text-lg {
        font-size: 1rem !important;
        padding: 0 1rem !important;
    }

    /* Search form mobilde düzenle */
    .main-search {
        padding: 0 1rem !important;
    }

    .registration-form .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Form elemanları mobilde tam genişlik */
    .filter-search-form {
        width: 100% !important;
    }

    .form-select {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }

    /* Search butonu mobilde tam genişlik */
    .btn.w-full {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
    }

    /* Trending cities mobilde düzenle */
    .flex.flex-wrap.items-center.justify-center.gap-2 {
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding: 0 1rem !important;
    }
}

/* ===================================
   GRID SYSTEM MOBİL DÜZELTMELERİ
   =================================== */

@media (max-width: 767px) {
    /* Grid kolonları mobilde tek sütun */
    .col-span-12.xl\\:col-span-2 {
        grid-column: span 12 / span 12 !important;
    }

    .col-span-12.xl\\:col-span-3 {
        grid-column: span 12 / span 12 !important;
    }

    .col-span-12.xl\\:col-span-4 {
        grid-column: span 12 / span 12 !important;
    }

    .col-span-12.xl\\:col-span-6 {
        grid-column: span 12 / span 12 !important;
    }

    .col-span-12.xl\\:col-span-8 {
        grid-column: span 12 / span 12 !important;
    }

    .col-span-12.xl\\:col-span-9 {
        grid-column: span 12 / span 12 !important;
    }

    .col-span-12.xl\\:col-span-10 {
        grid-column: span 12 / span 12 !important;
    }

    /* Grid gap mobilde azalt */
    .gap-y-10.lg\\:gap-10 {
        gap: 1.5rem !important;
    }

    .gap-y-5.lg\\:gap-2 {
        gap: 1rem !important;
    }
}

/* ===================================
   BUTTON & FORM ELEMENT MOBİL DÜZELTMELERİ
   =================================== */

@media (max-width: 767px) {
    /* Butonlar mobilde tam genişlik */
    .btn {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }

    /* Form input'ları mobilde düzenle */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* iOS zoom'u engelle */
        padding: 0.75rem !important;
        border-radius: 0.5rem !important;
    }

    /* Dropdown menüler mobilde düzenle */
    .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* ===================================
   TYPOGRAPHY MOBİL DÜZELTMELERİ
   =================================== */

@media (max-width: 767px) {
    /* Başlık boyutları mobilde küçült */
    h1 {
        font-size: 1.75rem !important;
        line-height: 2rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    h4 {
        font-size: 1.125rem !important;
        line-height: 1.75rem !important;
    }

    /* Paragraf boyutları mobilde düzenle */
    p {
        font-size: 0.875rem !important;
        line-height: 1.5rem !important;
    }

    /* Link boyutları mobilde düzenle */
    a {
        font-size: 0.875rem !important;
    }
}

/* ===================================
   SPACING & PADDING MOBİL DÜZELTMELERİ
   =================================== */

@media (max-width: 767px) {
    /* Container padding mobilde azalt */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Section padding mobilde azalt */
    .py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .py-12 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Margin değerleri mobilde azalt */
    .mb-6 {
        margin-bottom: 1.5rem !important;
    }

    .mb-8 {
        margin-bottom: 2rem !important;
    }

    .mt-6 {
        margin-top: 1.5rem !important;
    }

    .mt-8 {
        margin-top: 2rem !important;
    }
}

/* ===================================
   CARD & COMPONENT MOBİL DÜZELTMELERİ
   =================================== */

@media (max-width: 767px) {
    /* Card'lar mobilde tam genişlik */
    .card {
        margin: 0.5rem 0 !important;
        border-radius: 0.75rem !important;
    }

    /* Job list item'ları mobilde düzenle */
    .job-list-item {
        width: 50px !important;
        height: 50px !important;
        font-size: 2rem !important;
    }

    /* Filter form mobilde düzenle */
    .filler-job-form {
        margin-bottom: 1rem !important;
    }

    .filter-job-input-box {
        width: 100% !important;
        padding: 0.75rem !important;
    }
}

/* ===================================
   MODAL & POPUP MOBİL DÜZELTMELERİ
   =================================== */

@media (max-width: 767px) {
    /* Modal boyutları mobilde düzenle */
    .modal .box-content {
        width: 95% !important;
        margin: 1rem !important;
    }

    /* Modal içeriği mobilde düzenle */
    .modal .p-10 {
        padding: 1.5rem !important;
    }

    .modal .p-12 {
        padding: 1.5rem !important;
    }

    /* Modal grid yapısı mobilde düzenle */
    .modal .grid-cols-12 .lg\\:col-span-6 {
        grid-column: span 12 / span 12 !important;
    }
}

/* ===================================
   UTILITY CLASSES MOBİL DÜZELTMELERİ
   =================================== */

@media (max-width: 767px) {
    /* Hidden class'ları mobilde düzenle */
    .lg\\:hidden {
        display: block !important;
    }

    .lg\\:block {
        display: none !important;
    }

    .xl\\:block {
        display: none !important;
    }

    /* Flex direction mobilde düzenle */
    .lg\\:flex-row {
        flex-direction: column !important;
    }

    /* Text alignment mobilde düzenle */
    .lg\\:text-left {
        text-align: center !important;
    }

    .lg\\:items-start {
        align-items: center !important;
    }
}

/* ===================================
   DARK MODE MOBİL DÜZELTMELERİ
   =================================== */

@media (max-width: 767px) {
    /* Dark mode'da mobilde ek düzenlemeler */
    .dark .navbar-res {
        background: #1f2937 !important;
        border-top-color: #374151 !important;
    }

    .dark .navbar-res ul li {
        border-bottom-color: #374151 !important;
    }

    .dark .navbar-res ul li a {
        color: #d1d5db !important;
    }

    .dark .navbar-res ul li a:hover {
        background-color: #374151 !important;
        color: white !important;
    }
}

/* ===================================
   BODY SCROLL CONTROL
   =================================== */

.overflow-hidden {
    overflow: hidden !important;
}

/* ===================================
   TOUCH DEVICE OPTIMIZASYONLARI
   =================================== */

@media (max-width: 767px) {
    /* Touch target boyutları */
    button, a, input, select {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Hover efektleri mobilde kaldır */
    .hover\\:bg-gray-50:hover,
    .hover\\:bg-violet-600:hover,
    .hover\\:bg-orange-600:hover {
        background-color: inherit !important;
    }

    /* Focus states mobilde güçlendir */
    button:focus,
    a:focus,
    input:focus,
    select:focus {
        outline: 2px solid #8b5cf6 !important;
        outline-offset: 2px !important;
    }

    /* Touch feedback */
    button:active,
    a:active,
    input:active,
    select:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    /* Smooth scrolling mobilde kapat */
    html {
        scroll-behavior: auto !important;
    }

    /* Text selection mobilde düzenle */
    ::selection {
        background-color: #8b5cf6 !important;
        color: white !important;
    }

    ::-moz-selection {
        background-color: #8b5cf6 !important;
        color: white !important;
    }
}

@media (max-width: 767px) {
    /* Touch target boyutları */
    button, a, input, select {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Hover efektleri mobilde kaldır */
    .hover\\:bg-gray-50:hover,
    .hover\\:bg-violet-600:hover,
    .hover\\:bg-orange-600:hover {
        background-color: inherit !important;
    }

    /* Focus states mobilde güçlendir */
    button:focus,
    a:focus,
    input:focus,
    select:focus {
        outline: 2px solid #8b5cf6 !important;
        outline-offset: 2px !important;
    }
}

/* ===================================
   PERFORMANS OPTIMIZASYONLARI
   =================================== */

@media (max-width: 767px) {
    /* Animasyonları mobilde azalt */
    .transition-all {
        transition: none !important;
    }

    .duration-300,
    .duration-500 {
        transition-duration: 0.1s !important;
    }

    /* Transform efektlerini mobilde kaldır */
    .hover\:-translate-y-1\.5:hover {
        transform: none !important;
    }

    /* Nice Select mobilde düzenle */
    .nice-select {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }

    .nice-select .list {
        width: 100% !important;
        max-height: 200px !important;
    }

    /* Form validation mobilde düzenle */
    .is-invalid {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 1px #ef4444 !important;
    }

    /* Error message mobilde düzenle */
    .bg-red-500 {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        margin-top: 0.25rem !important;
    }
}

/* ===================================
   LANDSCAPE MOBILE OPTIMIZASYONLARI
   =================================== */

@media (max-width: 767px) and (orientation: landscape) {
    /* Landscape modda mobilde ek düzenlemeler */
    .py-64.md\\:py-48.lg\\:py-64 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .navbar {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .logo-dark, .logo-light {
        height: 30px !important;
    }

    .text-3xl.sm\\:text-4xl.md\\:text-5xl {
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
    }

    .text-base.md\\:text-lg {
        font-size: 0.75rem !important;
    }

    .main-search {
        padding: 0 0.5rem !important;
    }

    .registration-form .grid {
        gap: 0.5rem !important;
    }

    .form-select {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.625rem !important;
    }

    .btn.w-full {
        padding: 0.75rem !important;
        font-size: 0.75rem !important;
    }
}

/* ===================================
   HIGH DPI DISPLAY OPTIMIZASYONLARI
   =================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* High DPI ekranlarda daha keskin görüntü */
    .logo-dark, .logo-light {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    .uil, .mdi {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .navbar,
    .footer,
    .static-ads-button {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}