/* ==========================================================================
   belgelerim.css — Kişisel Arşiv, Belgelerim ve Belge Stüdyosu Tasarım Sistemi
   ========================================================================== */

/* ── Sayfa Taşıyıcı ─────────────────────────────────────────────────────── */
.docs-page,
.studio-page,
.prepare-page,
.view-page {
    width: min(100% - (var(--mk-gutter, 24px) * 2), var(--mk-container, 1220px)) !important;
    max-width: var(--mk-container, 1220px) !important;
    margin: 1.25rem auto 3.5rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-family: var(--mk-font-sans, "MK Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ── Modern Hero Alanı (Sabit Sitedeki tools-hero / forum Standardı) ───────── */
.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) {
    position: relative;
    overflow: hidden;
    margin: 0 0 1.5rem !important;
    padding: clamp(1.4rem, 2.8vw, 2.2rem) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0b0f19 0%, #111827 50%, #0f172a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18) !important;
    box-sizing: border-box !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--mk-brand, #8f1d1d) !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero)::after {
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(239, 68, 68, .15) !important;
    border-radius: 50%;
    content: "";
    opacity: .35;
    pointer-events: none;
}

.hero-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

.tools-back-link,
.docs-back,
.studio-back,
.prepare-back,
.view-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    margin-bottom: 0.65rem;
    transition: color 0.15s ease;
    position: relative;
    z-index: 2;
}

.tools-back-link:hover,
.docs-back:hover,
.studio-back:hover,
.prepare-back:hover,
.view-back:hover {
    color: #ffffff !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) .hero-content {
    position: relative;
    z-index: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
    width: 100% !important;
    flex-wrap: wrap;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) .hero-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 320px;
}

.tools-kicker,
.studio-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: .6rem;
    color: #e5b65a !important;
    background: rgba(229, 182, 90, 0.14) !important;
    border: 1px solid rgba(229, 182, 90, 0.3) !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 9999px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    width: fit-content;
}

.tools-kicker svg,
.studio-hero-badge svg {
    width: 14px !important;
    height: 14px !important;
    color: #e5b65a !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-title, h1) {
    max-width: 840px !important;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .5rem !important;
    color: #f8fafc !important;
    font-size: clamp(1.75rem, 2.5vw, 2.2rem) !important;
    font-weight: 750 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.022em !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-title, h1) span {
    background: linear-gradient(135deg, #fbbf24, #e5b65a, #fef08a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-title, h1) > svg {
    color: #e5b65a !important;
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 8px rgba(229, 182, 90, .4));
    flex-shrink: 0;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-subtitle, p) {
    max-width: 760px !important;
    margin: 0 !important;
    color: #cbd5e1 !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: -0.005em !important;
}

/* Hero Aksiyonları ve Butonlar (BEYAZ ÜSTÜNE BEYAZ SORUNUNA KESİN ÇÖZÜM) */
.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) .hero-actions,
.site-main :is(.docs-hero, .studio-hero) .studio-hero-side,
.view-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    margin-top: 0;
    flex-wrap: wrap;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-primary, .studio-hero-btn, .docs-hero-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    min-height: 42px !important;
    padding: .68rem 1.35rem !important;
    border-radius: 10px !important;
    background: var(--mk-brand, #8f1d1d) !important;
    color: #ffffff !important;
    border: 1px solid var(--mk-brand, #8f1d1d) !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(143, 29, 29, .4) !important;
    transition: all .18s ease !important;
    white-space: nowrap !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-primary, .studio-hero-btn, .docs-hero-btn):hover {
    background: var(--mk-brand-strong, #6f1717) !important;
    border-color: var(--mk-brand-strong, #6f1717) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(143, 29, 29, .5) !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-secondary, .view-actions a:not(.hero-primary)) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    min-height: 42px !important;
    padding: .68rem 1.15rem !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all .18s ease !important;
    white-space: nowrap !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-secondary, .view-actions a:not(.hero-primary)):hover {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .3) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-stats-grid, .tools-summary-bar, .studio-hero-stats) {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    flex-wrap: wrap !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-stat-card, .studio-stat-card) {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    padding: .65rem 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-stat-card, .studio-stat-card):hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-stat-card, .studio-stat-card) .stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-stat-card, .studio-stat-card) .stat-icon svg {
    width: 20px;
    height: 20px;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-stat-card, .studio-stat-card) .stat-value {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
}

