/**
 * HİSSİYAD — Global Mobile Responsive CSS v1.0
 * Safari & Chrome uyumlu, tüm sayfalar için mobil optimizasyon
 *
 * Breakpoints:
 *   - 1024px: Tablet landscape
 *   - 768px:  Tablet / mobile boundary (primary)
 *   - 480px:  Small phones
 *   - 360px:  Ultra-small phones (iPhone SE, Galaxy S5)
 *
 * @package HİSSİYAD
 */

/* ═══════════════════════════════════════════
   GLOBAL RESETS & BASE MOBILE RULES
   ═══════════════════════════════════════════ */

/* Prevent iOS zoom on inputs (MUST be 16px+) */
@media(max-width:768px){
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select{
        font-size:16px !important;
    }
}

/* Safe area insets for notched phones (iPhone X+, Dynamic Island) */
@supports(padding:max(0px)){
    body{
        padding-left:env(safe-area-inset-left);
        padding-right:env(safe-area-inset-right);
    }
}

/* Smooth scrolling for iOS */
* {
    -webkit-tap-highlight-color:rgba(180,128,82,0.15);
}

/* Prevent overscroll bounce on iOS */
html{
    overscroll-behavior:none;
}

/* Reduced motion preference */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* Touch-friendly minimum sizes */
@media(max-width:768px){
    button,
    a.btn,
    .btn,
    [role="button"],
    input[type="submit"],
    input[type="button"]{
        min-height:44px;
    }
}

/* ═══════════════════════════════════════════
   NAVIGATION FIXES
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    /* Navbar safe area for notched phones */
    nav{
        padding-top:max(0.6rem, env(safe-area-inset-top)) !important;
        padding-left:max(1rem, env(safe-area-inset-left)) !important;
        padding-right:max(1rem, env(safe-area-inset-right)) !important;
    }

    /* Hamburger touch-friendly */
    .hamburger{
        min-width:44px !important;
        min-height:44px !important;
        padding:10px !important;
        display:flex !important;
    }

    /* Mobile menu full screen with safe areas */
    .mobile-menu{
        padding-top:max(80px, calc(env(safe-area-inset-top) + 60px));
        padding-bottom:max(20px, env(safe-area-inset-bottom));
        padding-left:env(safe-area-inset-left);
        padding-right:env(safe-area-inset-right);
        z-index:1000; /* Same level as nav to fix z-index stacking */
    }

    /* Mobile menu links touch-friendly */
    .mobile-menu a{
        padding:0.6rem 1rem;
        min-height:44px;
        display:inline-flex;
        align-items:center;
    }

    /* User dropdown mobile improvements */
    .nav-user-dropdown{
        position:fixed !important;
        top:auto !important;
        bottom:0 !important;
        left:0 !important;
        right:0 !important;
        border-radius:16px 16px 0 0 !important;
        max-height:60vh;
        z-index:1001 !important;
        padding:0.8rem 0 !important;
        box-shadow:0 -8px 30px rgba(0,0,0,0.15) !important;
    }
    .nav-user-dropdown a{
        padding:0.9rem 1.5rem !important;
        font-size:1rem !important;
        min-height:48px;
        display:flex;
        align-items:center;
    }

    /* Notification dropdown mobile bottom-sheet */
    .notif-dropdown{
        position:fixed !important;
        top:auto !important;
        bottom:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        max-width:100% !important;
        border-radius:16px 16px 0 0 !important;
        max-height:70vh;
        z-index:1002 !important;
    }
    .nd-item{
        padding:14px 18px !important;
        min-height:48px;
    }
}

/* ═══════════════════════════════════════════
   INDEX PAGE FIXES
   ═══════════════════════════════════════════ */

/* Fix feed tabs 100vw overflow */
@media(max-width:768px){
    .feed-tabs{
        max-width:100% !important;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }
    .feed-tabs::-webkit-scrollbar{display:none}
}

/* Share panel fix: centered on mobile */
@media(max-width:480px){
    .share-panel{
        max-width:100% !important;
        border-radius:16px 16px 0 0;
        padding-bottom:max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
    }
    .share-options{
        gap:0.8rem;
        flex-wrap:wrap;
    }
    .share-icon{
        width:46px;
        height:46px;
    }
}

