/*
 * Mekanjet Çerçevesiz Tasarım V1
 * Amaç: Kart görünümünü kaldırmak; işlevsel kontrolleri, medya alanlarını,
 * avatarları, butonları ve form alanlarını kullanılabilir halde korumak.
 *
 * Bu dosya mevcut mekanjet.css dosyasını silmez veya değiştirmez.
 * Yalnızca son katmanda güvenli görsel geçersiz kılmalar uygular.
 */

/* =========================================================
   1. GENEL SAYFA ZEMİNİ
========================================================= */

html,
body,
.app-shell,
.app-screen,
.auth-screen {
    background: #ffffff !important;
}

body {
    --mj-flat-divider: rgba(15, 23, 42, .09);
    --mj-flat-soft: #f7f8fa;
    --mj-flat-muted: #667085;
}

.app-shell,
main {
    max-width: 100% !important;
}

/* =========================================================
   2. GENEL KART KALDIRMA KATMANI
========================================================= */

.app-screen :is(
    .choice-card,
    .membership-card,
    .profile-page,
    .post-card,
    .panel-hero,
    .panel-stat-card,
    .create-post-card,
    .card-form,
    .profile-preview-card,
    .profile-detail-card,
    .message-thread-card,
    .message-detail-head,
    .reply-form,
    .profile-contact-card,
    .explore-hero,
    .explore-search,
    .business-card,
    .sponsor-hero,
    .sponsored-business-block,
    .sponsored-strip,
    .sponsor-profile-preview,
    .policy-hero,
    .policy-card,
    .policy-note-large,
    .policy-legal-card,
    .notification-card,
    .notification-item,
    .admin-card,
    .dashboard-card,
    .stat-card,
    .empty-state,
    .switch-card,
    .profile-detail-grid > div,
    .profile-address,
    .mj-feed-card,
    .mj-story-card,
    .mj-side-card,
    .mj-sponsored,
    .mj-profile-card,
    .mj-panel-card,
    .mjmsg-shell,
    .mjmsg-user-card
),
.auth-screen :is(
    .auth-card,
    .membership-card,
    .choice-card,
    .switch-card,
    .phone-preview
) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-screen [class$="-card"],
.auth-screen [class$="-card"],
.app-screen [class*=" card"],
.auth-screen [class*=" card"] {
    box-shadow: none !important;
}

/* Renkli tanıtım bloklarını da düz sayfa bölümüne çevir */
.app-screen :is(
    .panel-hero,
    .explore-hero,
    .sponsor-hero,
    .policy-hero,
    .create-post-card,
    .profile-preview-card,
    .profile-detail-card,
    .mj-profile-card,
    .mj-side-card,
    .mj-story-card
) {
    background-image: none !important;
}

/* =========================================================
   3. ÜST VE ALT MENÜ
========================================================= */

.topbar {
    border: 0 !important;
    border-bottom: 1px solid var(--mj-flat-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, .97) !important;
}

