/* ============================================================
   ORBIS AJANS — mobile.css
   Comprehensive Mobile & Responsive Fix
   Applied: 2026-06-16
   ============================================================ */

/* ─── 0. BASE RESET ─── */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    scroll-snap-type: none;
    scroll-behavior: smooth;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img, svg, iframe {
    max-width: 100%;
}
video {
    display: block;
    max-width: 100%;
}

/* ─── 1. CUSTOM CURSOR (DIV-BASED FALLBACK) ─── */
#custom-cursor-dot {
    position: fixed;
    top: -20px;
    left: -20px;
    width: 14px;
    height: 14px;
    background-color: #1ed6c9;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px #1ed6c9, 0 0 24px rgba(30,214,201,0.4);
    display: none;
}
html.custom-cursor-active #custom-cursor-dot {
    display: block;
}
#custom-cursor-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 999998 !important;
}


/* ─── 2. HEADER — PC DEFAULT (unchanged) ─── */
/* The existing style.css handles PC header. We only fix mobile here. */

/* Scroll lock when mobile menu is open - works on iOS without breaking position:fixed */
body.menu-open {
    overflow: hidden;
    height: 100%;
    position: fixed;
    width: 100%;
}

/* ─── 3. HEADER — MOBILE/TABLET ≤ 991px ─── */
@media (max-width: 991px) {
    /* White header on mobile */
    header,
    header.scrolled {
        background: #ffffff !important;
        height: 64px !important;
        padding: 0 20px !important;
        box-shadow: 0 2px 20px rgba(0, 158, 154, 0.1) !important;
        border-bottom: 1px solid rgba(0, 158, 154, 0.12) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    header .logo img,
    header.scrolled .logo img {
        height: 40px !important;
        width: auto !important;
    }

    header nav {
        display: none !important;
    }

    /* Hide CTA button on mobile — it's inside mobile menu */
    header .header-cta {
        display: none !important;
    }

    /* Hamburger - controlled by header.php inline style */
    #hamburger-btn {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        z-index: 999999 !important;
    }

    /* SVG hamburger icon */
    #hamburger-svg {
        display: block !important;
        width: 32px !important;
        height: 32px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #hamburger-svg line {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        transform-origin: center !important;
    }

    #hamburger-btn.active #ham-line-1 {
        transform: translateY(6px) rotate(45deg) !important;
    }
    #hamburger-btn.active #ham-line-2 {
        opacity: 0 !important;
    }
    #hamburger-btn.active #ham-line-3 {
        transform: translateY(-6px) rotate(-45deg) !important;
    }
}

/* ─── 4. MOBILE MENU — WHITE THEME ─── */
@media (max-width: 991px) {
    .mobile-menu {
        background: #ffffff !important;
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 64px) !important;
        height: calc(100dvh - 64px) !important;
        z-index: 1005 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 20px 20px 40px !important;
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        border-top: 1px solid rgba(0, 158, 154, 0.12) !important;
    }
    .mobile-menu.open {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-menu__links {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .mobile-menu__links a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        color: #1a202c !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(0, 158, 154, 0.1) !important;
        text-decoration: none !important;
        transition: color 0.2s ease, background 0.2s ease !important;
    }
    .mobile-menu__links a:hover,
    .mobile-menu__links a.active {
        color: #009E9A !important;
        background: rgba(0, 158, 154, 0.04) !important;
    }

    /* Mobile menu CTA button */
    .mobile-menu .mobile-menu-cta,
    .mobile-menu__links .mobile-menu-cta {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        background: #009E9A !important;
        color: #ffffff !important;
        padding: 14px 20px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        text-decoration: none !important;
        margin-top: 20px !important;
        border: none !important;
    }

    /* Mobile accordion */
    .mobile-accordion {
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 158, 154, 0.1) !important;
    }
    .mobile-accordion__toggle {
        color: #1a202c !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        padding: 14px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        border-bottom: none !important;
    }
    .mobile-accordion__toggle svg {
        stroke: #009E9A !important;
    }
    .mobile-accordion__content a {
        color: #4a5568 !important;
    }
    .mobile-accordion__content a:hover {
        color: #009E9A !important;
    }
}

/* ─── 5. PAGE PADDING (header offset) ─── */
/* PC header = 80px, mobile header = 64px */
@media (max-width: 991px) {
    .page-hero {
        padding-top: 90px !important;
        padding-bottom: 40px !important;
        min-height: auto !important;
    }
    /* Label badges / pills — make sure they don't clip under header */
    .section__header .label,
    .page-hero .label {
        margin-top: 0 !important;
    }
}