/* Quote modal mobile */
@media(max-width:480px){
    .quote-modal{
        width:95% !important;
        max-width:none !important;
        padding:1rem !important;
    }
    .quote-modal-overlay{
        padding:0.5rem !important;
    }
}

/* AI modal mobile */
@media(max-width:480px){
    .ai-modal{
        width:95% !important;
        max-width:none !important;
        padding:0.8rem !important;
        max-height:85vh !important;
    }
}

/* Visitor counter + Toast no-overlap */
@media(max-width:768px){
    .visitor-counter{
        display:none !important;
    }
    .toast{
        bottom:90px !important;
        left:16px !important;
        right:16px !important;
        transform:translateY(100px) !important;
        max-width:none !important;
        padding:0.8rem 1.2rem !important;
        font-size:0.85rem !important;
    }
    .toast.show{
        transform:translateY(0) !important;
    }
}

/* Image aspect ratio for responsive */
@media(max-width:480px){
    .fc-article-img{
        height:auto !important;
        aspect-ratio:16/9;
        max-height:200px;
    }
}

/* Composer action buttons fix for small screens */
@media(max-width:360px){
    .composer-action-btn{
        font-size:0.7rem !important;
        padding:0.3rem 0.4rem !important;
        min-height:40px !important;
    }
    .feed-tab{
        padding:0.6rem 0.5rem !important;
        font-size:0.72rem !important;
    }
    .fc-article-title{
        font-size:1rem !important;
    }
    .fc-article-body{
        padding:0.7rem 0.8rem !important;
    }
    .hero-theme-name{
        font-size:1.15rem !important;
    }
}

/* ═══════════════════════════════════════════
   POST PAGE FIXES
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    /* Hero: reduce height */
    .post-hero{
        height:50vh !important;
        min-height:300px !important;
    }
    /* Post body padding */
    .post-body{
        padding:1.5rem 1.2rem !important;
    }
    /* Comment section better padding */
    .comments-section{
        padding:1.5rem 1rem !important;
    }
    /* Inline reply reduce margin */
    .comment-reply-item,
    .inline-reply-box{
        margin-left:2rem !important;
    }
    /* Comment textarea smaller on mobile */
    .comment-textarea{
        min-height:80px !important;
    }
    /* Interaction bar */
    .interaction-inner{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:0.8rem !important;
    }
    /* Author box mobile */
    .author-box{
        flex-direction:column !important;
        text-align:center !important;
        gap:1rem !important;
    }
    .author-box .author-avatar{
        width:70px !important;
        height:70px !important;
    }
    /* Like/Follow/Favorite buttons bigger touch targets */
    .like-btn,
    .post-follow-btn{
        min-height:44px !important;
        padding:0.5rem 1rem !important;
    }
    /* Related posts single column with less gap */
    .related-grid{
        grid-template-columns:1fr !important;
        gap:1rem !important;
    }
    .related-card img{
        height:160px !important;
    }
    /* Share buttons */
    .share-btn{
        width:44px !important;
        height:44px !important;
    }
    /* Toast above bottom nav */
    .toast{
        bottom:80px !important;
    }
    /* Progress bar under mobile nav */
    .progress-bar{
        top:56px !important;
    }
    /* Navigation prev/next */
    .post-navigation{
        grid-template-columns:1fr !important;
    }
    .nav-post{
        padding:1.2rem !important;
    }
    /* Poetry content */
    .poetry-content{
        padding:1rem 0.8rem !important;
        font-size:1.05rem !important;
    }
}

@media(max-width:480px){
    .post-hero{
        height:40vh !important;
        min-height:250px !important;
    }
    .post-hero-title{
        font-size:1.4rem !important;
    }
    .post-hero-content{
        padding:1.2rem 1rem !important;
    }
    .post-body{
        padding:1.2rem 0.9rem !important;
    }
    .article-content p:first-of-type::first-letter{
        font-size:2.2rem !important;
    }
    .comments-section{
        padding:1rem 0.8rem !important;
    }
    .comment-reply-item,
    .inline-reply-box{
        margin-left:1.5rem !important;
    }
    /* Inline reply send button */
    .inline-reply-send{
        min-width:36px !important;
        min-height:36px !important;
        padding:6px 10px !important;
    }
    /* Comment delete button */
    .comment-delete{
        min-height:32px !important;
        padding:4px 8px !important;
    }
}