.top-icon-button,
.menu-toggle {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.nav-create-btn {
    background: linear-gradient(135deg, #ff385c, #7c5cff) !important;
}

.bottom-nav {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    border: 0 !important;
    border-top: 1px solid var(--mj-flat-divider) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: none !important;
}

.bottom-nav__item,
.bottom-nav__item.is-active {
    border-radius: 0 !important;
    background: transparent !important;
}

/* =========================================================
   4. AKIŞ VE GÖNDERİLER
========================================================= */

.feed-page,
.mj-feed-page {
    background: #fff !important;
}

.feed-list,
.mj-feed-list,
.panel-feed-list {
    gap: 0 !important;
}

.post-card {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mj-flat-divider) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

.post-card:first-child {
    border-top: 0 !important;
}

.post-card__header,
.post-actions,
.post-body,
.post-comments,
.post-footer-line {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.post-card__header,
.post-actions,
.post-body,
.post-comments {
    background: #fff !important;
}

.post-media,
.post-media img,
.post-media video,
.post-media-frame,
.post-media-item {
    border-radius: 0 !important;
}

.post-owner-tools,
.post-music-line,
.comments-preview,
.comment-item {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.post-owner-tools,
.comments-preview {
    border-right: 0 !important;
    border-left: 0 !important;
}

.icon-btn {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.post-badge,
.post-report-link {
    box-shadow: none !important;
}

/* Sponsorlu gönderiler de ayrı kart gibi görünmesin */
.mj-sponsored-row .post-card,
.sponsored-strip .post-card {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   5. PROFİL
========================================================= */

.profile-page,
.mj-profile,
.mj-profile-card {
    width: 100% !important;
    max-width: 920px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.profile-cover,
.mj-profile-cover {
    border-radius: 0 !important;
}

.profile-info,
.profile-stats,
.mj-profile-body,
.mj-profile-panel {
    background: #fff !important;
}

.profile-stats span,
.mini-tags span {
    border: 0 !important;
    box-shadow: none !important;
}

.profile-tabs,
.mj-profile-tabs {
    border-right: 0 !important;
    border-left: 0 !important;
}

.profile-tabs button,
.mj-profile-tabs button {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.profile-tile,
.mj-post-grid > *,
.mj-empty-grid > * {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mj-panel-card,
.profile-detail-card {
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--mj-flat-divider) !important;
}

/* =========================================================
   6. PANEL, FORM VE İÇERİK OLUŞTURMA
========================================================= */

.panel-page,
.create-post-page,
.edit-profile-page,
.policy-page,
.sponsor-page,
.sponsor-applications-page {
    background: #fff !important;
}

.panel-hero,
.create-post-card,
.card-form,
.profile-preview-card,
.profile-detail-card {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.panel-stat-grid {
    gap: 0 !important;
    border-top: 1px solid var(--mj-flat-divider) !important;
    border-bottom: 1px solid var(--mj-flat-divider) !important;
}

.panel-stat-card {
    border-right: 1px solid var(--mj-flat-divider) !important;
    padding: 18px !important;
}

.panel-stat-card:last-child {
    border-right: 0 !important;
}

.edit-profile-grid {
    gap: 28px !important;
}

.form-section-title,
.panel-section-head {
    border-bottom: 1px solid var(--mj-flat-divider) !important;
    padding-bottom: 14px !important;
}

/* Form alanları kullanılabilirlik için korunur; kart çevresi kaldırılır */
.profile-form input,
.profile-form select,
.profile-form textarea,
.form-stack input,
.form-stack select,
.form-stack textarea,
.post-create-form textarea,
.post-create-form input[type="file"],
.comment-form input,
.comment-form textarea,
.mj-feed-search input,
.feed-inline-search input {
    box-shadow: none !important;
}

/* Dosya/medya önizleme alanı kart değil çalışma alanı olarak kalır */
.upload-preview,
.media-upload-item,
.crop-stage,
.video-preview {
    box-shadow: none !important;
}

/* =========================================================
   7. KEŞFET, İŞLETMELER, SPONSOR VE POLİTİKA
========================================================= */

.explore-hero,
.explore-search,
.business-card,
.sponsor-hero,
.sponsored-business-block,
.sponsored-strip,
.sponsor-profile-preview,
.policy-hero,
.policy-card,
.policy-note-large,
.policy-legal-card {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.business-grid,
.mj-user-grid {
    gap: 0 !important;
}

.business-card,
.mjmsg-user-card {
    border-bottom: 1px solid var(--mj-flat-divider) !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.business-card-cover {
    border-radius: 0 !important;
}

/* =========================================================
   8. MESAJLAŞMA
========================================================= */

.mjmsg-page {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.mjmsg-shell {
    width: min(1180px, 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mjmsg-sidebar {
    border-right: 1px solid var(--mj-flat-divider) !important;
}

.mjmsg-thread,
.mjmsg-user-card {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mjmsg-thread.is-active {
    background: var(--mj-flat-soft) !important;
}

.mjmsg-chat-header,
.mjmsg-compose-wrap {
    box-shadow: none !important;
}

/* Mesaj balonları iletişim okunabilirliği için korunur */
.mjmsg-bubble {
    box-shadow: none !important;
}

/* =========================================================
   9. BİLDİRİMLER, BOŞ DURUMLAR VE UYARILAR
========================================================= */

.notification-card,
.notification-item,
.empty-state,
.empty-state.compact,
.mjmsg-empty-state,
.mj-feed-warning,
.flash-message {
    box-shadow: none !important;
}

.empty-state,
.empty-state.compact {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Uyarılar işlevsel olarak ayırt edilebilir kalır */
.flash-message,
.mjmsg-inline-alert,
.mj-feed-warning,
.panel-warning {
    border-radius: 8px !important;
}

/* =========================================================
   10. GİRİŞ VE KAYIT
========================================================= */

.auth-wrap {
    max-width: 720px !important;
}

.auth-card,
.auth-card.wide {
    max-width: 720px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.account-switch {
    gap: 0 !important;
    border-top: 1px solid var(--mj-flat-divider) !important;
    border-bottom: 1px solid var(--mj-flat-divider) !important;
}

.switch-card {
    border-right: 1px solid var(--mj-flat-divider) !important;
    padding: 18px !important;
}

.switch-card:last-child {
    border-right: 0 !important;
}

.switch-card.is-selected {
    background: #fff7f9 !important;
}

/* =========================================================
   11. MASAÜSTÜ / MOBİL DÜZEN
========================================================= */

@media (max-width: 760px) {
    .feed-page,
    .mj-feed-page,
    .profile-page,
    .mj-profile,
    .panel-page,
    .create-post-page,
    .edit-profile-page,
    .messages-page,
    .message-detail-page,
    .explore-page,
    .policy-page,
    .sponsor-page,
    .sponsor-applications-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .feed-page,
    .mj-feed-page {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .feed-head,
    .mj-feed-head,
    .mj-story-row,
    .story-row,
    .panel-page > :not(.post-card),
    .create-post-page > :not(.post-card),
    .edit-profile-page > :not(.post-card) {
        padding-right: 14px;
        padding-left: 14px;
    }

    .post-card {
        max-width: 100% !important;
    }

    .post-card__header {
        padding-right: 13px !important;
        padding-left: 13px !important;
    }

    .post-actions,
    .post-body,
    .post-comments {
        padding-right: 13px !important;
        padding-left: 13px !important;
    }

    .profile-page,
    .mj-profile-card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .profile-info,
    .profile-stats,
    .mj-profile-body,
    .mj-profile-panel {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .panel-stat-grid {
        grid-template-columns: 1fr !important;
    }

    .panel-stat-card {
        border-right: 0 !important;
        border-bottom: 1px solid var(--mj-flat-divider) !important;
    }

    .panel-stat-card:last-child {
        border-bottom: 0 !important;
    }

    .account-switch {
        grid-template-columns: 1fr !important;
    }

    .switch-card {
        border-right: 0 !important;
        border-bottom: 1px solid var(--mj-flat-divider) !important;
    }

    .switch-card:last-child {
        border-bottom: 0 !important;
    }

    .mjmsg-page,
    .mjmsg-shell,
    .mjmsg-sidebar,
    .mjmsg-content {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   12. ERİŞİLEBİLİRLİK
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .post-card,
    .business-card,
    .mjmsg-thread,
    .top-icon-button {
        transition: none !important;
    }
}


/* =========================================================
   13. TAM BEYAZ / KARTSIZ SON KATMAN
   Bu bölüm tüm sayfalarda kalan kutu, çerçeve, gölge ve gri zeminleri temizler.
========================================================= */
html,
body,
.site-shell,
.page-shell,
.app-shell,
.app-screen,
main,
.mj-feed-page,
.mj-feed-layout,
.mj-feed-main,
.mj-feed-sidebar,
.mj-feed-list,
.profile-page,
.create-post-page {
    background: #ffffff !important;
}

.mj-story-card,
.mj-side-card,
.mj-sponsored,
.mj-profile-card,
.post-card,
.post-owner-tools,
.comments-preview,
.notification-card,
.message-thread-card,
.message-detail-head,
.reply-form,
.create-post-card,
.dashboard-card,
.panel-card,
.profile-contact-card,
.profile-preview-card,
.profile-detail-card,
.empty-state {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

.mj-story-card,
.mj-side-card,
.mj-sponsored {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.mj-feed-layout {
    gap: 38px !important;
}

.post-card {
    border-bottom: 0 !important;
    margin-bottom: 28px !important;
}

.post-owner-tools,
.comments-preview {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.post-media,
.post-media-frame,
.post-media-item,
.post-media img,
.post-media video {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Form alanları kullanılabilirlik için kendi ince sınırlarını korur; dış kart oluşturmaz. */
input,
textarea,
select,
button {
    box-shadow: none;
}

@media (max-width: 900px) {
    .mj-feed-layout {
        gap: 0 !important;
    }
}

/* Paket 20.5 - Sosyal medya tipi büyük ve güçlü etkileşim ikonları */
.post-actions {
    min-height: 58px !important;
    padding: 8px 14px 6px !important;
    gap: 14px !important;
}

.post-actions .post-action-form {
    display: inline-flex !important;
    align-items: center !important;
}

.post-actions .icon-btn {
    width: auto !important;
    min-width: 44px !important;
    height: 46px !important;
    padding: 0 3px !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.post-actions .icon-btn:hover,
.post-actions .icon-btn:focus-visible {
    background: transparent !important;
    transform: scale(1.08) !important;
}

.post-actions .icon-btn:active {
    transform: scale(.9) !important;
}

.post-actions .action-icon {
    display: inline-flex !important;
    min-width: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    transform: scaleX(1.08) !important;
    -webkit-text-stroke: .35px currentColor;
}

.post-actions .icon-btn small {
    min-width: 10px !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.post-actions .post-like-btn.is-selected,
.post-actions .post-like-btn.is-selected small {
    color: #ff385c !important;
}

.post-actions .post-save-btn.is-selected,
.post-actions .post-save-btn.is-selected small {
    color: #0f172a !important;
}

.post-actions .js-share-btn {
    font-size: 30px !important;
    font-weight: 1000 !important;
}

@media (max-width: 640px) {
    .post-actions {
        min-height: 54px !important;
        padding: 5px 10px 4px !important;
        gap: 11px !important;
    }

    .post-actions .icon-btn {
        min-width: 41px !important;
        height: 44px !important;
    }

    .post-actions .action-icon {
        font-size: 27px !important;
    }
}


/* V7 - Fotoğrafı olmayan profiller için ortak kullanıcı simgesi */
.avatar:not(.has-avatar-image),
.mj-story-avatar:not(:has(img)),
.mj-side-avatar:not(:has(img)),
.mj-suggest-avatar:not(:has(img)),
.account-summary-avatar:not(:has(img)),
.business-avatar:not(:has(img)),
.mini-avatar:not(:has(img)),
.profile-avatar:not(:has(img)),
.message-avatar:not(:has(img)),
.mj-media-preview__avatar:not(:has(img)),
.story-head-avatar:not(:has(img)),
.story-viewer-avatar:not(:has(img)),
.mjstory-avatar:not(:has(img)) {
    position: relative !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    background: #eef1f5 !important;
}

.avatar:not(.has-avatar-image)::before,
.mj-story-avatar:not(:has(img))::before,
.mj-side-avatar:not(:has(img))::before,
.mj-suggest-avatar:not(:has(img))::before,
.account-summary-avatar:not(:has(img))::before,
.business-avatar:not(:has(img))::before,
.mini-avatar:not(:has(img))::before,
.profile-avatar:not(:has(img))::before,
.message-avatar:not(:has(img))::before,
.mj-media-preview__avatar:not(:has(img))::before,
.story-head-avatar:not(:has(img))::before,
.story-viewer-avatar:not(:has(img))::before,
.mjstory-avatar:not(:has(img))::before {
    content: "" !important;
    position: absolute !important;
    inset: 14% !important;
    display: block !important;
    background-color: #9aa0a6 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='22' r='14' fill='black'/%3E%3Cpath d='M8 58c0-13.255 10.745-24 24-24s24 10.745 24 24v2H8z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='22' r='14' fill='black'/%3E%3Cpath d='M8 58c0-13.255 10.745-24 24-24s24 10.745 24 24v2H8z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Hikâye başlığındaki açıklama kaldırıldığında hizayı koru */
.mj-story-head {
    justify-content: flex-start !important;
}