/* ============================================================================
   PDF Onizleme & Ayarlama Paneli — Word benzeri canli onizleme
   Sharp corners (border-radius: 0) + responsive (telefon/tablet/desktop)
   ============================================================================ */

/* Genislik 100vw DEGIL 100%: masaustu ayri pencerede (GenericWindowRoot) ikisi aynidir; web'de
   ve telefonda sayfa menu duzeninin (MainLayout) ICINDE acilir, 100vw orada yan menu + kenar
   boslugu kadar sagdan tasip PDF'i kirpiyordu (1500px'te 72px). Yukseklik orada esnek sutunda
   (.page-content) kendiliginden kuculur — overflow:hidden sayesinde. */
.pdf-preview-shell {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    background: #525659; /* Adobe-tarzi koyu zemin */
    overflow: hidden;
    border-radius: 0;
    font-family: var(--yl-font, "Segoe UI"), system-ui, sans-serif;
}

/* ─── Sol Panel: Ayarlar ─── */
.pdf-preview-sidebar {
    width: 320px;
    flex: 0 0 320px;
    background: #fff;
    border-right: 1px solid #E2E8F0;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    min-height: 0; /* flex shrink override */
}

.pp-toolbar {
    position: sticky;
    top: 0;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    padding: 12px;
    z-index: 5;
}

.pp-title {
    margin: 0 0 10px 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0F172A;
}