@media(max-width:360px){
    .post-hero-title{
        font-size:1.2rem !important;
    }
    .post-body{
        padding:1rem 0.8rem !important;
    }
    .related-card img{
        height:130px !important;
    }
}

/* ═══════════════════════════════════════════
   AKIŞ (FEED) PAGE FIXES
   ═══════════════════════════════════════════ */

@media(max-width:960px){
    .akis-layout{
        grid-template-columns:1fr !important;
    }
    .akis-sidebar{
        display:none !important;
    }
}

@media(max-width:768px){
    .akis-layout{
        margin-top:65px !important;
        padding:0 !important;
    }
    .feed-card-inner{
        padding:1rem !important;
    }
    /* Action buttons touch-friendly */
    .feed-action-btn{
        min-height:44px !important;
        min-width:44px !important;
        padding:6px 10px !important;
    }
    /* Mood buttons */
    .mood-btn{
        padding:6px 12px !important;
        font-size:0.78rem !important;
        min-height:36px !important;
    }
    /* Comment input touch-friendly */
    .comment-input{
        padding:10px 14px !important;
        font-size:0.9rem !important;
        min-height:44px !important;
    }
}

@media(max-width:480px){
    .feed-card-inner{
        padding:0.8rem !important;
    }
    .article-embed-img{
        height:120px !important;
    }
    .composer-textarea{
        font-size:0.95rem !important;
    }
}

/* ═══════════════════════════════════════════
   KEŞFET (DISCOVER) PAGE FIXES
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    .kesfet-hero{
        padding:1.5rem 1rem !important;
    }
    .kesfet-hero h1{
        font-size:1.8rem !important;
    }
    /* Post grid */
    .post-grid{
        grid-template-columns:1fr 1fr !important;
        gap:0.8rem !important;
    }
    /* Rising creators strip */
    .rising-chip{
        min-width:160px !important;
    }
    /* Section header wrapping */
    .section-header{
        flex-wrap:wrap !important;
        gap:0.5rem !important;
    }
    /* Mood chips scroll */
    .mood-scroll{
        gap:0.4rem !important;
    }
    /* Post card image */
    .post-card .image{
        height:130px !important;
    }
}

@media(max-width:480px){
    .kesfet-hero{
        padding:1rem 0.8rem !important;
    }
    .kesfet-hero h1{
        font-size:1.5rem !important;
    }
    .post-grid{
        grid-template-columns:1fr !important;
        gap:0.6rem !important;
    }
    .post-card .image{
        height:160px !important;
    }
    .post-card-title{
        -webkit-line-clamp:2 !important;
        font-size:0.95rem !important;
    }
    .cat-grid{
        gap:0.4rem !important;
    }
    .cat-grid .cat-chip{
        font-size:0.78rem !important;
    }
    .rising-chip{
        min-width:140px !important;
    }
}

/* ═══════════════════════════════════════════
   PROFİL PAGE FIXES
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    .profile-hero{
        padding:2rem 1rem 1.5rem !important;
    }
    .profile-hero .profile-avatar{
        width:80px !important;
        height:80px !important;
    }
    .profile-name{
        font-size:1.6rem !important;
    }
    .profile-nav-inner{
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .profile-nav-inner::-webkit-scrollbar{display:none}
    .pnav-btn{
        white-space:nowrap !important;
        min-height:44px !important;
        padding:0.6rem 0.9rem !important;
    }
    .profile-content{
        padding:1.2rem 1rem !important;
    }
    .content-grid{
        grid-template-columns:1fr !important;
    }
    /* Follow card stack */
    .follow-card{
        gap:0.5rem !important;
    }
    /* Article card thumb shrink */
    .article-card-thumb{
        width:65px !important;
        height:65px !important;
    }
    /* Form inputs touch-friendly */
    .profile-content input,
    .profile-content textarea{
        padding:0.9rem 1rem !important;
        min-height:44px;
    }
}

@media(max-width:480px){
    .profile-hero{
        padding:1.5rem 0.8rem 1rem !important;
    }
    .profile-hero .profile-avatar{
        width:70px !important;
        height:70px !important;
    }
    .profile-name{
        font-size:1.4rem !important;
    }
    .pnav-btn{
        padding:0.5rem 0.7rem !important;
        font-size:0.82rem !important;
    }
    .article-card-thumb{
        width:55px !important;
        height:55px !important;
    }
}