/* ─── 6. SCROLL — NO HIJACKING ON MOBILE ─── */
@media (max-width: 991px) {
    /* Kill sticky positioning for scroll-animated containers */
    .story-container {
        min-height: auto !important;
        height: auto !important;
    }
    .story-sticky {
        position: static !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        display: block !important;
    }
    .story-inner {
        position: static !important;
        height: auto !important;
        display: block !important;
    }
    .story-content {
        display: block !important;
        transform: none !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .story-stage {
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        margin-bottom: 32px !important;
        padding: 24px 16px !important;
        height: auto !important;
        min-height: auto !important;
        border-bottom: 1px solid rgba(0, 158, 154, 0.1) !important;
    }
    .story-stage:last-child {
        border-bottom: none !important;
    }
    .story-visual,
    .story-progress {
        display: none !important;
    }

    /* Horizontal scroll wrapper — disable sticky transform-based scroll */
    .horizontal-scroll-wrapper {
        height: auto !important;
        min-height: auto !important;
    }
    .horizontal-scroll-sticky {
        position: static !important;
        height: auto !important;
        min-height: auto !important;
    }
    .horizontal-scroll-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        transform: none !important;
        overflow: visible !important;
        height: auto !important;
        gap: 20px !important;
        padding: 0 16px 20px !important;
    }
}

/* ─── 7. SERVICES — MOBILE CARDS ─── */
@media (max-width: 991px) {
    .card-service,
    .horizontal-scroll-container .card-service {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }
    .card-service__icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 14px !important;
    }
    .card-service__icon svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #009E9A !important;
    }
    .card-service h3 {
        font-size: 17px !important;
        margin-bottom: 8px !important;
    }
    .card-service p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
    }
    /* Disable 3D tilt on mobile */
    .tilt-card {
        transform: none !important;
        perspective: none !important;
    }
}

/* ─── 8. WHY US (NEDEN BİZ) — MOBILE ─── */
@media (max-width: 991px) {
    .why-story-container {
        height: auto !important;
        min-height: auto !important;
        padding: 40px 16px !important;
    }
    .why-story-sticky {
        position: static !important;
        height: auto !important;
    }
    .why-story-header {
        position: static !important;
        top: auto !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }
    .why-story-cards {
        position: static !important;
        height: auto !important;
        margin-top: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        max-width: 100% !important;
    }
    .why-card {
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .why-card__inner {
        padding: 20px 18px !important;
    }
    .why-card__number {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .why-card__icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 12px !important;
    }
    .why-card__title {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    .why-card__desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .why-progress {
        display: none !important;
    }
}

/* ─── 9. PRICING CARDS — ALL CONTEXTS ─── */
@media (max-width: 991px) {
    /* Home page featured packages */
    .packages-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 0 !important;
    }
    .packages-list .card-pricing {
        width: 100% !important;
        max-width: 440px !important;
        min-width: unset !important;
        flex: none !important;
        box-sizing: border-box !important;
    }

    /* Pricing page & service page packages */
    .pricing-grid,
    [class*="pricing"] .grid-3,
    .card-pricing {
        width: 100% !important;
        max-width: 440px !important;
        min-width: unset !important;
        box-sizing: border-box !important;
    }

    /* Common card styles */
    .card-pricing {
        display: flex !important;
        flex-direction: column !important;
        padding: 28px 22px !important;
        margin: 0 auto !important;
        height: auto !important;
        min-height: auto !important;
    }
    .card-pricing__title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    .card-pricing__price {
        font-size: 32px !important;
        margin-bottom: 20px !important;
    }
    .card-pricing__features {
        margin-bottom: 24px !important;
    }
    .card-pricing__features li {
        font-size: 14px !important;
        padding: 6px 0 !important;
    }
    /* Popular badge visible */
    .card-pricing.popular::before {
        display: block !important;
    }

    /* Pricing tabs */
    .pricing-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 10px !important;
    }
    .pricing-tab-btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
}