.pp-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.pp-btn {
    padding: 7px 8px;
    font-size: 0.74rem;
    border: 1px solid #CBD5E1;
    background: #fff;
    color: #334155;
    cursor: pointer;
    border-radius: 0;
    font-weight: 600;
    transition: background 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-btn:hover:not(:disabled) { background: #F1F5F9; }
.pp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pp-btn-primary {
    background: #0EA5E9;
    color: #fff;
    border-color: #0EA5E9;
}
.pp-btn-primary:hover:not(:disabled) { background: #0284C7; border-color: #0284C7; }

.pp-btn-warning {
    color: #B91C1C;
    border-color: rgba(185, 28, 28, 0.4);
}
.pp-btn-warning:hover:not(:disabled) { background: #FEF2F2; }

.pp-toast {
    margin-top: 8px;
    padding: 6px 10px;
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #86EFAC;
    font-size: 0.78rem;
    border-radius: 0;
}

.pp-status {
    margin-top: 8px;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #E2E8F0;
    color: #64748B;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 0;
}

/* Gecmis revizyon onizleme banner'i */
.pp-rev-banner {
    margin-top: 8px;
    padding: 6px 10px;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    color: #92400E;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 0;
}

/* Onizleme dil secici */
.pp-lang {
    margin-top: 8px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 0;
}
.pp-lang-label {
    display: block;
    font-size: 0.72rem;
    color: #64748B;
    margin-bottom: 5px;
}
.pp-lang-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.pp-lang-btn {
    flex: 1 1 0;
    min-width: 34px;
    padding: 5px 6px;
    border: 1px solid #CBD5E1;
    background: #fff;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
}
.pp-lang-btn:hover { border-color: #1D4ED8; }
.pp-lang-btn.active {
    background: #1D4ED8;
    border-color: #1D4ED8;
    color: #fff;
}
.pp-lang-btn:disabled { opacity: 0.5; cursor: default; }
.pp-status-dot {
    width: 8px;
    height: 8px;
    background: #CBD5E1;
    border-radius: 0;
    flex: 0 0 8px;
}
.pp-status-dot.pp-status-on {
    background: #10B981;
}

.pp-sidebar-content {
    flex: 1;
    padding: 8px 12px;
    overflow-y: auto;
}

/* ─── Şablonlar paneli ─── */
.pp-templates {
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
}
.pp-templates-head {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 8px;
}
.pp-templates-empty {
    font-size: 0.74rem;
    color: #64748B;
    margin-bottom: 8px;
    line-height: 1.4;
}
.pp-template-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.pp-template-row {
    display: flex;
    gap: 4px;
}
.pp-template-apply {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding: 6px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    color: #0F172A;
    cursor: pointer;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-template-apply:hover:not(:disabled) { background: #E0F2FE; border-color: #0EA5E9; }
.pp-template-apply:disabled { opacity: 0.5; cursor: not-allowed; }

/* Su an uygulanmis sablon — pencere kapatilip acildiginda da secili gorunur */
.pp-template-apply.active {
    background: #0EA5E9;
    border-color: #0EA5E9;
    color: #fff;
}
.pp-template-apply.active::before { content: "✓ "; font-weight: 700; }
.pp-template-apply.active:hover:not(:disabled) { background: #0284C7; border-color: #0284C7; }
.pp-template-del {
    flex: 0 0 auto;
    width: 28px;
    padding: 6px;
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid rgba(185, 28, 28, 0.4);
    background: #fff;
    color: #B91C1C;
    cursor: pointer;
    border-radius: 0;
}
.pp-template-del:hover:not(:disabled) { background: #FEF2F2; }
.pp-template-del:disabled { opacity: 0.5; cursor: not-allowed; }
.pp-template-save {
    display: flex;
    gap: 5px;
}
.pp-template-save .pp-input { flex: 1 1 auto; min-width: 0; }
.pp-template-save .pp-btn { flex: 0 0 auto; }

/* ─── IBAN seçimi hızlı butonları ─── */
.pp-iban-actions {
    display: flex;
    gap: 5px;
    margin-top: 8px;
}
.pp-iban-actions .pp-btn { flex: 1 1 0; }

/* ─── Bölüm: Collapsible Section ─── */
.pp-section {
    margin: 10px 0;
    border: 1px solid #E2E8F0;
    border-radius: 0;
}

.pp-section-title {
    padding: 8px 10px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0F172A;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.pp-section-title::-webkit-details-marker { display: none; }
.pp-section[open] > .pp-section-title { border-bottom-color: #0EA5E9; }
.pp-section-title:hover { background: #F1F5F9; }

.pp-section-body {
    padding: 10px;
}

/* ─── Form Alanlari ─── */
.pp-field {
    display: block;
    margin-bottom: 10px;
}
.pp-field:last-child { margin-bottom: 0; }

.pp-label {
    display: block;
    font-size: 0.74rem;
    color: #64748B;
    margin-bottom: 4px;
    font-weight: 600;
}

.pp-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-input-row input[type="range"] {
    flex: 1;
    accent-color: #0EA5E9;
    border-radius: 0;
}

.pp-value {
    min-width: 40px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0F172A;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pp-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }

.pp-input, .pp-select, .pp-textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #CBD5E1;
    background: #fff;
    color: #0F172A;
    font-size: 0.82rem;
    border-radius: 0;
    font-family: inherit;
    box-sizing: border-box;
}
.pp-input:focus, .pp-select:focus, .pp-textarea:focus {
    outline: none;
    border-color: #0EA5E9;
    box-shadow: 0 0 0 1px #0EA5E9;
}

.pp-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.pp-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 0.82rem;
    color: #334155;
    cursor: pointer;
    border-radius: 0;
}
.pp-checkbox:hover { background: #F1F5F9; }
.pp-checkbox input[type="checkbox"] {
    accent-color: #0EA5E9;
    cursor: pointer;
    border-radius: 0;
}

.pp-color {
    width: 56px;
    height: 28px;
    padding: 0;
    border: 1px solid #CBD5E1;
    cursor: pointer;
    background: transparent;
    border-radius: 0;
}

.pp-hint {
    margin-top: 8px;
    padding: 6px 8px;
    background: #F0F9FF;
    border-left: 2px solid #0EA5E9;
    color: #0369A1;
    font-size: 0.72rem;
    line-height: 1.4;
    border-radius: 0;
}

.pp-presets {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.pp-preset {
    width: 26px;
    height: 26px;
    border: 1px solid #CBD5E1;
    cursor: pointer;
    border-radius: 0;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.pp-preset:hover {
    transform: scale(1.1);
    border-color: #0EA5E9;
}

/* ─── Sag Panel: PDF iframe ─── */
.pdf-preview-iframe-wrap {
    flex: 1;
    position: relative;
    border-radius: 0;
    background: #525659;
    min-width: 0; /* flex shrink */
}

.pdf-preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: #fff;
}

.pdf-preview-loading {
    position: absolute;
    inset: 0;
    background: rgba(82, 86, 89, 0.85);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 10;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 0;
}

.pp-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #0EA5E9;
    border-radius: 50%; /* spinner — sadece bu eleman istisnai olarak yuvarlak */
    animation: pp-spin 0.8s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

.pdf-preview-error {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    padding: 10px 14px;
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
    z-index: 20;
    font-size: 0.84rem;
    border-radius: 0;
}

/* ─── Drag Handles (iframe etrafi) ─── */
.pp-drag-handle {
    position: absolute;
    background: rgba(14, 165, 233, 0.18);
    transition: background 0.12s ease;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}
.pp-drag-handle:hover,
.pp-drag-handle.pp-drag-active {
    background: rgba(14, 165, 233, 0.55);
}

.pp-drag-handle-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    cursor: ns-resize;
}

.pp-drag-grip {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 0;
    pointer-events: none;
}
.pp-drag-grip-horizontal {
    width: 36px;
    height: 2px;
    box-shadow: 0 4px 0 rgba(255, 255, 255, 0.85), 0 -4px 0 rgba(255, 255, 255, 0.85);
}

/* Drag esnasinda gosterilen anlik deger */
.pp-drag-readout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 18px;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    z-index: 30;
    border-radius: 0;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Iframe'in drag esnasinda mouse'u almasi engellensin
   (JS tarafinda inline stil ile pointer-events:none verilir) */

/* ─── Responsive: Tablet ve Telefon ─── */
@media (max-width: 1100px) {
    .pdf-preview-sidebar {
        width: 300px;
        flex: 0 0 300px;
    }
}

@media (max-width: 900px) {
    .pdf-preview-shell {
        flex-direction: column;
    }
    .pdf-preview-sidebar {
        width: 100%;
        flex: 0 0 auto;
        max-height: 50vh;
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
    }
    .pdf-preview-iframe-wrap {
        flex: 1;
        min-height: 300px;
    }
}

/* ─── Telefon (sidebar collapsed) ─── */
@media (max-width: 600px) {
    .pp-toolbar { padding: 8px; }
    .pp-toolbar-actions { gap: 4px; }
    .pp-btn { padding: 5px 8px; font-size: 0.72rem; }
    .pp-section-title { padding: 6px 8px; font-size: 0.78rem; }
    .pp-section-body { padding: 8px; }
}

/* "Diger Kullanicilara da Aktar" — herkesi etkileyen islem oldugu icin diger
   kaydetme dugmelerinden ayrilir. Kose yariciapi 0 (proje kurali). */
.pp-btn-share {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
}
.pp-btn-share:hover:not(:disabled) { background: #5b21b6; border-color: #5b21b6; }

/* Son indirilen Word dosyasi — adi + "Klasörde Göster" (22.09.2026) */
.pp-indirilen {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 0.75rem;
    color: #334155;
}
.pp-indirilen > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Teklifi Paylas — PDF / Word secimli, cihazin paylasim menusune verir (30.09.2026) */
.pp-paylas {
    margin-top: 8px;
    padding: 6px 8px;
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pp-paylas-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: #166534;
    flex: 1 1 auto;
}
.pp-paylas-btns {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
}
.pp-paylas-btn {
    min-width: 58px;
    padding: 6px 10px;
    border: 1px solid #15803D;
    background: #15803D;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 0;
}
.pp-paylas-btn:hover:not(:disabled) { background: #166534; border-color: #166534; }
.pp-paylas-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Paylasimdan sonra: "Gonderildi olarak isaretle" onerisi (zorlamaz) */
.pp-gonderildi-oneri {
    margin-top: 6px;
    padding: 7px 8px;
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 0;
    font-size: 0.75rem;
    color: #92400E;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pp-gonderildi-btns {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}