/* ═══════════════════════════════════════════
   YAZAR (AUTHOR) PAGE FIXES
   ═══════════════════════════════════════════ */

@media(max-width:968px){
    .profile-columns{
        grid-template-columns:1fr !important;
    }
    .sticky-articles{
        position:static !important;
    }
}

@media(max-width:768px){
    .profile-hero{
        padding:2.5rem 1rem 2rem !important;
    }
    .profile-content{
        flex-direction:column !important;
        align-items:center !important;
        text-align:center !important;
    }
    .profile-hero .profile-avatar{
        width:90px !important;
        height:90px !important;
    }
    .profile-name{
        font-size:1.8rem !important;
    }
    .profile-inline-stats{
        justify-content:center !important;
    }
    .profile-bio{
        text-align:center !important;
        max-width:100% !important;
    }
    .profile-social{
        justify-content:center !important;
    }
    /* Support section */
    .support-section{
        padding:0 0.8rem 2rem !important;
    }
    .tier-grid{
        grid-template-columns:1fr !important;
    }
}

@media(max-width:480px){
    .profile-hero .profile-avatar{
        width:75px !important;
        height:75px !important;
    }
    .profile-name{
        font-size:1.5rem !important;
    }
    .profile-bio{
        -webkit-line-clamp:5 !important;
    }
    .profile-social a{
        width:40px !important;
        height:40px !important;
    }
}

/* ═══════════════════════════════════════════
   YAZI GÖNDER (POST EDITOR) PAGE FIXES
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    /* Reduce excessive padding */
    .page-header{
        padding:2.5rem 1rem !important;
        margin-top:60px !important;
    }
    .page-header h1{
        font-size:2rem !important;
    }
    .container{
        padding:1.5rem 1rem !important;
    }
    .editor-card{
        padding:1.5rem 1rem !important;
        border-radius:12px !important;
    }
    /* Form row single column */
    .form-row{
        grid-template-columns:1fr !important;
        gap:1rem !important;
    }
    /* Content editor mobile */
    .content-editor{
        min-height:250px !important;
    }
    /* Image buttons wrap */
    .img-buttons{
        flex-direction:column !important;
    }
    .img-btn{
        width:100% !important;
        text-align:center !important;
        min-height:44px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
    /* AI prompt row mobile */
    .ai-prompt-row{
        flex-direction:column !important;
    }
    .ai-prompt-row input{
        min-width:0 !important;
        width:100% !important;
    }
    /* Pexels grid 2 columns on mobile */
    #pexelsGrid{
        grid-template-columns:repeat(2,1fr) !important;
    }
    /* Submit buttons full width */
    .form-actions{
        flex-direction:column !important;
    }
    .form-actions .btn{
        width:100% !important;
    }
    /* Submission card stack */
    .submission-card{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:0.5rem !important;
    }
}

@media(max-width:480px){
    .page-header h1{
        font-size:1.6rem !important;
    }
    .container{
        padding:1rem 0.8rem !important;
    }
    .editor-card{
        padding:1.2rem 0.8rem !important;
    }
    .content-editor{
        min-height:200px !important;
    }
    /* Checkbox label wrapping */
    .copyright-label{
        font-size:0.82rem !important;
    }
}

/* ═══════════════════════════════════════════
   FOOTER FIXES
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    /* Newsletter form */
    .footer-newsletter{
        flex-direction:column !important;
        text-align:center !important;
        padding:1.5rem 1.2rem !important;
    }
    .footer-nl-form{
        width:100% !important;
        min-width:0 !important;
        flex-direction:column !important;
    }
    .footer-nl-btn{
        width:100% !important;
        min-height:44px !important;
        padding:12px 24px !important;
    }
    /* Footer links touch-friendly */
    .footer-section ul li a{
        padding:6px 0 !important;
        display:block;
        min-height:36px;
        line-height:24px;
    }
    /* Footer logo text */
    .footer-brand-logo{
        font-size:1.8rem !important;
    }
    /* Social links bigger */
    .footer-social-links a{
        width:44px !important;
        height:44px !important;
    }
    /* Contact icons bigger */
    .footer-contact-item svg{
        width:18px !important;
        height:18px !important;
    }
}