.site-main :is(.docs-hero, .studio-hero, .prepare-hero, .view-hero, .verify-hero, .tools-hero) :is(.hero-stat-card, .studio-stat-card) .stat-label {
    font-size: 0.82rem !important;
    color: #cbd5e1 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* ── Bildirimler ───────────────────────────────────────────────────────── */
.docs-alert,
.studio-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.docs-alert.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.docs-alert.danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.studio-notice {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.studio-notice strong {
    font-weight: 700;
    color: #1d4ed8;
}
/* ── Doküman & Forum Standartlarında Arama Çubuğu ───────────────────────── */
.studio-search-panel,
.documents-search-panel,
.docs-filter,
.studio-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid var(--mk-line, #e2e8f0);
    border-radius: 14px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
    width: 100%;
}

.studio-search-panel .documents-search-input,
.documents-search-panel .documents-search-input,
.docs-search-wrap,
.studio-search-wrap,
.docs-page .documents-search-input,
.studio-page .documents-search-input {
    flex: 1;
    min-width: 240px;
    position: relative;
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease;
}

.studio-search-panel .documents-search-input:focus-within,
.documents-search-panel .documents-search-input:focus-within,
.docs-search-wrap:focus-within,
.studio-search-wrap:focus-within,
.docs-page .documents-search-input:focus-within,
.studio-page .documents-search-input:focus-within {
    background: #ffffff !important;
    border-color: var(--mk-brand, #8f1d1d) !important;
    box-shadow: 0 0 0 3px rgba(143, 29, 29, 0.12) !important;
}

.studio-search-panel .documents-search-input svg,
.documents-search-panel .documents-search-input svg,
.docs-search-wrap svg,
.studio-search-wrap svg,
.docs-page .documents-search-input svg,
.studio-page .documents-search-input svg {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    color: #64748b !important;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    display: block !important;
}

.studio-search-panel .documents-search-input input,
.documents-search-panel .documents-search-input input,
.docs-filter input[type="search"],
.studio-filter input[type="search"],
.docs-page .documents-search-input input,
.studio-page .documents-search-input input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    line-height: normal !important;
    height: auto !important;
    min-height: auto !important;
}

.studio-search-panel .documents-search-input input:focus,
.documents-search-panel .documents-search-input input:focus,
.docs-filter input[type="search"]:focus,
.studio-filter input[type="search"]:focus,
.docs-page .documents-search-input input:focus,
.studio-page .documents-search-input input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.studio-search-panel .documents-search-input input::placeholder,
.documents-search-panel .documents-search-input input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

.studio-search-selects {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.studio-search-selects select,
.studio-filter select {
    padding: 0.82rem 0.95rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    background: #f8fafc;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.studio-search-selects select:focus,
.studio-filter select:focus {
    outline: none;
    border-color: var(--mk-brand, #8f1d1d);
    background: #ffffff;
}

.studio-search-panel button[type="submit"],
.documents-search-panel button[type="submit"],
.docs-filter button,
.studio-filter button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    background: var(--mk-brand, #8f1d1d);
    color: #ffffff !important;
    border: none;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(143, 29, 29, 0.25);
}

.studio-search-panel button[type="submit"]:hover,
.documents-search-panel button[type="submit"]:hover,
.docs-filter button:hover,
.studio-filter button:hover {
    background: var(--mk-brand-strong, #6f1717);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(143, 29, 29, 0.35);
}

.studio-search-clear,
.docs-clear-btn,
.studio-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    color: #64748b !important;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.15s ease;
}

.studio-search-clear:hover,
.docs-clear-btn:hover,
.studio-clear-btn:hover {
    color: #0f172a !important;
    background: #f1f5f9;
}

@media (max-width: 900px) {
    .studio-search-panel,
    .documents-search-panel,
    .docs-filter,
    .studio-filter {
        flex-direction: column;
        align-items: stretch;
    }
    .studio-search-selects {
        flex-direction: column;
    }
    .studio-search-selects select {
        width: 100%;
    }
}

/* ── Sayaç & İstatistik Şeridi ────────────────────────────────────────── */
.docs-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.85rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0.85rem 1.25rem !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04) !important;
    font-size: 0.92rem !important;
    color: #475569 !important;
}

.docs-summary-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
}

.docs-summary-left svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--mk-brand, #8f1d1d) !important;
    flex-shrink: 0 !important;
}

.docs-summary strong {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    padding: 0 0.15rem !important;
}

.docs-summary-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.45rem 0.95rem !important;
    background: rgba(143, 29, 29, 0.08) !important;
    border: 1px solid rgba(143, 29, 29, 0.2) !important;
    border-radius: 8px !important;
    color: var(--mk-brand, #8f1d1d) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.docs-summary-cta svg {
    width: 14px !important;
    height: 14px !important;
}

.docs-summary-cta:hover {
    background: var(--mk-brand, #8f1d1d) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(143, 29, 29, 0.2) !important;
}

/* ── Belge Stüdyosu Tür Sayaçları (Hap Butonlar - Tek Satır Yerleşimi) ──── */
.studio-type-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.45rem !important;
    width: 100% !important;
    margin-bottom: 1.25rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
    box-sizing: border-box !important;
}

.studio-type-strip::-webkit-scrollbar {
    display: none;
}

.studio-type-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    padding: 0.55rem 0.5rem !important;
    background: #ffffff;
    border: 1px solid var(--mk-line, #e2e8f0);
    border-radius: 999px;
    text-decoration: none !important;
    color: #475569 !important;
    font-size: 0.83rem !important;
    font-weight: 600;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    box-sizing: border-box !important;
    text-align: center !important;
}

.studio-type-pill:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.studio-type-pill.active,
.studio-type-pill.active:hover,
.studio-type-pill.active:focus,
.studio-type-pill.active:visited {
    background: var(--mk-brand, #8f1d1d) !important;
    color: #ffffff !important;
    border-color: var(--mk-brand, #8f1d1d) !important;
    box-shadow: 0 4px 14px rgba(143, 29, 29, 0.35) !important;
}

.studio-type-pill.active *,
.studio-type-pill.active span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.studio-type-pill strong {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1rem 0.42rem !important;
    border-radius: 999px;
    font-size: 0.74rem !important;
    font-weight: 800;
    color: inherit;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.studio-type-pill.active strong {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .studio-type-strip {
        padding-bottom: 0.35rem;
    }
    .studio-type-pill {
        flex: 0 0 auto !important;
        min-width: fit-content !important;
        padding: 0.55rem 0.85rem !important;
    }
}

/* ── Belge Kartları Izgarası ───────────────────────────────────────────── */
.docs-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 1.25rem !important;
}

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

.docs-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 1.35rem 1.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
}

.docs-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, background 0.2s ease !important;
}

.docs-card:hover {
    transform: translateY(-3px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.08), 0 3px 10px -2px rgba(15, 23, 42, 0.04) !important;
}

.docs-card:hover::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, var(--mk-brand, #8f1d1d) 0%, #ef4444 100%) !important;
}

.docs-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    margin-bottom: 0.85rem !important;
}