/* ─── 10. TEAM CARDS ─── */
@media (max-width: 991px) {
    /* Home page: first 3 members in 2-column grid then wrap */
    .team-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        flex: none !important;
    }
    .team-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        flex: none !important;
    }
    /* Fix the enormous media area */
    .team-card__media {
        aspect-ratio: 3 / 4 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }
    .team-card__video,
    .team-card__img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }
    /* If no media — placeholder compact */
    .team-card__placeholder {
        height: 200px !important;
        min-height: auto !important;
    }
    .team-card__content {
        padding: 14px 12px !important;
    }
    .team-card__name {
        font-size: 15px !important;
    }
}
@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 11. TESTIMONIALS ─── */
@media (max-width: 991px) {
    /* Home page uses .grid-2 which becomes 1-col at 768px already */
    /* Testimonials page masonry */
    .testimonial-masonry {
        column-count: 1 !important;
        gap: 0 !important;
    }
    .card-testimonial {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        margin-bottom: 16px !important;
        box-sizing: border-box !important;
        break-inside: avoid !important;
    }
    .card-testimonial video {
        object-fit: cover !important;
    }
}

/* ─── 12. VIDEOS ─── */
/* No autoplay via CSS alone, but ensure layout is correct */
.custom-video-wrapper {
    width: 100% !important;
    overflow: hidden !important;
}
.custom-video-wrapper video {
    display: block !important;
    width: 100% !important;
    object-fit: cover !important;
    background: #000 !important;
}
/* Remove white space below videos */
video {
    vertical-align: top !important;
}
/* Office video wrapper */
@media (max-width: 991px) {
    /* Keep office video with correct aspect ratio */
    [style*="aspect-ratio: 9/16"] {
        aspect-ratio: 9/16 !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}

/* ─── 13. PAGE TOP BADGES (label pills) ─── */
/* Prevent them from hiding under header */
.page-hero .label,
.section__header .label {
    display: inline-flex !important;
}
@media (max-width: 991px) {
    /* Some pages use page-hero with absolute/sticky h3 or label */
    .page-hero {
        padding-top: 90px !important;
    }
}

/* ─── 14. HAKKIMIZDA — DEĞERLER CARDS ─── */
@media (max-width: 991px) {
    /* About page values section */
    .values-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 !important;
    }
    .values-wrapper .card,
    .values-wrapper > div {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
    }
    /* Generic about value cards detected by icon+text structure */
    .section--alt .grid-3 .card {
        min-height: auto !important;
        height: auto !important;
        padding: 24px 20px !important;
    }
}

/* ─── 15. GRIDS — MOBILE DEFAULTS ─── */
@media (max-width: 991px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}
@media (max-width: 991px) {
    /* Blog grid flex */
    .blog-grid-wrapper .grid-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    .card-blog {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
}

/* ─── 16. FOOTER — MOBILE ─── */
@media (max-width: 768px) {
    .footer__top {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
}

/* ─── 17. ADMIN PANEL — MOBILE ─── */
@media (max-width: 991px) {
    /* Admin sidebar */
    .admin-sidebar {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 9000 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
    }
    .admin-sidebar.open {
        left: 0 !important;
    }
    .admin-main,
    .admin-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }
    /* Admin forms */
    .admin-form .grid-2,
    .admin-form .form-grid {
        grid-template-columns: 1fr !important;
    }
    /* Admin tables */
    .admin-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    table {
        min-width: 600px !important;
    }
    /* Admin buttons */
    .admin-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}

/* ─── 18. UTILITY — NO HORIZONTAL OVERFLOW ─── */
@media (max-width: 991px) {
    .section,
    .container,
    main {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    /* Prevent any flex row from causing overflow */
    .hero-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .hero-buttons .btn-primary,
    .hero-buttons .btn-outline {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}


/* Reveal animations fallback for mobile to prevent stuck elements */
@media (max-width: 991px) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Cache bust: 2026-06-16T22:17:00 */

/* ============================================================
   RESPONSIVE HERO SECTION & COLLAGE GRID
   ============================================================ */
@media (max-width: 991px) {
    .hero-new-section {
        padding: 90px 0 40px 0 !important;
    }
    
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .hero-left-content {
        align-items: center !important;
        text-align: center !important;
    }
    
    .hero-left-content .hero-subtitle {
        margin: 0 auto 24px auto !important;
        font-size: 15px !important;
    }
    
    .hero-left-content .hero-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    
    .hero-left-content .btn-primary,
    .hero-left-content .btn-outline {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
    

    
    .collage-icon-box {
        display: none !important; /* Hide decorative floating icons on tablet and mobile */
    }
    
    .hide-on-mobile {
        display: none !important;
    }
    
    .hide-on-desktop {
        display: block !important;
    }
}