/* CMR Olusturma Araci - arayuz (sihirbaz + form + canli onizleme paneli).
   Basili belge izgarasi ayri dosyada: cmr-document.css.
   calculators.css + sections.css zaten yuklu; burada yalniz CMR'ye ozel katman.
   Marka yesili: #83bf68. Uzun tire yok. */

.cmr-page .cmr-legal-strip {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #9ca3af;
    border-radius: 8px;
    background: #f9fafb;
    font-size: 13.5px;
    line-height: 1.6;
    color: #4b5563;
}

/* ============ Arac kabugu ============ */
.cmr-app {
    margin: 8px 0 40px;
    --cmr-line: #d7dee2;
    --cmr-ink: #1f2937;
}

.cmr-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--cmr-line);
    border-radius: 10px 10px 0 0;
    background: #f6f8f7;
}

.cmr-toolbar-l { display: flex; flex-wrap: wrap; gap: 8px; }

.cmr-tbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid #cdd6d1;
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #024430;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.cmr-tbtn:hover { background: #eef4f0; border-color: #83bf68; }
.cmr-tbtn-file { position: relative; }

.cmr-savestatus { font-size: 12.5px; color: #6b7280; }

/* ============ Sayfa genisligi: sadece CMR aracinda, genis masaustunde yanlarda
   bosluk kalmasin + sihirbaz + onizleme daha ferah gorunsun.
   .sd-below normalde makale-tipi sayfalarda 820px'e sabit (sections.css) - aracin
   kendisi makale degil, burada gecersiz kilinir. */
.cmr-page .sd-below { max-width: none; }
/* Rehber + SSS metin icerigi okunabilir genislikte kalsin (araç genişlese de). */
.cmr-page .cmr-guide,
.cmr-page .sd-faq { max-width: 820px; margin-left: auto; margin-right: auto; }
@media (min-width: 1300px) {
    .cmr-page .container-sub { max-width: 1560px; }
}
@media (min-width: 1650px) {
    .cmr-page .container-sub { max-width: 1760px; }
}

/* ============ Duzen: form + onizleme ============ */
.cmr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 0;
    border: 1px solid var(--cmr-line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
@media (min-width: 1300px) {
    .cmr-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
}
@media (min-width: 1650px) {
    .cmr-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 660px); }
}
.cmr-form-col { padding: 22px 22px 26px; min-width: 0; }
.cmr-preview-col {
    border-left: 1px solid var(--cmr-line);
    background: #eef1f0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- Adim gostergesi ---- */
.cmr-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.cmr-dots li { flex: 1 1 120px; }
.cmr-dot {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--cmr-line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.cmr-dot-n {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #e6ebe8;
    font-size: 12px; font-weight: 700; color: #4b5563;
}
.cmr-dot-t { font-size: 12px; line-height: 1.25; color: #4b5563; }
.cmr-dot.is-active { border-color: #83bf68; background: #f2f8ee; }
.cmr-dot.is-active .cmr-dot-n { background: #83bf68; color: #fff; }
.cmr-dot.is-active .cmr-dot-t { color: #024430; font-weight: 600; }
.cmr-dot.is-done .cmr-dot-n { background: #024430; color: #fff; }

.cmr-step-h {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: #024430;
}
.cmr-step-h .cmr-step-count { color: #9ca3af; font-weight: 600; margin-right: 8px; font-size: 14px; }
[data-cmr-step-title] { outline: none; }

/* ---- Form alanlari ---- */
.cmr-fs {
    margin: 0 0 18px;
    padding: 14px 16px 16px;
    border: 1px solid var(--cmr-line);
    border-radius: 9px;
}
.cmr-fs legend {
    padding: 0 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #024430;
}
.cmr-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}
.cmr-col-2 { grid-column: 1 / -1; }

.cmr-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cmr-f > span { font-weight: 600; color: #374151; }
.cmr-f em { font-style: normal; font-weight: 500; color: #9ca3af; font-size: 11.5px; }
.cmr-f input,
.cmr-f select,
.cmr-f textarea {
    padding: 8px 10px;
    border: 1px solid #cbd5d0;
    border-radius: 7px;
    font: inherit;
    font-size: 13.5px;
    background: #fff;
    color: var(--cmr-ink);
}
.cmr-f input:focus,
.cmr-f select:focus,
.cmr-f textarea:focus {
    outline: 2px solid #83bf68;
    outline-offset: 0;
    border-color: #83bf68;
}
.cmr-f textarea { resize: vertical; min-height: 42px; }
.cmr-f input:disabled { background: #f1f3f2; color: #9ca3af; }
.cmr-hint { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: #6b7280; }
.cmr-set-hint { margin-top: 5px; padding-left: 15px; border-left: 3px solid #d1d5db; }

.cmr-inline { display: flex; gap: 8px; }
.cmr-inline input { flex: 1 1 auto; }

.cmr-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #374151;
    cursor: pointer;
}
.cmr-check input { margin-top: 2px; flex: 0 0 auto; }
.cmr-flags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
    margin-bottom: 10px;
}

/* ---- Tekrarli satirlar (yuk / arac / belge / masraf) ---- */
.cmr-rep-row {
    margin: 0 0 12px;
    padding: 12px 13px;
    border: 1px solid var(--cmr-line);
    border-radius: 8px;
    background: #fafbfb;
}
.cmr-rep-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.cmr-rep-h strong { font-size: 12.5px; color: #024430; }
.cmr-rep-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.cmr-xbtn {
    padding: 4px 9px;
    border: 1px solid #cdd6d1;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.cmr-xbtn:hover { background: #eef4f0; }
.cmr-xbtn-del { color: #b42318; border-color: #f0c9c4; }
.cmr-xbtn-del:hover { background: #fdeceb; }
.cmr-xbtn:disabled { opacity: .4; cursor: not-allowed; }

.cmr-addrow {
    margin: 2px 0 0;
    padding: 8px 14px;
    border: 1px dashed #9ec98a;
    border-radius: 7px;
    background: #f4f9f0;
    font-size: 13px;
    font-weight: 600;
    color: #2f6b1d;
    cursor: pointer;
}
.cmr-addrow:hover { background: #eaf4e2; }

.cmr-adr {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #e3d9c3;
    border-radius: 7px;
    background: #fdf9ef;
}

.cmr-cod { margin-top: 8px; }

.cmr-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--cmr-line);
    border-radius: 8px;
    background: #f6f8f7;
    font-size: 13px;
    color: #374151;
}
.cmr-totals strong { color: #024430; }

/* ---- Navigasyon ---- */
.cmr-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--cmr-line);
}
.cmr-btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.cmr-btn-primary { background: #83bf68; color: #fff; }
.cmr-btn-primary:hover { background: #74ad5b; }
.cmr-btn-ghost { background: #fff; border-color: #cdd6d1; color: #374151; }
.cmr-btn-ghost:hover { background: #f2f5f3; }
.cmr-btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.cmr-btn-print { background: #024430; color: #fff; }
.cmr-btn-print:hover { background: #04583e; }
.cmr-btn-print:disabled { background: #9db3aa; cursor: not-allowed; }
.cmr-nav-out { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.cmr-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.cmr-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 15px; height: 15px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cmr-spin .7s linear infinite;
}
.cmr-btn-ghost.is-loading::after { border-color: rgba(2, 68, 48, .3); border-top-color: #024430; }
@keyframes cmr-spin { to { transform: rotate(360deg); } }

/* ---- Dogrulama listesi ---- */
.cmr-errors { margin-top: 16px; }
.cmr-val { margin: 0 0 10px; padding: 12px 14px; border-radius: 8px; font-size: 12.5px; }
.cmr-val-title { margin: 0 0 6px; font-weight: 700; }
.cmr-val ul { margin: 0; padding-left: 18px; }
.cmr-val li { margin: 3px 0; line-height: 1.5; }
.cmr-val-block { background: #fdeceb; border: 1px solid #f3c3bd; color: #8a2018; }
.cmr-val-block a { color: #8a2018; text-decoration: underline; }
.cmr-val-warn { background: #fff7e8; border: 1px solid #f0dcae; color: #7a5b16; }
.cmr-field-flash { outline: 2px solid #f0a020 !important; background: #fff7e8 !important; }

/* ---- Onizleme paneli ---- */
.cmr-preview-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--cmr-line);
    background: #f6f8f7;
}
.cmr-preview-title { font-size: 12.5px; font-weight: 700; color: #024430; margin-right: auto; }
.cmr-zoom { display: flex; gap: 4px; }
.cmr-preview-x { display: none; }

.cmr-preview-scroll {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}
.cmr-preview { zoom: var(--cmr-zoom, 0.55); }
.cmr-preview-fab { display: none; }

/* ============ Rehber ============ */
.cmr-page .cmr-guide { margin: 40px 0 0; }
.cmr-page .cmr-guide h2 { font-size: 24px; font-weight: 600; margin: 0 0 16px; }
.cmr-page .cmr-guide h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.cmr-page .cmr-guide ul { margin: 0 0 18px; padding-left: 20px; }
.cmr-page .cmr-guide li { margin: 6px 0; line-height: 1.6; }
.cmr-page .cmr-guide .cmr-note {
    margin: 24px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    background: #f5f6f5;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}

/* ============ Duyarli ============ */
@media (max-width: 960px) {
    .cmr-layout { grid-template-columns: 1fr; }
    .cmr-preview-col {
        position: fixed;
        inset: 0;
        z-index: 1200;
        border-left: 0;
        transform: translateX(100%);
        transition: transform .25s ease;
    }
    body.cmr-preview-open .cmr-preview-col { transform: none; }
    body.cmr-preview-open { overflow: hidden; }
    .cmr-preview-x { display: inline-block; margin-left: 4px; }
    .cmr-preview-fab {
        display: inline-flex;
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 1100;
        padding: 13px 22px;
        border: 0;
        border-radius: 30px;
        background: #024430;
        color: #fff;
        font-size: 13.5px;
        font-weight: 700;
        box-shadow: 0 6px 20px rgba(2, 68, 48, .35);
        cursor: pointer;
    }
    body.cmr-preview-open .cmr-preview-fab { display: none; }
    .cmr-form-col { padding-bottom: 72px; }
    .cmr-nav-out { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
    .cmr-grid-2 { grid-template-columns: 1fr; }
    .cmr-flags { grid-template-columns: 1fr; }
    .cmr-form-col { padding: 16px 14px 20px; }
}

/* ============ Koyu tema ============ */
html.theme-dark .cmr-page .cmr-legal-strip {
    background: var(--d-surface);
    border-color: var(--d-border);
    border-left-color: var(--d-text-faint);
    color: var(--d-text-soft);
}
html.theme-dark .cmr-app { --cmr-line: var(--d-border); --cmr-ink: var(--d-text); }
html.theme-dark .cmr-toolbar,
html.theme-dark .cmr-preview-bar,
html.theme-dark .cmr-totals { background: var(--d-surface); }
html.theme-dark .cmr-preview-col { background: var(--d-bg-soft, #1a1d1c); }
html.theme-dark .cmr-tbtn,
html.theme-dark .cmr-dot,
html.theme-dark .cmr-xbtn,
html.theme-dark .cmr-btn-ghost { background: var(--d-surface); color: var(--d-text-soft); border-color: var(--d-border); }
html.theme-dark .cmr-fs,
html.theme-dark .cmr-rep-row,
html.theme-dark .cmr-totals { border-color: var(--d-border); }
html.theme-dark .cmr-rep-row { background: var(--d-surface); }
html.theme-dark .cmr-f input,
html.theme-dark .cmr-f select,
html.theme-dark .cmr-f textarea { background: var(--d-bg, #111); color: var(--d-text); border-color: var(--d-border); }
html.theme-dark .cmr-fs legend,
html.theme-dark .cmr-step-h,
html.theme-dark .cmr-rep-h strong,
html.theme-dark .cmr-preview-title { color: var(--d-green-ink); }
html.theme-dark .cmr-f > span { color: var(--d-text-soft); }
html.theme-dark .cmr-page .cmr-guide .cmr-note { background: var(--d-surface); color: var(--d-text-faint); }
html.theme-dark .cmr-addrow { background: rgba(131,191,104,.12); border-color: #3f6b30; color: #9ed586; }
html.theme-dark .cmr-adr { background: rgba(227,217,195,.08); border-color: #4a4433; }

/* Onizleme belgesi koyu temada bile beyaz kagit gorunumunde kalir (WYSIWYG). */
html.theme-dark .cmr-preview { background: transparent; }