/* Belge Türü Rozetleri */
.doc-type-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.28rem 0.75rem !important;
    border-radius: 8px !important;
    font-size: 0.74rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.doc-type-badge.type-dilekce {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

.doc-type-badge.type-ust_yazi {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.doc-type-badge.type-tutanak {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.doc-type-badge.type-rapor {
    background: #faf5ff !important;
    color: #7e22ce !important;
    border: 1px solid #e9d5ff !important;
}

.doc-type-badge.type-bilgi_notu {
    background: #f0fdfa !important;
    color: #0f766e !important;
    border: 1px solid #99f6e4 !important;
}

.doc-type-badge.type-diger,
.doc-type-badge.type-taslak {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

.docs-card-time {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.docs-card h2 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    color: #0f172a !important;
    margin: 0 0 0.65rem !important;
    line-height: 1.38 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.docs-card h2 a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.docs-card h2 a:hover {
    color: var(--mk-brand, #8f1d1d) !important;
}

.docs-card-template {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    font-size: 0.82rem !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.7rem !important;
    margin: 0 0 1rem !important;
    line-height: 1.4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.docs-card-template svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--mk-brand, #8f1d1d) !important;
    flex-shrink: 0 !important;
}

/* Aksiyon Çubuğu */
.docs-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    padding-top: 0.95rem !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: auto !important;
}

.docs-primary-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
}

.btn-doc-view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    padding: 0.55rem 0.85rem !important;
    background: #0f172a !important;
    border: 1px solid #0f172a !important;
    border-radius: 9px !important;
    font-size: 0.84rem !important;
    font-weight: 650 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
}

.btn-doc-view svg {
    width: 15px !important;
    height: 15px !important;
    color: #93c5fd !important;
    transition: transform 0.15s ease !important;
}

.btn-doc-view:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
}

.btn-doc-view:hover svg {
    transform: scale(1.1) !important;
}

.btn-doc-cetele {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    padding: 0.55rem 0.85rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(143, 29, 29, 0.25) !important;
    border-radius: 9px !important;
    font-size: 0.84rem !important;
    font-weight: 650 !important;
    color: var(--mk-brand, #8f1d1d) !important;
    text-decoration: none !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-doc-cetele svg {
    width: 15px !important;
    height: 15px !important;
    color: var(--mk-brand, #8f1d1d) !important;
    transition: transform 0.15s ease !important;
}

.btn-doc-cetele:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #7f1d1d !important;
    transform: translateY(-1px) !important;
}

.btn-doc-cetele:hover svg {
    transform: scale(1.1) !important;
}

.docs-secondary-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding-top: 0.15rem !important;
}

.docs-download-chips {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 2px 4px !important;
}

.btn-doc-format {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.26rem 0.6rem !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    line-height: 1.1 !important;
}

.btn-doc-format:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.btn-doc-format.pdf {
    color: #dc2626 !important;
}

.btn-doc-format.pdf:hover {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.btn-doc-delete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
}

.btn-doc-delete svg {
    width: 15px !important;
    height: 15px !important;
}

.btn-doc-delete:hover {
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    transform: translateY(-1px) !important;
}

/* ── Boş Durum (Empty State) ───────────────────────────────────────────── */
.docs-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.docs-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.docs-empty h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.docs-empty p {
    font-size: 0.94rem;
    color: #64748b;
    margin: 0 0 1rem;
    max-width: 480px;
    line-height: 1.55;
}

.docs-empty a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--mk-brand, #8f1d1d);
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(143, 29, 29, 0.25);
    transition: all 0.18s ease;
}

.docs-empty a:hover {
    background: var(--mk-brand-strong, #6f1717);
    transform: translateY(-1px);
}

/* ── Sayfalama ─────────────────────────────────────────────────────────── */
.docs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2rem;
}

.docs-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
}

.docs-pagination a:hover {
    border-color: var(--mk-brand, #8f1d1d);
    color: var(--mk-brand, #8f1d1d);
}

.docs-pagination a.active {
    background: var(--mk-brand, #8f1d1d);
    color: #ffffff;
    border-color: var(--mk-brand, #8f1d1d);
    box-shadow: 0 2px 6px rgba(143, 29, 29, 0.25);
}

/* ── Belge Stüdyosu Şablon Kartları ───────────────────────────────────── */
.studio-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.studio-section-head h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.studio-section-head p {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0.15rem 0 0;
}

.studio-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.04);
}

.studio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.studio-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.studio-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 900;
}

.studio-mark.personal {
    background: #fee2e2;
    color: var(--mk-brand, #8f1d1d);
}

.studio-card h2 {
    font-size: 1.12rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.studio-card p {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0 0 1.25rem;
    line-height: 1.55;
    flex-grow: 1;
}

.studio-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.studio-card-foot span {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.studio-card-foot a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    background: var(--mk-brand, #8f1d1d);
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(143, 29, 29, 0.25);
    transition: all 0.18s ease;
}

.studio-card-foot a:hover {
    background: var(--mk-brand-strong, #6f1717);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(143, 29, 29, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════
   BELGE GÖRÜNTÜLEME & A4 KAĞIT GÖRÜNÜMÜ (belge-goruntule.php)
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   BELGE GÖRÜNTÜLEME & A4 KAĞIT GÖRÜNÜMÜ (belge-goruntule.php)
   ═══════════════════════════════════════════════════════════════════════ */
.view-page {
    width: min(calc(100% - 2rem), var(--mk-container, 1220px)) !important;
    max-width: var(--mk-container, 1220px) !important;
    margin: 1.25rem auto 3.5rem !important;
    padding: 0 !important;
}

.doc-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.doc-type-badge.type-dilekce { background: #fee2e2; color: #991b1b; }
.doc-type-badge.type-tutanak { background: #dcfce7; color: #166534; }
.doc-type-badge.type-ust_yazi { background: #dbeafe; color: #1e40af; }
.doc-type-badge.type-bilgi_notu { background: #fef3c7; color: #b45309; }
.doc-type-badge.type-rapor { background: #f3e8ff; color: #6b21a8; }
.doc-type-badge.type-diger { background: #f1f5f9; color: #334155; }

.view-hero {
    background: linear-gradient(135deg, #0b0f19 0%, #111827 50%, #0f172a 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 16px !important;
    padding: 1.6rem 2rem !important;
    color: #ffffff !important;
    margin-bottom: 1.5rem !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18) !important;
}

.view-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--mk-brand, #8f1d1d);
}

.view-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    margin-bottom: 0.65rem;
    transition: color 0.15s ease;
}

.view-back:hover {
    color: #ffffff !important;
}

.view-hero-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.view-hero h1 {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 0 0.35rem !important;
    letter-spacing: -0.01em;
}

.view-hero p {
    color: #94a3b8 !important;
    font-size: 0.94rem !important;
    margin: 0 !important;
    line-height: 1.55;
}

.view-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.view-actions a,
.view-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transition: all 0.15s ease;
}

.view-actions a:hover,
.view-actions button:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.view-actions .cetele-action {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
}

.view-actions .cetele-action:hover {
    background: #047857;
}

.view-actions .pdf-action {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.view-actions .pdf-action:hover {
    background: #b91c1c;
}

.view-actions .whatsapp-action {
    background: #25d366;
    border-color: #25d366;
    color: #ffffff;
}

.view-actions .whatsapp-action:hover {
    background: #1ebc59;
}

.view-actions .delete-action {
    background: transparent;
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.view-actions .delete-action:hover {
    background: #dc2626;
    color: #ffffff;
}

/* Taslak Uyarı Kutusu */
.view-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 0.9rem 1.25rem;
    color: #92400e;
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Doğrulama Kodu Şeridi & Canlı Karekod */
.view-verification {
    background: #ffffff;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.06);
}

.view-verification-qr {
    flex-shrink: 0;
}

.view-qr-box {
    width: 80px;
    height: 80px;
    padding: 6px;
    background: #ffffff;
    border: 1.5px solid #dcfce7;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-qr-box svg {
    width: 100%;
    height: 100%;
    display: block;
}

.view-verification-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.view-verification-code-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.view-verification strong {
    font-size: 0.82rem;
    text-transform: uppercase;
    color: #166534;
    letter-spacing: 0.04em;
    font-weight: 800;
}

.view-code-badge {
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 800;
    color: #15803d;
    background: #f0fdf4;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #86efac;
    letter-spacing: 0.05em;
}

.view-verification p {
    margin: 0;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.45;
}

.view-verification-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.view-verification a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: #166534;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.view-verification a:hover {
    background: #14532d;
    transform: translateY(-1px);
}

.verification-meta {
    font-size: 0.82rem;
    color: #64748b;
}

.verification-meta strong {
    color: #334155;
    font-weight: 700;
    text-transform: none;
}

/* Görünüm Modu Sekmeleri */
.view-mode-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 860px;
    margin: 0 auto 1rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.25rem;
}

.view-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.25rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -0.35rem;
    transition: all 0.2s ease;
}

.view-tab-btn:hover {
    color: #0f172a;
    background: #f8fafc;
}

.view-tab-btn.active {
    color: var(--mk-brand, #8f1d1d);
    border-bottom-color: var(--mk-brand, #8f1d1d);
    background: #ffffff;
    font-weight: 800;
}

/* Resmi A4 Kağıt Görünümü (Resmi Yazışma Standardı) */
.mk-a4-viewport {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.document-paper.mk-a4-paper {
    background: #ffffff;
    color: #000000;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 210mm;
    min-height: 297mm;
    margin: 0 auto 2.5rem;
    padding: 15mm 15mm 15mm 15mm;
    box-sizing: border-box;
    position: relative;
    font-family: 'Times New Roman', Times, "DejaVu Serif", serif;
    font-size: 12pt;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

.mk-a4-paper .export-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mk-a4-paper p {
    text-indent: 1.25cm;
    margin: 0 0 12px 0;
    text-align: justify;
    line-height: 1.6;
}

.mk-a4-paper .mk-doc-security-wrap {
    margin-top: auto !important;
}

.mk-a4-paper .mk-doc-security-footer {
    padding-top: 14px;
    border-top: 1px dashed #94a3b8;
    color: #475569;
}

.mk-a4-paper .mk-doc-security-footer svg {
    width: 58px;
    height: 58px;
}

/* Ham Kağıt Görünümü */
.document-paper.raw-document-paper {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    max-width: 860px;
    margin: 0 auto 2.5rem;
    padding: 1.75rem 2rem;
    box-sizing: border-box;
}

.raw-paper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.raw-paper-head span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

.document-paper pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #1e293b;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    background: #f8fafc;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Yazdırma (@media print) */
@media print {
    body, html {
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header, footer, nav,
    .view-hero, .view-warning, .view-verification, .view-legal-panel,
    .view-mode-tabs, #tabRawDoc, .view-whatsapp-panel,
    .cetele-action, .pdf-action, .copy-action, .verify-action, .print-action,
    .view-inline-delete-form, .btn {
        display: none !important;
    }

    .view-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mk-a4-viewport {
        padding: 0 !important;
        margin: 0 !important;
    }

    .document-paper.mk-a4-paper {
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 15mm 15mm 15mm 15mm !important;
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
    }
}

@media (max-width: 768px) {
    .view-verification {
        flex-direction: column;
        align-items: flex-start;
    }

    .document-paper.mk-a4-paper {
        padding: 1.5rem 1.25rem;
    }
}

/* WhatsApp Format Kutusu */
.view-whatsapp-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.35rem;
    max-width: 860px;
    margin: 0 auto 2rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.view-whatsapp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.view-whatsapp-head h2 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.view-whatsapp-head p {
    font-size: 0.84rem;
    color: #64748b;
    margin: 0.2rem 0 0;
}

.view-whatsapp-head button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    background: #25d366;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.view-whatsapp-head button:hover {
    background: #1ebc59;
}

.view-whatsapp-panel pre {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    font-family: monospace;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #334155;
    white-space: pre-wrap;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   BELGE DOĞRULAMA (belge-dogrula.php)
   ═══════════════════════════════════════════════════════════════════════ */
.verify-page {
    width: min(calc(100% - 2rem), 680px) !important;
    max-width: 680px !important;
    margin: 3rem auto 4rem !important;
}

.verify-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2.25rem 2rem;
    text-align: center;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.verify-card.is-valid {
    border-top: 5px solid #059669;
}

.verify-card.is-invalid {
    border-top: 5px solid #dc2626;
}

.verify-kicker {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.verify-card h1 {
    font-size: 1.6rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 0.75rem;
}

.verify-card p {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.verify-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    text-align: left;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.verify-details dt {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.verify-details dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

/* ==========================================================================
   Belge Hazırlama Sihirbazı (belge-hazirla.php) Tasarım Sistemi
   ========================================================================== */

.prepare-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 1.5rem !important;
    padding: 1.5rem 1.75rem !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #111827 0%, #1e293b 60%, #0f172a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
}

.prepare-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--mk-brand, #8f1d1d);
}

.prepare-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    margin-bottom: 0.65rem;
    transition: color 0.15s ease;
}

.prepare-back:hover {
    color: #ffffff !important;
}

.prepare-hero-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.prepare-hero h1 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.35rem !important;
    color: #ffffff !important;
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em;
}

.prepare-hero p {
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 0.94rem !important;
    line-height: 1.55;
    max-width: 720px;
}

.prepare-hero-layout > span {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: rgba(143, 29, 29, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #fca5a5;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Uyarı & Rehber Kutuları */
.prepare-warning {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    font-size: 0.86rem;
    color: #92400e;
    margin-bottom: 1.25rem;
    line-height: 1.45;
}

.prepare-warning strong {
    color: #b45309;
    flex-shrink: 0;
}

.prepare-info-note-guide {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.prepare-info-note-guide > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}

.prepare-info-note-guide strong {
    color: #166534;
    font-size: 0.95rem;
}

.prepare-info-note-guide > div span {
    color: #15803d;
    font-size: 0.85rem;
}

.prepare-info-note-guide ol {
    margin: 0;
    padding-left: 1.25rem;
    color: #166534;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Mevzuat Dayanak Paneli */
.legal-check-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
}

.legal-check-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.legal-check-head h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.2rem 0;
}

.legal-check-head p {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
}

.legal-check-head span {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.legal-check-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.legal-check-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.legal-check-item strong {
    display: block;
    font-size: 0.88rem;
    color: #1e293b;
    margin-bottom: 0.2rem;
}

.legal-check-item span {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.legal-check-item small {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.legal-check-item a {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.legal-check-item a:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* Alert Bildirimleri */
.prepare-alert {
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

.prepare-alert.danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.prepare-alert.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.prepare-alert.warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
}

/* Ana Bölünmüş Düzen (Split Layout: Form Sol + A4 Sağ) */
.prepare-page .prepare-layout,
.prepare-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    align-items: start;
}

.prepare-form {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.prepare-form > label {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.prepare-form > label > span {
    font-size: 0.86rem;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.prepare-form > label > span em {
    color: #dc2626;
    font-style: normal;
}

.prepare-form input[type="text"],
.prepare-form input[type="date"],
.prepare-form input[type="time"],
.prepare-form input[type="datetime-local"],
.prepare-form input[type="number"],
.prepare-form select,
.prepare-form textarea {
    width: 100%;
    padding: 0.75rem 0.95rem;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.92rem;
    font-family: inherit;
    color: #0f172a;
    background: #f8fafc;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.prepare-form input:focus,
.prepare-form select:focus,
.prepare-form textarea:focus {
    outline: none;
    border-color: var(--mk-brand, #8f1d1d);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(143, 29, 29, 0.12);
}

.prepare-form .field-help {
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 0.2rem;
    line-height: 1.4;
}

/* Kişiselleştirilmiş Şablon Akordeonu */
.custom-template-panel {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-top: 0.5rem;
}

.custom-template-panel summary {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.prepare-page .custom-template-panel summary::after,
.custom-template-panel summary::after {
    content: "Aç" !important;
    flex-shrink: 0;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: .32rem .65rem;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    background: #fff;
    color: var(--mk-brand, #7f1d1d);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
}

.prepare-page .custom-template-panel[open] summary::after,
.custom-template-panel[open] summary::after {
    content: "Kapat" !important;
}

.custom-template-panel summary strong {
    font-size: 0.9rem;
    color: #1e293b;
    display: block;
}

.custom-template-panel summary span {
    font-size: 0.78rem;
    color: #64748b;
    display: block;
    margin-top: 0.15rem;
}

.custom-template-panel[open] {
    padding-bottom: 1.25rem;
}

.custom-template-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
}

.custom-template-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--mk-brand, #8f1d1d);
}

.custom-template-help {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.78rem;
    color: #1e40af;
    line-height: 1.45;
    margin-top: 0.75rem;
}

.custom-template-help code {
    background: rgba(255, 255, 255, 0.7);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Aksiyon Butonları */
.prepare-verification-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 1rem 0 0.75rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid #dbe3ec;
    border-radius: 9px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.9rem;
}
.prepare-verification-option input { margin-top: 0.2rem; }
.prepare-verification-option small { display: block; margin-top: 0.2rem; color: #64748b; }

/* ── Belge Hazırlama Buton Eylemleri (2x2 Dengeli Izgara Düzeni) ── */
.prepare-page .prepare-actions,
.prepare-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    margin-top: 0.75rem !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 480px) {
    .prepare-page .prepare-actions,
    .prepare-actions {
        grid-template-columns: 1fr !important;
    }
}

.prepare-page .prepare-actions button,
.prepare-page .prepare-actions .btn,
.prepare-actions .btn {
    width: 100% !important;
    min-height: 40px !important;
    padding: 0.55rem 0.65rem !important;
    border-radius: 9px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.prepare-page .prepare-actions button svg,
.prepare-page .prepare-actions .btn svg,
.prepare-actions .btn svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

.prepare-page .prepare-actions .btn-secondary,
.prepare-actions .btn-secondary {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

.prepare-page .prepare-actions .btn-secondary:hover,
.prepare-actions .btn-secondary:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px) !important;
}

.prepare-page .prepare-actions .btn-pdf-action,
.prepare-actions .btn-pdf-action {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border: 1px solid #b91c1c !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
}

.prepare-page .prepare-actions .btn-pdf-action:hover,
.prepare-actions .btn-pdf-action:hover {
    background: linear-gradient(135deg, #991f24 0%, #b91c1c 100%) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3) !important;
    transform: translateY(-1px) !important;
}

.prepare-page .prepare-actions .template-save,
.prepare-actions .template-save {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
}

.prepare-page .prepare-actions .template-save:hover,
.prepare-actions .template-save:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

.prepare-page .prepare-actions .btn-primary,
.prepare-actions .btn-primary {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
}

.prepare-page .prepare-actions .btn-primary:hover,
.prepare-actions .btn-primary:hover {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Sağ Canlı Önizleme Alanı */
.prepare-preview {
    position: sticky;
    top: 1.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.preview-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid #e2e8f0;
}

.preview-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.preview-title-row h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

.preview-title-row h2 svg {
    width: 18px;
    height: 18px;
    color: #64748b;
}

.preview-type-badge {
    height: 24px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.65rem;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid #fecaca;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.preview-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    flex-wrap: wrap;
    width: 100%;
}

.preview-copy-button,
.preview-pdf-button {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.85rem;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.preview-copy-button svg,
.preview-pdf-button svg {
    width: 13.5px;
    height: 13.5px;
    flex-shrink: 0;
    stroke-width: 2.2;
}

.preview-copy-button:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-0.5px);
}

.preview-pdf-button {
    border-color: #fecaca;
    background: #fff5f5;
    color: #991b1b;
    box-shadow: 0 1px 2px rgba(153, 27, 27, 0.04);
}

.preview-pdf-button:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #7f1d1d;
    box-shadow: 0 2px 5px rgba(153, 27, 27, 0.1);
    transform: translateY(-0.5px);
}

.preview-copy-button:active,
.preview-pdf-button:active {
    transform: translateY(0.5px);
}

/* A4 Kağıdı Efekti */
.document-paper.prepare-document-paper {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 2px 5px rgba(0, 0, 0, 0.03);
    padding: 2.5rem 2rem;
    min-height: 480px;
    position: relative;
}

.document-paper.prepare-document-paper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #991f24 0%, #1e293b 100%);
    border-radius: 6px 6px 0 0;
}

.document-paper.prepare-document-paper pre {
    font-family: 'Times New Roman', Times, serif, system-ui;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #111827;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.preview-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
}

.preview-empty-icon {
    font-size: 2.5rem;
    color: #94a3b8;
    margin-bottom: 0.75rem;
}

.preview-empty p {
    font-size: 0.9rem;
    color: #475569;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.preview-empty small {
    font-size: 0.78rem;
    color: #94a3b8;
}

.preview-copy-status {
    font-size: 0.8rem;
    color: #15803d;
    margin: 0.5rem 0 0 0;
    text-align: right;
    font-weight: 700;
}

@media (max-width: 960px) {
    .prepare-layout {
        grid-template-columns: 1fr;
    }

    .prepare-preview {
        position: static;
    }
}

/* ── Şablon Editörü Resmi Yazışma Araç Çubuğu (Toolbar - Ultra Kompakt) ── */
.prepare-page .template-editor-toolbar,
.template-editor-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35rem 0.5rem !important;
    padding: 0.45rem 0.65rem !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 0.45rem 0 0.65rem !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}

.prepare-page .toolbar-group,
.toolbar-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.22rem !important;
    flex-wrap: wrap !important;
}

.prepare-page .toolbar-label,
.toolbar-label {
    font-size: 0.60rem !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    background: #f1f5f9 !important;
    padding: 0.12rem 0.35rem !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    user-select: none !important;
}

.prepare-page .tb-btn,
.template-editor-toolbar .tb-btn,
button.tb-btn,
.tb-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.22rem !important;
    padding: 0.16rem 0.42rem !important;
    min-height: 22px !important;
    height: 22px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 5px !important;
    font-size: 0.67rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

.prepare-page .tb-btn span,
.tb-btn span {
    font-size: 0.67rem !important;
    line-height: 1 !important;
}

.prepare-page .tb-btn svg,
.template-editor-toolbar .tb-btn svg,
button.tb-btn svg,
.tb-btn svg {
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
}

.prepare-page .tb-btn:hover,
.tb-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

.prepare-page .tb-btn:active,
.tb-btn:active {
    transform: translateY(0) scale(0.97) !important;
}

/* Modern Renk Varyantları */
.prepare-page .tb-btn-blue,
.tb-btn-blue {
    background: #f0f7ff !important;
    border-color: #bae6fd !important;
    color: #0369a1 !important;
}
.prepare-page .tb-btn-blue svg,
.tb-btn-blue svg { color: #0284c7 !important; }
.prepare-page .tb-btn-blue:hover,
.tb-btn-blue:hover {
    background: #e0f2fe !important;
    border-color: #7dd3fc !important;
    color: #0284c7 !important;
}

.prepare-page .tb-btn-amber,
.tb-btn-amber {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}
.prepare-page .tb-btn-amber svg,
.tb-btn-amber svg { color: #d97706 !important; }
.prepare-page .tb-btn-amber:hover,
.tb-btn-amber:hover {
    background: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

.prepare-page .tb-btn-green,
.tb-btn-green {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}
.prepare-page .tb-btn-green svg,
.tb-btn-green svg { color: #16a34a !important; }
.prepare-page .tb-btn-green:hover,
.tb-btn-green:hover {
    background: #dcfce7 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.prepare-page .tb-btn-purple,
.tb-btn-purple {
    background: #faf5ff !important;
    border-color: #e9d5ff !important;
    color: #7e22ce !important;
}
.prepare-page .tb-btn-purple svg,
.tb-btn-purple svg { color: #9333ea !important; }
.prepare-page .tb-btn-purple:hover,
.tb-btn-purple:hover {
    background: #f3e8ff !important;
    border-color: #d8b4fe !important;
    color: #6b21a8 !important;
}

.prepare-page .tb-btn-slate,
.tb-btn-slate {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
.prepare-page .tb-btn-slate svg,
.tb-btn-slate svg { color: #64748b !important; }
.prepare-page .tb-btn-slate:hover,
.tb-btn-slate:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* ── Önizleme Görünüm Değiştirici Butonları ── */
.preview-view-toggles {
    height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}

.preview-view-toggles .btn-toggle {
    height: 26px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #64748b !important;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none !important;
    transition: all 0.16s ease;
}

.preview-view-toggles .btn-toggle svg {
    width: 13.5px;
    height: 13.5px;
    stroke-width: 2.2;
    opacity: 0.75;
    color: currentColor !important;
}

.preview-view-toggles .btn-toggle:hover:not(.active) {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.65) !important;
}

.preview-view-toggles .btn-toggle:hover:not(.active) svg {
    opacity: 1;
}

.preview-view-toggles .btn-toggle.active {
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

.preview-view-toggles .btn-toggle.active svg {
    color: #991b1b !important;
    opacity: 1;
}

/* ── A4 Hazırlama Önizleme Kağıdı ── */
.document-paper.prepare-a4-paper {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    padding: 15mm 15mm 15mm 15mm;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12pt;
    line-height: 1.6;
    color: #000000;
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

.prepare-a4-paper .export-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.prepare-a4-paper .mk-doc-security-wrap {
    margin-top: auto !important;
}

.preview-official-badge {
    margin-top: 0.85rem;
    padding: 0.55rem 0.85rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #166534;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.preview-official-badge svg {
    width: 16px;
    height: 16px;
    color: #16a34a;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODÜLER ŞABLON KURUCU & RÜTBE KOTA ÇUBUĞU (belge-studyo.php)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kullanıcı Şablon Kota Çubuğu ───────────────────────────────────────── */
.studio-quota-bar {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.15rem 1.4rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.05);
}

.studio-quota-bar .quota-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.studio-quota-bar .quota-rank-pill {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.95rem;
    background: #ffffff;
    padding: 0.65rem 1.15rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.studio-quota-bar .rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.studio-quota-bar .rank-badge svg {
    width: 15px;
    height: 15px;
}

.studio-quota-bar .quota-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    line-height: 1.4;
    flex-wrap: wrap;
}

.studio-quota-bar .quota-text strong {
    color: #0f172a;
    font-weight: 750;
    font-size: 0.95rem;
    white-space: nowrap;
}

.studio-quota-bar .quota-text span {
    color: #334155;
    font-size: 0.93rem;
    font-weight: 600;
}

.studio-quota-bar .quota-progress-track {
    width: 140px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.studio-quota-bar .quota-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
}

.studio-quota-bar .quota-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-builder-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.35rem;
    background: linear-gradient(135deg, var(--mk-brand, #8f1d1d) 0%, #b91c1c 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(143, 29, 29, 0.28);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.btn-builder-toggle:hover {
    background: linear-gradient(135deg, var(--mk-brand-strong, #6f1717) 0%, #991b1b 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(143, 29, 29, 0.38);
}

.btn-builder-toggle svg {
    width: 18px;
    height: 18px;
}

.quota-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.84rem;
}

.quota-locked-badge svg {
    width: 16px;
    height: 16px;
}

/* ── Modüler Şablon Kurucu Paneli ───────────────────────────────────────── */
.modular-builder-panel {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 18px;
    padding: clamp(1.25rem, 2.5vw, 1.85rem);
    margin-bottom: 2.25rem;
    box-shadow: 0 10px 32px -8px rgba(15, 23, 42, 0.08);
    display: none;
    animation: builderSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modular-builder-panel.open {
    display: block;
}

@keyframes builderSlideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.builder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.builder-header h2 {
    font-size: 1.28rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem 0;
}

.builder-header h2 svg {
    color: var(--mk-brand, #8f1d1d);
}

.builder-header p {
    color: #64748b;
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.5;
}

/* Hızlı Kalıp Seçimi (Presets) */
.builder-presets-section {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 0.95rem 1.25rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.builder-presets-label {
    font-size: 0.82rem;
    font-weight: 750;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.builder-presets-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

.builder-preset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    min-height: 38px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.18s ease;
}

.builder-preset-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: var(--mk-brand, #8f1d1d);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.builder-preset-btn.btn-preset-clear {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.builder-preset-btn.btn-preset-clear svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.builder-preset-btn.btn-preset-clear:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Modüler Bloklar Araç Çubuğu (Palette) */
.builder-palette-wrap {
    margin-bottom: 1.25rem;
}

.builder-palette-label {
    font-size: 0.82rem;
    font-weight: 750;
    color: #334155;
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
}

.builder-palette-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.55rem;
    background: #f8fafc;
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.b-block-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex: 1 1 155px;
    max-width: 215px;
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.16s ease;
}

.b-block-btn:hover {
    border-color: #94a3b8;
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.b-block-btn.btn-blue { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.b-block-btn.btn-blue:hover { background: #dbeafe; border-color: #93c5fd; }

.b-block-btn.btn-amber { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.b-block-btn.btn-amber:hover { background: #fef3c7; border-color: #fcd34d; }

.b-block-btn.btn-green { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.b-block-btn.btn-green:hover { background: #dcfce7; border-color: #86efac; }

.b-block-btn.btn-purple { color: #7e22ce; border-color: #e9d5ff; background: #faf5ff; }
.b-block-btn.btn-purple:hover { background: #f3e8ff; border-color: #d8b4fe; }

/* Kurucu Form Alanları */
.builder-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 860px) {
    .builder-form-grid {
        grid-template-columns: 1fr;
    }
}

.builder-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.builder-field span {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
}

.builder-field input,
.builder-field select {
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 9px;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s ease;
}

.builder-field input:focus,
.builder-field select:focus {
    border-color: var(--mk-brand, #8f1d1d);
}

.builder-textarea-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.builder-textarea-wrap span {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
}

.builder-textarea {
    width: 100%;
    min-height: 280px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #0f172a;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 1rem;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.builder-textarea:focus {
    border-color: var(--mk-brand, #8f1d1d);
    box-shadow: 0 0 0 3px rgba(143, 29, 29, 0.12);
}

/* Dinamik Algılanan Etiketler Önizlemesi */
.builder-tags-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

.builder-tags-head {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.builder-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 28px;
    align-items: center;
}

.detected-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: monospace;
}

.detected-tag-chip.empty-notice {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-family: inherit;
    font-weight: 500;
}

/* Kurucu Aksiyon Butonları */
.builder-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.15rem;
    margin-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

.btn-builder-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.55rem 1.25rem;
    background: var(--mk-brand, #8f1d1d);
    color: #ffffff !important;
    border: 1px solid var(--mk-brand, #8f1d1d);
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(143, 29, 29, 0.22);
    transition: all 0.18s ease;
}

.btn-builder-save svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.btn-builder-save:hover {
    background: var(--mk-brand-strong, #6f1717);
    border-color: var(--mk-brand-strong, #6f1717);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(143, 29, 29, 0.32);
}

.btn-builder-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 42px;
    padding: 0.55rem 1.25rem;
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.18s ease;
}

.btn-builder-cancel svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.btn-builder-cancel:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Şablon Kartı Aksiyon Butonları (Hazırla & Sil) */
.studio-card-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.btn-card-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.65rem;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    color: #e11d48;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1;
}

.btn-card-delete:hover {
    background: #ffe4e6;
    border-color: #fda4af;
    color: #be123c;
    transform: translateY(-1px);
}

.btn-card-delete svg {
    width: 15px;
    height: 15px;
}

/* Bildirim Alert Kartları */
.studio-alert {
    padding: 0.9rem 1.2rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.studio-alert.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.studio-alert.danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}