/* Cookie banner mobile fixes */
@media(max-width:768px){
    .cookie-banner{
        padding:16px !important;
        padding-bottom:max(16px, calc(env(safe-area-inset-bottom) + 12px)) !important;
    }
    .cookie-inner{
        flex-direction:column !important;
        gap:12px !important;
    }
    .cookie-text{
        font-size:13px !important;
        text-align:center;
    }
    .cookie-buttons{
        width:100%;
        display:flex !important;
        gap:8px !important;
    }
    .cookie-btn{
        flex:1 !important;
        min-height:44px !important;
        padding:10px 16px !important;
        font-size:13px !important;
    }
}

@media(max-width:360px){
    .cookie-text{
        font-size:12px !important;
    }
    .cookie-btn{
        padding:8px 12px !important;
        font-size:12px !important;
    }
}

/* ═══════════════════════════════════════════
   MODAL / OVERLAY GLOBAL FIXES
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    /* All modals: bottom sheet style */
    .modal,
    .popup-modal,
    [class*="modal"]{
        max-height:85vh !important;
        overflow-y:auto !important;
    }
}

@media(max-width:480px){
    /* Full-width modals on small phones */
    .modal-content,
    .popup-content,
    [class*="modal-content"]{
        width:95% !important;
        max-width:none !important;
    }
}

/* ═══════════════════════════════════════════
   GLOBAL TYPOGRAPHY MOBILE
   ═══════════════════════════════════════════ */

@media(max-width:480px){
    h1{font-size:clamp(1.5rem, 6vw, 2.2rem) !important}
    h2{font-size:clamp(1.3rem, 5vw, 1.8rem) !important}
    h3{font-size:clamp(1.1rem, 4vw, 1.5rem) !important}
}

@media(max-width:360px){
    body{
        font-size:14px !important;
    }
    h1{font-size:clamp(1.3rem, 5.5vw, 1.8rem) !important}
    h2{font-size:clamp(1.1rem, 4.5vw, 1.5rem) !important}
}

/* ═══════════════════════════════════════════
   SAFARI-SPECIFIC FIXES
   ═══════════════════════════════════════════ */

/* Safari overscroll rubber band color */
@supports(-webkit-touch-callout:none){
    body{
        -webkit-overflow-scrolling:touch;
    }

    /* Fix Safari 100vh issue */
    @media(max-width:768px){
        .mobile-menu{
            height:100dvh !important;
            height:-webkit-fill-available;
        }
        .post-hero{
            height:50dvh !important;
        }
    }

    /* Fix Safari flex gap fallback */
    @supports not (gap:1rem){
        .fc-actions > *{
            margin-right:0.5rem;
        }
        .share-options > *{
            margin-right:1rem;
        }
    }
}

/* ═══════════════════════════════════════════
   LANDSCAPE ORIENTATION FIXES
   ═══════════════════════════════════════════ */

@media(orientation:landscape) and (max-height:500px){
    /* Reduce hero height on landscape phones */
    .hero-compact,
    .post-hero,
    .kesfet-hero{
        min-height:auto !important;
        max-height:60vh !important;
    }
    /* Mobile menu scrollable */
    .mobile-menu{
        overflow-y:auto !important;
        gap:0.8rem !important;
    }
    .mobile-menu a{
        font-size:1.2rem !important;
    }
    /* Reduce navbar */
    nav{
        padding-top:0.3rem !important;
        padding-bottom:0.3rem !important;
    }
}

/* ═══════════════════════════════════════════
   PRINT MEDIA (basic)
   ═══════════════════════════════════════════ */

@media print{
    nav,
    .hamburger,
    .mobile-menu,
    .cookie-banner,
    .visitor-counter,
    .share-panel,
    .share-overlay,
    .footer-newsletter,
    .back-to-top,
    .toast{
        display:none !important;
    }
    .post-body{
        padding:0 !important;
    }
    body{
        font-size:12pt;
    }
}

/* ═══════════════════════════════════════════
   GIRIS + KAYIT PAGES (Login/Register)
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    .auth-container,
    .login-container,
    .register-container{
        padding:1.5rem 1rem !important;
        max-width:100% !important;
    }
    .auth-card,
    .login-card,
    .register-card{
        padding:1.5rem 1rem !important;
        border-radius:12px !important;
    }
}

/* ═══════════════════════════════════════════
   ARA (SEARCH) PAGE FIXES
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    .search-container{
        padding:1rem !important;
    }
    .search-input-wrap{
        flex-direction:column !important;
    }
    .search-input-wrap input{
        font-size:16px !important;
        min-height:48px !important;
    }
    .search-results-grid{
        grid-template-columns:1fr !important;
    }
}

/* ═══════════════════════════════════════════
   ADMIN PANEL RESPONSIVE (bonus)
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    .admin-sidebar{
        transform:translateX(-100%) !important;
        position:fixed !important;
        z-index:1000 !important;
        width:260px !important;
    }
    .admin-sidebar.open{
        transform:translateX(0) !important;
    }
    .admin-main{
        margin-left:0 !important;
    }
    .admin-stats-grid{
        grid-template-columns:1fr 1fr !important;
    }
}

@media(max-width:480px){
    .admin-stats-grid{
        grid-template-columns:1fr !important;
    }
}

/* ═══════════════════════════════════════════
   PAYWALL CONTENT MOBILE
   ═══════════════════════════════════════════ */

@media(max-width:480px){
    .paywall-content{
        max-width:90vw !important;
        padding:1.5rem 1rem !important;
    }
}

/* ═══════════════════════════════════════════
   BACK TO TOP BUTTON SAFE AREA
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    .back-to-top{
        bottom:max(20px, calc(env(safe-area-inset-bottom) + 70px)) !important;
        right:max(16px, env(safe-area-inset-right)) !important;
    }
}

/* ═══════════════════════════════════════════
   IMAGE OPTIMIZATION
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    img{
        max-width:100%;
        height:auto;
    }
    /* Lazy loading visible indicator */
    img[loading="lazy"]{
        background:#f5f1e8;
        background:linear-gradient(90deg, #f5f1e8 25%, #ece8df 50%, #f5f1e8 75%);
        background-size:200% 100%;
    }
}

/* ═══════════════════════════════════════════
   SCROLL INDICATORS FOR OVERFLOW CONTAINERS
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    .mood-scroll,
    .rising-strip{
        /* Scroll fade indicators — only for decorative scroll containers.
           NOT applied to .feed-tabs or .profile-nav-inner because those
           contain clickable tab buttons that can appear at the edges. */
        -webkit-mask-image:linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
        mask-image:linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
    }
}

/* ═══════════════════════════════════════════
   YAZI-GONDER (WRITE) PAGE — MOBILE FIXES
   ═══════════════════════════════════════════ */

@media(max-width:768px){
    /* Reduce page header height */
    body .page-header{padding:2rem 5%;margin-top:56px}
    body .page-header h1{font-size:2rem}
    body .page-header p{font-size:.85rem}

    /* Container breathing room */
    body .container{padding:1.5rem 1rem 6rem}

    /* Stats row — smaller on mobile */
    body .stats-row{gap:.5rem}
    body .stat-card{padding:.8rem .5rem}
    body .stat-card .num{font-size:1.6rem}
    body .stat-card .label{font-size:.68rem;letter-spacing:.3px}

    /* Editor card */
    body .editor-card{padding:1.5rem 1rem;border-radius:14px}
    body .editor-card h2{font-size:1.5rem}
    body .form-row{grid-template-columns:1fr;gap:1rem}

    /* Image buttons wrap nicely */
    body .img-buttons{gap:.5rem}
    body .img-btn{padding:.5rem .8rem;font-size:.78rem}

    /* AI prompt row stack on mobile */
    body .ai-prompt-row{flex-direction:column;gap:.5rem}
    body .ai-prompt-row input{min-width:0;width:100%;font-size:16px!important}
    body .ai-prompt-row button{width:100%}

    /* Submissions */
    body .submission-card{flex-direction:column;align-items:flex-start;gap:.5rem;padding:1rem}
    body .sub-status{margin-left:0}
}

@media(max-width:375px){
    body .stat-card .num{font-size:1.3rem}
    body .stat-card .label{font-size:.62rem}
    body .stat-card{padding:.6rem .4rem}
    body .page-header h1{font-size:1.6rem}
    body .editor-card{padding:1.2rem .8rem}
}