* {
    box-sizing: border-box;
}

:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;
    --border: #e2e5e9;
    --text: #17191c;
    --muted: #6e747d;
    --primary: #111827;
    --primary-hover: #252f3f;
    --danger: #b42318;
    --danger-bg: #fef3f2;
    --radius: 16px;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--bg);
    color: var(--text);
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}


/* LOGIN */

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-shell {
    width: 100%;
    max-width: 430px;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 38px;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.06);
}

.brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary);
    color: white;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -1px;
}

.brand-mark-small {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 14px;
}

.login-heading {
    margin: 24px 0 28px;
}

.login-heading h1 {
    margin: 0 0 6px;
    font-size: 28px;
}

.login-heading p {
    margin: 0;
    color: var(--muted);
}

.login-form {
    display: grid;
    gap: 18px;
}

.login-form label {
    display: grid;
    gap: 8px;
    font-size: 14px;
    font-weight: 650;
}

.login-form input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    outline: none;
}

.login-form input:focus,
textarea:focus {
    border-color: #9ca3af;
    box-shadow:
        0 0 0 3px rgba(17, 24, 39, 0.06);
}

.alert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 14px;
}

.alert-error {
    color: var(--danger);
    background: var(--danger-bg);
}


/* BUTTONS */

.primary-button,
.secondary-button,
.ghost-button {
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    transition: 0.15s ease;
}

.primary-button {
    min-height: 48px;
    padding: 0 20px;
    background: var(--primary);
    color: white;
}

.primary-button:hover {
    background: var(--primary-hover);
}

.secondary-button {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    color: var(--text);
}

.secondary-button:hover {
    background: #f0f2f5;
}

.ghost-button {
    padding: 10px 14px;
    background: transparent;
    color: var(--muted);
}

.ghost-button:hover {
    background: var(--surface-soft);
    color: var(--text);
}


/* TOP BAR */

.topbar {
    height: 70px;
    padding: 0 28px;
    background: rgba(255,255,255,0.92);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(16px);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-brand strong,
.topbar-brand span {
    display: block;
}

.topbar-brand strong {
    font-size: 15px;
}

.topbar-brand span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}


/* PAGE */

.page-shell {
    max-width: 1020px;
    margin: 0 auto;
    padding: 46px 24px 80px;
}

.page-title {
    margin-bottom: 28px;
}

.page-title h1 {
    font-size: 34px;
    margin: 0 0 8px;
    letter-spacing: -1px;
}

.page-title p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}


/* NEWS FORM */

.news-layout {
    display: grid;
    gap: 18px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.panel-heading > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-heading h2 {
    margin: 0;
    font-size: 20px;
}

.step-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--primary);
    color: white;
    font-size: 13px;
    font-weight: 800;
}

.optional-label {
    color: var(--muted);
    font-size: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 9px;
}

.section-help {
    color: var(--muted);
    line-height: 1.55;
    font-size: 14px;
    margin: 0 0 18px;
}

textarea {
    width: 100%;
    resize: vertical;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    line-height: 1.6;
    min-height: 130px;
    background: white;
}

.action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}


/* DROPZONE */

.drop-zone {
    width: 100%;
    min-height: 170px;
    border: 2px dashed #d5d9df;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
    padding: 24px;
    cursor: pointer;
    background: var(--surface-soft);
    transition: 0.15s ease;
}

.drop-zone:hover,
.drop-zone.dragging {
    border-color: #9299a3;
    background: #f1f3f6;
}

.drop-zone strong {
    font-size: 15px;
}

.drop-zone span:not(.drop-icon) {
    font-size: 13px;
    color: var(--muted);
}

.drop-icon {
    font-size: 28px;
    margin-bottom: 3px;
}

.media-list {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.media-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 13px;
}

.media-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-size {
    color: var(--muted);
    flex-shrink: 0;
}

.file-status {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
}


/* SUBMIT */

.submit-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.submit-panel strong,
.submit-panel span {
    display: block;
}

.submit-panel > div > span {
    color: var(--muted);
    font-size: 13px;
    margin-top: 5px;
}

.large-button {
    min-width: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* MOBILE */

@media (max-width: 700px) {

    .topbar {
        padding: 0 16px;
    }

    .page-shell {
        padding:
            28px
            14px
            60px;
    }

    .page-title h1 {
        font-size: 28px;
    }

    .panel {
        padding: 19px;
    }

    .panel-heading {
        align-items: flex-start;
    }

    .optional-label {
        display: none;
    }

    .submit-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .large-button {
        width: 100%;
    }

    .login-card {
        padding: 28px 22px;
    }
}


/* ============================================================
   PREVIEW
   ============================================================ */

.preview-card {
    padding: 34px;
}

.preview-meta {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 20px;
}

.preview-title {
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -1.2px;
    margin:
        0
        0
        18px;
}

.preview-spot {
    font-size: 19px;
    line-height: 1.55;
    font-weight: 600;
    color: #383d44;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom:
        1px solid
        var(--border);
}

.preview-body {
    font-size: 17px;
    line-height: 1.8;
    white-space: pre-wrap;
}

.preview-photos {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );
    gap: 14px;
}

.preview-photos img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    border:
        1px solid
        var(--border);
}

.link-button {
    text-decoration: none;
}

@media (max-width: 700px) {
    .preview-card {
        padding: 20px;
    }

    .preview-title {
        font-size: 28px;
    }

    .preview-spot {
        font-size: 17px;
    }

    .preview-body {
        font-size: 16px;
    }
}


/* ============================================================
   DRAFT / AUTOSAVE
   ============================================================ */

.saved-item {
    border-color: #cddfd4;
    background: #f5faf7;
}

.upload-error {
    border-color: #efc6c2;
    background: #fff7f6;
}


/* ============================================================
   PROCESSING OVERLAY
   ============================================================ */

.processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(17, 24, 39, 0.58);

    backdrop-filter: blur(3px);
}

.processing-overlay.active {
    display: flex;
}

.processing-card {
    width: min(
        420px,
        calc(100vw - 32px)
    );

    background: #ffffff;

    border-radius: 18px;

    padding: 34px 30px;

    text-align: center;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.22);
}

.processing-spinner {
    width: 50px;
    height: 50px;

    margin:
        0 auto
        22px;

    border-radius: 50%;

    border:
        4px solid
        #e5e7eb;

    border-top-color:
        var(--primary);

    animation:
        processing-spin
        0.85s linear
        infinite;
}

@keyframes processing-spin {
    to {
        transform:
            rotate(360deg);
    }
}

.processing-card h2 {
    margin:
        0
        0
        9px;

    font-size: 22px;
}

.processing-card p {
    min-height: 22px;

    margin:
        0
        0
        22px;

    color:
        var(--muted);

    font-size: 14px;
}

.processing-progress {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 20px;

    background:
        #edf0f3;

    margin-bottom: 16px;
}

.processing-progress-bar {
    width: 8%;
    height: 100%;

    border-radius: inherit;

    background:
        var(--primary);

    transition:
        width
        0.45s ease;
}

.processing-note {
    display: block;

    color:
        #8a9098;

    font-size: 12px;

    line-height: 1.45;
}

body.processing {
    overflow: hidden;
}


/* ============================================================
   VIDEO PREVIEW
   ============================================================ */

.preview-videos {
    display: grid;
    gap: 18px;
}

.preview-video-item {
    border:
        1px solid
        var(--border);

    border-radius: 14px;

    overflow: hidden;

    background:
        var(--surface-soft);
}

.preview-video-item video {
    display: block;

    width: 100%;
    max-height: 560px;

    background: #000;
}

.preview-video-name {
    padding: 10px 13px;

    color:
        var(--muted);

    font-size: 13px;
}


/* ============================================================
   MEDIA DECISION CARDS
   ============================================================ */

.media-decision-list {
    gap: 14px;
}

.media-decision-card {
    padding: 18px;

    border:
        1px solid
        var(--border);

    border-radius: 14px;

    background: #fff;
}

.media-decision-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding-bottom: 14px;

    border-bottom:
        1px solid
        var(--border);
}

.media-decision-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.media-decision-header strong {
    font-size: 14px;
}

.media-decision-header span {
    color:
        var(--muted);

    font-size: 12px;
}

.decision-save-status {
    white-space: nowrap;
}

.media-decision-section {
    display: flex;
    flex-direction: column;

    gap: 10px;

    padding-top: 15px;
}

.media-decision-section > strong {
    font-size: 13px;
}

.media-decision-section label,
.decision-inline label,
.checkbox-line {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 13px;

    cursor: pointer;
}

.decision-inline {
    display: flex;

    gap: 24px;
}

.speaker-fields {
    margin-top: 15px;

    padding: 14px;

    border-radius: 10px;

    background:
        var(--surface-soft);
}

.speaker-fields > label:first-child {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.speaker-fields label span {
    font-size: 12px;

    font-weight: 600;
}

.speaker-fields input[type="text"] {
    width: 100%;

    box-sizing: border-box;

    padding: 10px 12px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background: #fff;
}

.checkbox-line {
    margin-top: 11px;
}

.segment-placeholder {
    padding: 10px 12px;

    border-radius: 8px;

    background:
        var(--surface-soft);

    color:
        var(--muted);

    font-size: 12px;
}


/* ============================================================
   VIDEO CLIP EDITOR
   ============================================================ */

.clip-editor {
    margin-top: 8px;

    padding: 14px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background: #f8f9fa;
}

.clip-add-row {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.clip-add-row label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.clip-add-row label span {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

.clip-add-row input {
    width: 120px;

    padding: 9px 10px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background: #fff;
}

.clip-arrow {
    padding-bottom: 10px;

    color:
        var(--muted);
}

.clip-editor-error {
    margin-top: 9px;

    color: #b42318;

    font-size: 12px;
}

.clip-list {
    display: grid;

    gap: 10px;

    margin-top: 14px;
}

.clip-row {
    padding: 14px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background: #fff;
}

.clip-row-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;
}

.clip-row-top > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.clip-row-top strong {
    font-size: 13px;
}

.clip-row-top span {
    color:
        var(--muted);

    font-size: 11px;
}

.clip-delete-button {
    border: 0;

    background: transparent;

    color: #b42318;

    cursor: pointer;

    font-size: 12px;
}

.clip-audio-choice {
    margin-top: 13px;

    padding-top: 13px;

    border-top:
        1px solid
        var(--border);
}

.clip-audio-choice > strong {
    display: block;

    margin-bottom: 8px;

    font-size: 12px;
}

.clip-speaker-fields {
    margin-top: 12px;

    padding: 12px;

    border-radius: 8px;

    background:
        var(--surface-soft);
}

.clip-speaker-fields > label:first-child {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.clip-speaker-fields input[type="text"] {
    width: 100%;

    box-sizing: border-box;

    padding: 9px 10px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background: #fff;
}

.clip-save-status {
    margin-top: 8px;

    color:
        var(--muted);

    font-size: 11px;
}

@media (max-width: 700px) {

    .clip-add-row {
        align-items: stretch;
    }

    .clip-add-row label {
        flex: 1;
    }

    .clip-add-row input {
        width: 100%;
        box-sizing: border-box;
    }

    .clip-arrow {
        display: none;
    }
}


/* ============================================================
   VIDEO MARK IN / OUT EDITOR
   ============================================================ */

.video-mark-editor {
    margin-top: 16px;
    margin-bottom: 4px;

    padding: 14px;

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    background:
        #f8f9fa;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.video-mark-editor.active-video-editor {
    box-shadow:
        0 0 0 3px
        rgba(0, 0, 0, 0.06);
}

.video-mark-player-wrap {
    overflow: hidden;

    border-radius: 10px;

    background: #000;
}

.video-mark-player {
    display: block;

    width: 100%;
    max-height: 520px;

    background: #000;
}

.video-time-line {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 9px;

    font-size: 12px;

    color:
        var(--muted);
}

.video-time-line strong {
    color:
        var(--text);
}

.video-seek-controls {
    display: flex;
    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 10px;
}

.compact-button {
    padding: 7px 10px;

    font-size: 12px;
}

.mark-controls {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 14px;
}

.mark-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 14px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    background: #fff;

    cursor: pointer;

    font-weight: 700;
}

.mark-button:hover {
    background:
        var(--surface-soft);
}

.mark-button small {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 6px;

    background:
        var(--surface-soft);

    font-size: 10px;
}

.mark-values {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-top: 10px;
}

.mark-values > div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 9px 10px;

    border-radius: 8px;

    background: #fff;

    text-align: center;
}

.mark-values span {
    font-size: 10px;
    font-weight: 700;

    color:
        var(--muted);
}

.mark-values strong {
    font-size: 12px;
}

.video-keyboard-help {
    margin:
        10px
        0
        0;

    text-align: center;

    font-size: 11px;

    color:
        var(--muted);
}


/* ============================================================
   BAŞKA VIDEO
   ============================================================ */

.add-another-video-row {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 12px;
}

.add-another-video-row span {
    color:
        var(--muted);

    font-size: 12px;
}


@media (
    max-width: 700px
) {

    .mark-controls {
        grid-template-columns:
            1fr;
    }

    .mark-values {
        grid-template-columns:
            1fr;
    }

    .add-another-video-row {
        align-items: stretch;
        flex-direction: column;
    }
}


/* ============================================================
   MEDIA DELETE
   ============================================================ */

.media-header-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.media-delete-button {
    padding: 6px 9px;

    border:
        1px solid
        #e5b8b8;

    border-radius: 7px;

    background:
        #fff;

    color:
        #b42318;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.media-delete-button:hover {
    background:
        #fff4f3;
}

.media-delete-button:disabled {
    opacity: .55;

    cursor: wait;
}


/* ============================================================
   VIDEO / SES UPLOAD OVERLAY
   ============================================================ */

.upload-overlay {
    position: fixed;
    inset: 0;

    z-index: 10050;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(17, 24, 39, 0.62);

    backdrop-filter:
        blur(3px);
}

.upload-overlay.active {
    display: flex;
}

.upload-card {
    width:
        min(
            460px,
            calc(100vw - 32px)
        );

    padding:
        30px;

    border-radius:
        18px;

    background:
        #fff;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .24);

    text-align:
        center;
}

.upload-spinner {
    width: 46px;
    height: 46px;

    margin:
        0 auto
        18px;

    border:
        4px solid
        #e6e9ed;

    border-top-color:
        var(--primary);

    border-radius:
        50%;

    animation:
        upload-spin
        .85s linear
        infinite;
}

@keyframes upload-spin {
    to {
        transform:
            rotate(360deg);
    }
}

.upload-card h2 {
    margin:
        0
        0
        8px;

    font-size:
        21px;
}

.upload-file-name {
    overflow:
        hidden;

    margin-bottom:
        20px;

    color:
        var(--muted);

    font-size:
        13px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.upload-progress-track {
    overflow:
        hidden;

    width:
        100%;

    height:
        10px;

    border-radius:
        20px;

    background:
        #e9ecef;
}

.upload-progress-bar {
    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--primary);

    transition:
        width
        .12s linear;
}

.upload-progress-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        9px;

    font-size:
        12px;
}

.upload-progress-percent {
    font-size:
        14px;
}

.upload-progress-size {
    color:
        var(--muted);
}

.upload-queue-info {
    min-height:
        18px;

    margin-top:
        15px;

    color:
        var(--muted);

    font-size:
        12px;
}

.upload-warning {
    margin:
        16px
        0
        0;

    color:
        #8a9098;

    font-size:
        11px;
}

body.uploading-media {
    overflow:
        hidden;
}


/* ============================================================
   ÇOKLU VIDEO UYARISI
   ============================================================ */

.multi-video-warning {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin:
        12px
        0
        15px;

    padding:
        12px
        14px;

    border:
        1px solid
        #ead7a0;

    border-radius:
        10px;

    background:
        #fffaf0;

    color:
        #745b16;

    font-size:
        12px;

    line-height:
        1.45;
}

.multi-video-warning strong {
    color:
        #5d480e;

    font-size:
        12px;
}


/* ============================================================
   UPLOAD İŞLEM AŞAMASI
   ============================================================ */

.upload-stage-message {
    margin-top:
        14px;

    padding:
        9px
        11px;

    border-radius:
        8px;

    background:
        #f4f6f8;

    color:
        var(--muted);

    font-size:
        12px;
}

.upload-overlay.processing-stage
.upload-progress-track {
    opacity:
        .35;
}

.upload-overlay.processing-stage
.upload-progress-meta {
    display:
        none;
}

.upload-overlay.processing-stage
.upload-stage-message {
    background:
        #f1f7f3;

    color:
        #237a45;
}


/* ============================================================
   HABER EDITORU
   ============================================================ */

.editor-page-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.editor-save-state {
    flex-shrink: 0;

    padding:
        7px
        11px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        700;
}

.editor-save-state.saved {
    background:
        #eef8f1;

    color:
        #247344;
}

.editor-save-state.dirty {
    background:
        #fff7e6;

    color:
        #916500;
}


.news-editor-card {
    position: relative;
}


.editable-news-field {
    outline:
        none;

    border-radius:
        7px;

    transition:
        background .15s ease,
        box-shadow .15s ease;
}


.editable-news-field:hover {
    background:
        #f7f8fa;

    box-shadow:
        0 0 0 5px
        #f7f8fa;
}


.editable-news-field:focus {
    background:
        #fff;

    box-shadow:
        0 0 0 2px
        #d7dce3;
}


.editable-news-body {
    min-height:
        260px;

    white-space:
        pre-wrap;
}


.editor-save-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        20px;

    margin-top:
        14px;

    padding:
        18px
        20px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        #fff;
}


.editor-save-panel > div {
    display: flex;
    flex-direction: column;

    gap:
        4px;
}


.editor-save-panel span {
    color:
        var(--muted);

    font-size:
        12px;
}


@media (
    max-width: 700px
) {

    .editor-page-title,
    .editor-save-panel {
        align-items:
            stretch;

        flex-direction:
            column;
    }
}


/* ============================================================
   HABER EDITORU - KAYDEDILMEMIS DEGISIKLIK MODALI
   ============================================================ */

.editor-guard-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(15, 23, 42, .58);

    backdrop-filter:
        blur(3px);
}


.editor-guard-overlay.active {
    display:
        flex;
}


body.editor-guard-open {
    overflow:
        hidden;
}


.editor-guard-modal {
    width:
        min(100%, 560px);

    padding:
        26px;

    border-radius:
        18px;

    background:
        #fff;

    box-shadow:
        0 24px 70px
        rgba(15, 23, 42, .24);
}


.editor-guard-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        16px;

    border-radius:
        50%;

    background:
        #fff4d6;

    color:
        #8a6500;

    font-size:
        22px;

    font-weight:
        800;
}


.editor-guard-content h2 {
    margin:
        0 0 8px;

    font-size:
        20px;
}


.editor-guard-content p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.6;
}


.editor-guard-actions {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        9px;

    margin-top:
        24px;
}


@media (
    max-width: 700px
) {

    .editor-guard-actions {
        flex-direction:
            column-reverse;
    }

    .editor-guard-actions button {
        width:
            100%;
    }
}


/* ============================================================
   HABERI SERVIS ET
   ============================================================ */

.final-action-buttons {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.mail-service-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        10020;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(15, 23, 42, .6);

    backdrop-filter:
        blur(3px);
}


.mail-service-overlay.active {
    display:
        flex;
}


body.mail-service-open {
    overflow:
        hidden;
}


.mail-service-modal {
    width:
        min(100%, 580px);

    padding:
        25px;

    border-radius:
        18px;

    background:
        #fff;

    box-shadow:
        0 28px 80px
        rgba(15, 23, 42, .26);
}


.mail-service-heading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        18px;
}


.mail-service-heading h2 {
    margin:
        0 0 5px;

    font-size:
        21px;
}


.mail-service-heading p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;
}


.mail-close-button {
    border:
        0;

    background:
        transparent;

    color:
        var(--muted);

    cursor:
        pointer;

    font-size:
        28px;

    line-height:
        1;
}


.mail-service-option {
    margin-top:
        10px;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        #fff;
}


.mail-radio-row {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    cursor:
        pointer;
}


.mail-radio-row > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.mail-radio-row strong {
    font-size:
        13px;
}


.mail-radio-row span {
    color:
        var(--muted);

    font-size:
        11px;
}


.single-email-fields {
    margin-top:
        12px;

    padding-left:
        26px;
}


.single-email-fields input {
    width:
        100%;

    box-sizing:
        border-box;

    padding:
        10px 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;
}


.mail-service-result {
    margin-top:
        14px;

    padding:
        12px;

    border-radius:
        9px;

    white-space:
        pre-wrap;

    font-size:
        12px;

    line-height:
        1.5;
}


.mail-service-result.processing {
    background:
        #f4f6f8;

    color:
        var(--muted);
}


.mail-service-result.success {
    background:
        #eef8f1;

    color:
        #247344;
}


.mail-service-result.error {
    background:
        #fff1f0;

    color:
        #b42318;
}


.mail-service-actions {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        9px;

    margin-top:
        18px;
}


@media (
    max-width: 700px
) {

    .final-action-buttons,
    .mail-service-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }
}


/* ============================================================
   YARIM KALAN HABER
   ============================================================ */

.recovery-card {
    max-width:
        720px;

    margin:
        55px auto 0;

    padding:
        34px;
}


.recovery-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        18px;

    border-radius:
        50%;

    background:
        #eef4ff;

    font-size:
        28px;

    font-weight:
        700;
}


.recovery-card h1 {
    margin:
        0 0 10px;

    font-size:
        25px;
}


.recovery-lead {
    max-width:
        590px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.65;
}


.recovery-summary {
    margin-top:
        24px;

    padding:
        17px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        #f8f9fb;
}


.recovery-news-title {
    margin-bottom:
        11px;

    font-size:
        15px;

    font-weight:
        700;
}


.recovery-stats {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.recovery-stats span {
    padding:
        5px 9px;

    border-radius:
        20px;

    background:
        #fff;

    color:
        var(--muted);

    font-size:
        11px;
}


.recovery-notice {
    margin-top:
        16px;

    padding:
        11px 13px;

    border-radius:
        9px;

    background:
        #eef8f1;

    color:
        #247344;

    font-size:
        12px;
}


.recovery-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        24px;
}


.recovery-actions form {
    margin:
        0;
}


.danger-outline-button {
    padding:
        10px 16px;

    border:
        1px solid
        #d92d20;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #b42318;

    cursor:
        pointer;

    font-weight:
        600;
}


.danger-button {
    padding:
        10px 16px;

    border:
        0;

    border-radius:
        8px;

    background:
        #d92d20;

    color:
        #fff;

    cursor:
        pointer;

    font-weight:
        700;
}


.discard-warning-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        15px;

    border-radius:
        50%;

    background:
        #fff1f0;

    color:
        #b42318;

    font-size:
        21px;

    font-weight:
        800;
}


@media (
    max-width: 700px
) {

    .recovery-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .recovery-actions form,
    .recovery-actions button {
        width:
            100%;
    }
}


/* ==========================================================
   HABERLERIM ARCHIVE
   ========================================================== */

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: inherit;
    opacity: .72;
    transition:
        background .15s ease,
        opacity .15s ease;
}

.topbar-nav-link:hover,
.topbar-nav-link.active {
    background: rgba(127, 127, 127, .10);
    opacity: 1;
}

.archive-shell {
    max-width: 1400px;
}

.archive-page-title {
    align-items: center;
}

.archive-stats {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.archive-stat-card {
    padding: 18px 20px;
    border: 1px solid
        rgba(127, 127, 127, .18);
    border-radius: 14px;
    background: var(
        --panel-bg,
        #fff
    );
}

.archive-stat-card span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    opacity: .62;
}

.archive-stat-card strong {
    display: block;
    font-size: 28px;
    line-height: 1;
}

.archive-panel {
    overflow: hidden;
}

.archive-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.archive-panel-heading h2 {
    margin: 0 0 5px;
}

.archive-panel-heading p {
    margin: 0;
    opacity: .62;
}

.archive-count {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(
        127,
        127,
        127,
        .10
    );
    font-size: 13px;
    font-weight: 700;
}

.archive-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.archive-table {
    width: 100%;
    border-collapse: collapse;
}

.archive-table th,
.archive-table td {
    padding: 16px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid
        rgba(127, 127, 127, .13);
}

.archive-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .55;
}

.archive-table tbody tr:last-child td {
    border-bottom: 0;
}

.archive-news-cell {
    min-width: 290px;
}

.archive-news-cell strong {
    display: block;
    line-height: 1.45;
}

.archive-news-cell span {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    opacity: .45;
}

.archive-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.archive-status-sent {
    background: rgba(
        34,
        197,
        94,
        .13
    );
    color: #15803d;
}

.archive-status-prepared {
    background: rgba(
        59,
        130,
        246,
        .13
    );
    color: #1d4ed8;
}

.archive-status-draft {
    background: rgba(
        245,
        158,
        11,
        .14
    );
    color: #b45309;
}

.archive-status-cancelled {
    background: rgba(
        239,
        68,
        68,
        .12
    );
    color: #b91c1c;
}

.archive-date {
    white-space: nowrap;
    font-size: 13px;
}

.archive-mail-result strong,
.archive-mail-result span {
    display: block;
    white-space: nowrap;
}

.archive-mail-result strong {
    font-size: 13px;
}

.archive-mail-result span {
    margin-top: 3px;
    font-size: 12px;
    opacity: .58;
}

.archive-mail-failed {
    color: #b91c1c;
    opacity: 1 !important;
}

.archive-muted {
    font-size: 13px;
    opacity: .48;
}

.archive-empty {
    padding: 55px 20px;
    text-align: center;
}

.archive-empty strong {
    display: block;
    font-size: 18px;
}

.archive-empty p {
    margin: 8px 0 22px;
    opacity: .62;
}


@media (max-width: 900px) {

    .archive-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .topbar {
        gap: 12px;
    }

    .topbar-actions {
        gap: 8px;
    }

    .topbar-nav-link {
        padding: 0 9px;
        font-size: 13px;
    }

}


@media (max-width: 700px) {

    .topbar-nav {
        display: none;
    }

    .archive-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .archive-stat-card:first-child {
        grid-column: 1 / -1;
    }

    .archive-table thead {
        display: none;
    }

    .archive-table,
    .archive-table tbody,
    .archive-table tr,
    .archive-table td {
        display: block;
        width: 100%;
    }

    .archive-table tr {
        padding: 14px 0;
        border-bottom: 1px solid
            rgba(127, 127, 127, .15);
    }

    .archive-table tbody tr:last-child {
        border-bottom: 0;
    }

    .archive-table td {
        display: grid;
        grid-template-columns:
            110px minmax(0, 1fr);
        gap: 12px;
        padding: 7px 0;
        border: 0;
    }

    .archive-table td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 800;
        opacity: .48;
    }

    .archive-news-cell {
        min-width: 0;
    }

}



/* ===== PROFESSIONAL ADMIN HEADER V2 ===== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 68px;
    padding: 0 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #e5e7eb;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
}

.topbar-brand strong {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    color: #111827;
}

.topbar-brand span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
}

.topbar-actions {
    margin-left: auto;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.topbar-nav {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.topbar-nav-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #4b5563 !important;
    background: transparent;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.topbar-nav-link:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #111827 !important;
}

.topbar-nav-link.active {
    background: #111827;
    border-color: #111827;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(17, 24, 39, .12);
}

.nav-icon {
    font-size: 15px;
    line-height: 1;
}

.topbar-divider {
    width: 1px;
    height: 28px;
    background: #e5e7eb;
}

.topbar-logout-form {
    margin: 0;
}

.topbar-logout-button {
    height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6b7280;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.topbar-logout-button:hover {
    background: #fef2f2;
    color: #b91c1c;
}


/* ============================================================
   HABERLERİM
   ============================================================ */

.archive-shell {
    width: min(1180px, calc(100% - 48px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.archive-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.archive-stats {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 20px;
}

.archive-stat-card {
    position: relative;
    min-height: 104px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .025);
}

.archive-stat-card::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #9ca3af;
}

.archive-stat-card span {
    display: block;
    margin: 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

.archive-stat-card strong {
    display: block;
    margin-top: 16px;
    color: #111827;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.04em;
}

.archive-stat-sent::before {
    background: #16a34a;
}

.archive-stat-prepared::before {
    background: #2563eb;
}

.archive-stat-draft::before {
    background: #d97706;
}

.archive-stat-cancelled::before {
    background: #dc2626;
}

.archive-panel {
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
}

.archive-panel-heading {
    padding: 22px 24px 18px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #eef0f3;
}

.archive-panel-heading h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 18px;
}

.archive-panel-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.archive-count {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

.archive-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.archive-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.archive-table thead {
    background: #f9fafb;
}

.archive-table th {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
    text-align: left;
}

.archive-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
    color: #374151;
    font-size: 13px;
}

.archive-table tbody tr {
    transition: background .14s ease;
}

.archive-table tbody tr:hover {
    background: #fafafa;
}

.archive-table tbody tr:last-child td {
    border-bottom: 0;
}

.archive-news-cell {
    min-width: 330px;
    width: 42%;
}

.archive-news-cell strong {
    display: block;
    color: #111827;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
}

.archive-news-cell span {
    display: block;
    margin-top: 5px;
    color: #9ca3af;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.archive-status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.archive-status-sent {
    background: #ecfdf3;
    color: #15803d;
}

.archive-status-prepared {
    background: #eff6ff;
    color: #1d4ed8;
}

.archive-status-draft {
    background: #fff7ed;
    color: #b45309;
}

.archive-status-cancelled {
    background: #fef2f2;
    color: #b91c1c;
}

.archive-date {
    color: #4b5563;
    font-size: 12px;
    white-space: nowrap;
}

.archive-mail-result strong {
    display: block;
    color: #15803d;
    font-size: 12px;
}

.archive-mail-result span {
    display: block;
    margin-top: 3px;
    color: #9ca3af;
    font-size: 11px;
}

.archive-muted {
    color: #9ca3af;
    font-size: 12px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {

    .topbar {
        padding-left: 20px;
        padding-right: 20px;
    }

    .topbar-nav-link {
        padding: 0 10px;
    }

    .archive-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {

    .topbar {
        min-height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        align-items: flex-start;
    }

    .topbar-actions {
        gap: 6px;
    }

    .topbar-nav {
        gap: 3px;
    }

    .topbar-nav-link {
        height: 36px;
        padding: 0 8px;
        font-size: 0;
    }

    .topbar-nav-link .nav-icon {
        font-size: 17px;
    }

    .topbar-divider {
        height: 24px;
    }

    .topbar-logout-button {
        height: 36px;
        padding: 0 8px;
        font-size: 12px;
    }

    .archive-shell {
        width: min(100% - 24px, 1180px);
    }

    .archive-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .archive-stat-card:first-child {
        grid-column: 1 / -1;
    }

    .archive-table thead {
        display: none;
    }

    .archive-table,
    .archive-table tbody,
    .archive-table tr,
    .archive-table td {
        display: block;
        width: 100%;
    }

    .archive-table tr {
        padding: 15px 16px;
        border-bottom: 1px solid #e5e7eb;
    }

    .archive-table td {
        display: grid;
        grid-template-columns: 105px 1fr;
        gap: 12px;
        padding: 6px 0;
        border: 0;
    }

    .archive-table td::before {
        content: attr(data-label);
        color: #9ca3af;
        font-size: 11px;
        font-weight: 800;
    }

    .archive-news-cell {
        min-width: 0;
        width: auto;
    }
}



/* ===== HABERLERIM OPEN LINK V1 ===== */

.archive-news-link {
    display: inline;
    color: #111827 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    transition: color .15s ease;
}

.archive-news-link:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.archive-open-hint {
    display: block !important;
    margin-top: 4px !important;
    color: #2563eb !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 700;
    opacity: .75 !important;
}



/* ===== ARCHIVE ACTION ICONS V1 ===== */

.archive-actions-head {
    width: 92px;
    text-align: center !important;
}

.archive-actions-cell {
    width: 92px;
    white-space: nowrap;
}

.archive-actions-cell {
    display: table-cell;
}

.archive-actions-cell > a,
.archive-actions-cell > form {
    vertical-align: middle;
}

.archive-icon-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #ffffff;
    color: #6b7280;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        background .14s ease,
        border-color .14s ease,
        color .14s ease,
        transform .14s ease;
}

.archive-icon-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.archive-icon-button:hover {
    transform: translateY(-1px);
}

.archive-edit-button:hover {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.archive-delete-button:hover {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.archive-cancel-form {
    display: inline-block;
    margin: 0 0 0 5px;
}

.archive-no-action {
    display: block;
    text-align: center;
    color: #d1d5db;
}

@media (max-width: 720px) {

    .archive-actions-cell {
        display: grid !important;
    }

}



/* ===== SCHEDULE SERVICE V1 ===== */

.schedule-primary-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 18px;
    border: 1px solid #4f46e5;
    border-radius: 11px;
    background: #eef2ff;
    color: #4338ca;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.schedule-primary-button:hover {
    background: #e0e7ff;
    transform: translateY(-1px);
    box-shadow:
        0 5px 15px
        rgba(79, 70, 229, .12);
}

.schedule-primary-button:disabled {
    opacity: .55;
    cursor: default;
    transform: none;
}

.schedule-service-modal {
    width: min(540px, calc(100vw - 28px));
}

.schedule-modal-kicker {
    margin-bottom: 5px;
    color: #4f46e5;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.schedule-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px 0;
}

.schedule-field {
    display: block;
}

.schedule-field span {
    display: block;
    margin-bottom: 7px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
}

.schedule-field input {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.schedule-field input:focus {
    border-color: #818cf8;
    box-shadow:
        0 0 0 3px
        rgba(99, 102, 241, .10);
}

.schedule-section-title {
    margin: 18px 0 9px;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.schedule-radio-row {
    margin-bottom: 9px;
}

.schedule-email-field {
    margin: 8px 0 15px;
}

.schedule-info-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #e0e7ff;
    border-radius: 11px;
    background: #f5f7ff;
}

.schedule-info-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #4f46e5;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.schedule-info-card strong {
    display: block;
    color: #3730a3;
    font-size: 12px;
}

.schedule-info-card span {
    display: block;
    margin-top: 3px;
    color: #6366f1;
    font-size: 11px;
    line-height: 1.45;
}

.archive-stat-scheduled::before {
    background: #7c3aed;
}

.archive-status-scheduled {
    background: #f3e8ff;
    color: #7e22ce;
}

.archive-status-schedule_error {
    background: #fef2f2;
    color: #b91c1c;
}

.archive-schedule-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

.archive-schedule-icon {
    color: #7c3aed;
    font-size: 15px;
    font-weight: 800;
}

.archive-schedule-target {
    display: block;
    margin-top: 4px;
    color: #8b5cf6;
    font-size: 10px;
    font-weight: 700;
}

.archive-unschedule-button:hover {
    color: #7c3aed;
    border-color: #ddd6fe;
    background: #f5f3ff;
}


@media (max-width: 720px) {

    .schedule-date-grid {
        grid-template-columns: 1fr;
    }

}



/* ============================================================
   PLANLI GONDERILDI
   ============================================================ */

.archive-status-planned-sent {
    background: #f3e8ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}

.archive-planned-sent-date {
    color: #6d28d9;
}

.archive-planned-sent-note {
    display: block;
    margin-top: 4px;
    color: #7c3aed;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}



/* =========================================================
   MOBIL MUHABIR DASHBOARD V1
   ========================================================= */

.dashboard-shell {
    padding-top: 32px;
}

.dashboard-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    padding: 38px 42px;
    margin-bottom: 30px;

    border: 1px solid #e6eaf0;
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(37, 99, 235, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8faff 100%
        );

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.06);
}

.dashboard-hero-copy {
    max-width: 680px;
}

.dashboard-eyebrow,
.dashboard-section-label {
    display: inline-block;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.14em;

    color: #2563eb;
}

.dashboard-hero h1 {
    margin: 0;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.05;

    letter-spacing: -0.035em;

    color: #0f172a;
}

.dashboard-hero p {
    max-width: 620px;

    margin: 16px 0 0;

    font-size: 16px;
    line-height: 1.7;

    color: #64748b;
}

.dashboard-hero-actions {
    flex: 0 0 auto;
}

.dashboard-new-button {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 220px;

    padding: 17px 20px;

    border-radius: 15px;

    background: #2563eb;
    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 12px 25px rgba(37, 99, 235, 0.22);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.dashboard-new-button:hover {
    transform: translateY(-2px);

    background: #1d4ed8;

    box-shadow:
        0 16px 32px rgba(37, 99, 235, 0.28);
}

.dashboard-new-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.15);

    font-size: 25px;
    line-height: 1;
}

.dashboard-new-button strong,
.dashboard-new-button small {
    display: block;
}

.dashboard-new-button strong {
    font-size: 15px;
}

.dashboard-new-button small {
    margin-top: 3px;

    font-size: 11px;
    font-weight: 500;

    opacity: 0.78;
}

.dashboard-summary {
    margin-bottom: 14px;
}

.dashboard-summary-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.dashboard-summary-title h2 {
    margin: 0;

    font-size: 22px;
    letter-spacing: -0.02em;

    color: #0f172a;
}

.dashboard-summary-total {
    padding: 7px 11px;

    border: 1px solid #e2e8f0;
    border-radius: 999px;

    background: #ffffff;

    font-size: 12px;
    font-weight: 700;

    color: #64748b;
}

.dashboard-stats {
    margin-bottom: 30px;
}

.dashboard-stats .archive-stat-card {
    position: relative;
    overflow: hidden;

    min-height: 126px;

    padding: 21px;

    border-radius: 17px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.045);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.dashboard-stats .archive-stat-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 30px rgba(15, 23, 42, 0.075);
}

.dashboard-stats .archive-stat-card span {
    font-size: 12px;
    font-weight: 700;

    color: #64748b;
}

.dashboard-stats .archive-stat-card strong {
    display: block;

    margin-top: 8px;

    font-size: 30px;
    line-height: 1;

    letter-spacing: -0.04em;

    color: #0f172a;
}

.dashboard-stat-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dashboard-stat-main strong {
    margin-top: 5px !important;
}

.dashboard-stat-main small {
    display: block;

    margin-top: 7px;

    font-size: 11px;

    color: #94a3b8;
}

.dashboard-stat-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 13px;

    background: #eff6ff;
    color: #2563eb;

    font-size: 21px;
    font-weight: 800;
}

.dashboard-history-heading {
    align-items: flex-end;
}

.dashboard-history-heading h2 {
    margin-top: 1px;
}

.dashboard-history-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-small-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 13px;

    border-radius: 10px;

    background: #0f172a;
    color: #ffffff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.dashboard-small-new:hover {
    background: #1e293b;
    transform: translateY(-1px);
}


/* Dashboard table refinement */

.dashboard-shell .archive-panel {
    border-radius: 19px;

    box-shadow:
        0 10px 32px rgba(15, 23, 42, 0.05);
}

.dashboard-shell .archive-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.055em;

    color: #94a3b8;
}

.dashboard-shell .archive-news-cell strong {
    color: #0f172a;
}

.dashboard-shell .archive-news-cell span {
    opacity: 0.55;
}


/* Responsive */

@media (max-width: 900px) {

    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 30px;
    }

    .dashboard-hero-actions {
        width: 100%;
    }

    .dashboard-new-button {
        width: 100%;
        box-sizing: border-box;
    }

}


@media (max-width: 640px) {

    .dashboard-shell {
        padding-top: 18px;
    }

    .dashboard-hero {
        padding: 24px 21px;

        border-radius: 17px;
    }

    .dashboard-hero h1 {
        font-size: 31px;
    }

    .dashboard-hero p {
        font-size: 14px;
    }

    .dashboard-summary-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-history-heading {
        align-items: flex-start;
    }

    .dashboard-history-actions {
        width: 100%;

        justify-content: space-between;
    }

}


/* =========================================================
   MOBIL MUHABIR DASHBOARD V2
   ========================================================= */

/* Brand / logo is now a real home link */

.topbar-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;

    color: inherit;
    text-decoration: none;

    border-radius: 10px;

    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}

.topbar-brand-link:hover {
    opacity: 0.82;
}

.topbar-brand-link:active {
    transform: translateY(1px);
}


/* ---------------------------------------------------------
   Dashboard cards: balanced 3 + 3 desktop layout
   --------------------------------------------------------- */

.dashboard-stats.archive-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.dashboard-stats .archive-stat-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 118px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 20px 21px;
}

.dashboard-stats .archive-stat-card::after {
    content: "";

    position: absolute;
    top: 17px;
    right: 17px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #94a3b8;
}


/* Total */

.dashboard-stats .archive-stat-total::after {
    background: #64748b;
}


/* Sent */

.dashboard-stats .archive-stat-sent::after {
    background: #16a34a;
}


/* Scheduled */

.dashboard-stats .archive-stat-scheduled::after {
    background: #7c3aed;
}


/* Prepared */

.dashboard-stats .archive-stat-prepared::after {
    background: #2563eb;
}


/* Draft */

.dashboard-stats .archive-stat-draft::after {
    background: #d97706;
}


/* Cancelled */

.dashboard-stats .archive-stat-cancelled::after {
    background: #dc2626;
}


.dashboard-stats .archive-stat-card span {
    padding-right: 22px;

    font-size: 12px;
    font-weight: 700;

    color: #94a3b8;
}

.dashboard-stats .archive-stat-card strong {
    margin-top: auto;
    padding-top: 20px;

    font-size: 29px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.04em;

    color: #0f172a;
}

.dashboard-stat-note {
    display: block;

    margin-top: 7px;

    font-size: 11px;
    line-height: 1.4;

    color: #94a3b8;
}


/* Remove V1 special-card behaviour if still cached */

.dashboard-stat-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.dashboard-stat-icon {
    display: none;
}


/* ---------------------------------------------------------
   History panel
   --------------------------------------------------------- */

.dashboard-history-heading {
    padding-bottom: 2px;
}

.dashboard-history-actions {
    flex-wrap: wrap;
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 920px) {

    .dashboard-stats.archive-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 560px) {

    .dashboard-stats.archive-stats {
        grid-template-columns: 1fr !important;
    }

    .dashboard-stats .archive-stat-card {
        min-height: 102px;
    }

    .dashboard-stats .archive-stat-card strong {
        padding-top: 15px;
    }

}


/* =========================================================
   DASHBOARD CLICKABLE STATUS FILTERS
   ========================================================= */

.dashboard-filter-card {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    width: 100%;

    border: 1px solid #e2e8f0;

    font: inherit;
    text-align: left;

    cursor: pointer;

    background: #ffffff;
}

.dashboard-filter-card:hover {
    border-color: #cbd5e1;

    transform: translateY(-3px) !important;

    box-shadow:
        0 15px 32px rgba(15, 23, 42, 0.09)
        !important;
}

.dashboard-filter-card:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.18);
    outline-offset: 2px;
}

.dashboard-filter-card.dashboard-filter-active {
    border-color: #2563eb;

    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.08),
        0 14px 32px rgba(15, 23, 42, 0.08);
}

.dashboard-filter-card.dashboard-filter-active::before {
    content: "";

    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;

    width: 3px;

    border-radius: 0 3px 3px 0;

    background: #2563eb;
}


/* Selected card keeps its own status colour */

.dashboard-filter-card.archive-stat-sent.dashboard-filter-active {
    border-color: rgba(22, 163, 74, 0.45);
}

.dashboard-filter-card.archive-stat-sent.dashboard-filter-active::before {
    background: #16a34a;
}

.dashboard-filter-card.archive-stat-scheduled.dashboard-filter-active {
    border-color: rgba(124, 58, 237, 0.45);
}

.dashboard-filter-card.archive-stat-scheduled.dashboard-filter-active::before {
    background: #7c3aed;
}

.dashboard-filter-card.archive-stat-prepared.dashboard-filter-active {
    border-color: rgba(37, 99, 235, 0.45);
}

.dashboard-filter-card.archive-stat-prepared.dashboard-filter-active::before {
    background: #2563eb;
}

.dashboard-filter-card.archive-stat-draft.dashboard-filter-active {
    border-color: rgba(217, 119, 6, 0.45);
}

.dashboard-filter-card.archive-stat-draft.dashboard-filter-active::before {
    background: #d97706;
}

.dashboard-filter-card.archive-stat-cancelled.dashboard-filter-active {
    border-color: rgba(220, 38, 38, 0.45);
}

.dashboard-filter-card.archive-stat-cancelled.dashboard-filter-active::before {
    background: #dc2626;
}


/* Active filter badge */

.dashboard-active-filter {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 0 11px;

    border: 1px solid #dbeafe;
    border-radius: 999px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 11px;
    font-weight: 800;
}


/* Empty filtered state */

.dashboard-filter-empty {
    padding: 52px 24px;

    text-align: center;

    border-top: 1px solid #eef2f7;
}

.dashboard-filter-empty strong,
.dashboard-filter-empty span {
    display: block;
}

.dashboard-filter-empty strong {
    color: #0f172a;

    font-size: 15px;
}

.dashboard-filter-empty span {
    margin-top: 6px;

    color: #94a3b8;

    font-size: 12px;
}


/* hidden must always win over table row styling */

.archive-table tbody tr[hidden] {
    display: none !important;
}


@media (max-width: 640px) {

    .dashboard-filter-card {
        min-height: 92px;
    }

    .dashboard-active-filter {
        order: 3;
        width: 100%;
        box-sizing: border-box;

        justify-content: center;
    }

}


/* =========================================================
   DASHBOARD COMPACT COLORED CARDS V3
   ========================================================= */

.dashboard-stats.archive-stats {
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap: 14px !important;
}


/* Card base */

.dashboard-compact-card {
    aspect-ratio: 0.92 / 1;

    min-height: 0 !important;

    padding: 16px !important;

    align-items: center;
    justify-content: flex-start !important;

    text-align: center !important;

    border-radius: 17px !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease !important;
}

.dashboard-compact-card:hover {
    transform: translateY(-4px) !important;
}


/* Remove old left active bar */

.dashboard-filter-card.dashboard-filter-active::before {
    display: none !important;
}


/* Icon */

.dashboard-card-icon {
    display: grid !important;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    margin: 0 0 12px !important;
    padding: 0 !important;

    border-radius: 13px;

    font-size: 19px !important;
    font-weight: 800 !important;

    line-height: 1 !important;
}


/* Label */

.dashboard-card-label {
    display: block;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    color: #475569 !important;
}


/* Number */

.dashboard-card-value {
    display: block;

    margin: 10px 0 0 !important;
    padding: 0 !important;

    font-size: 27px !important;
    line-height: 1 !important;

    color: #0f172a !important;
}


/* Note */

.dashboard-card-note {
    display: block;

    margin-top: auto;
    padding-top: 10px;

    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;

    color: #64748b;
}


/* Top right dot */

.dashboard-compact-card::after {
    top: 13px !important;
    right: 13px !important;

    width: 6px !important;
    height: 6px !important;
}


/* =========================================================
   TOTAL
   ========================================================= */

.dashboard-compact-card.archive-stat-total {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        ) !important;

    border-color: #dbe2ea !important;
}

.dashboard-compact-card.archive-stat-total
.dashboard-card-icon {
    background: #eef2ff;
    color: #4f46e5;
}


/* =========================================================
   SENT
   ========================================================= */

.dashboard-compact-card.archive-stat-sent {
    background:
        linear-gradient(
            180deg,
            #f3fcf6 0%,
            #ecf9f0 100%
        ) !important;

    border-color: #bde7c8 !important;
}

.dashboard-compact-card.archive-stat-sent
.dashboard-card-icon {
    background: #d9f5e2;
    color: #16a34a;
}

.dashboard-compact-card.archive-stat-sent
.dashboard-card-note {
    color: #16803a;
}


/* =========================================================
   SCHEDULED
   ========================================================= */

.dashboard-compact-card.archive-stat-scheduled {
    background:
        linear-gradient(
            180deg,
            #fbf7ff 0%,
            #f5edff 100%
        ) !important;

    border-color: #e1c9f8 !important;
}

.dashboard-compact-card.archive-stat-scheduled
.dashboard-card-icon {
    background: #eadcfb;
    color: #7c3aed;
}

.dashboard-compact-card.archive-stat-scheduled
.dashboard-card-note {
    color: #6d28d9;
}


/* =========================================================
   PREPARED
   ========================================================= */

.dashboard-compact-card.archive-stat-prepared {
    background:
        linear-gradient(
            180deg,
            #f6faff 0%,
            #eef5ff 100%
        ) !important;

    border-color: #c9dcf7 !important;
}

.dashboard-compact-card.archive-stat-prepared
.dashboard-card-icon {
    background: #ddeafd;
    color: #2563eb;
}

.dashboard-compact-card.archive-stat-prepared
.dashboard-card-note {
    color: #2563eb;
}


/* =========================================================
   DRAFT
   ========================================================= */

.dashboard-compact-card.archive-stat-draft {
    background:
        linear-gradient(
            180deg,
            #fffaf4 0%,
            #fff3e5 100%
        ) !important;

    border-color: #f0d3aa !important;
}

.dashboard-compact-card.archive-stat-draft
.dashboard-card-icon {
    background: #fce8cf;
    color: #d97706;
}

.dashboard-compact-card.archive-stat-draft
.dashboard-card-note {
    color: #b45309;
}


/* =========================================================
   CANCELLED
   ========================================================= */

.dashboard-compact-card.archive-stat-cancelled {
    background:
        linear-gradient(
            180deg,
            #fff7f7 0%,
            #fff0f0 100%
        ) !important;

    border-color: #f1c5c5 !important;
}

.dashboard-compact-card.archive-stat-cancelled
.dashboard-card-icon {
    background: #f9dddd;
    color: #dc2626;
}

.dashboard-compact-card.archive-stat-cancelled
.dashboard-card-note {
    color: #b91c1c;
}


/* Active selection */

.dashboard-compact-card.dashboard-filter-active {
    transform: translateY(-2px);

    box-shadow:
        0 9px 24px rgba(15, 23, 42, 0.10) !important;
}


/* Tablet */

@media (max-width: 1050px) {

    .dashboard-stats.archive-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

    .dashboard-compact-card {
        aspect-ratio: auto;
        min-height: 150px !important;
    }

}


/* Mobile */

@media (max-width: 640px) {

    .dashboard-stats.archive-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-compact-card {
        min-height: 145px !important;
    }

}


@media (max-width: 390px) {

    .dashboard-stats.archive-stats {
        grid-template-columns: 1fr !important;
    }

}


/* =========================================================
   DASHBOARD STATUS CARDS V4
   Compact + pastel + icon
   ========================================================= */


/* 6 cards in one row */

.dashboard-stats.archive-stats {
    display: grid !important;
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap: 12px !important;
}


/* ---------------------------------------------------------
   CARD BASE
   --------------------------------------------------------- */

.dashboard-stats .dashboard-filter-card {
    position: relative;

    min-width: 0 !important;
    min-height: 145px !important;
    aspect-ratio: 1 / 0.95;

    padding:
        17px 12px
        14px !important;

    box-sizing: border-box;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    text-align: center !important;

    border-radius: 16px !important;
    border-width: 1px !important;
    border-style: solid !important;

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 7px 20px
        rgba(15, 23, 42, 0.045) !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease !important;
}


.dashboard-stats .dashboard-filter-card:hover {
    transform:
        translateY(-3px) !important;

    box-shadow:
        0 12px 27px
        rgba(15, 23, 42, 0.095) !important;
}


/* ---------------------------------------------------------
   ICON BOX
   --------------------------------------------------------- */

.dashboard-stats .dashboard-filter-card::before {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: grid !important;
    place-items: center !important;

    width: 42px !important;
    height: 42px !important;

    flex: 0 0 42px !important;

    margin:
        0 auto
        11px !important;

    border-radius: 12px !important;

    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    opacity: 1 !important;
}


/* Keep small status dot */

.dashboard-stats .dashboard-filter-card::after {
    top: 12px !important;
    right: 12px !important;

    width: 6px !important;
    height: 6px !important;

    border-radius: 999px !important;
}


/* ---------------------------------------------------------
   LABEL
   --------------------------------------------------------- */

.dashboard-stats
.dashboard-filter-card > span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

    color: #475569 !important;
}


/* ---------------------------------------------------------
   NUMBER
   --------------------------------------------------------- */

.dashboard-stats
.dashboard-filter-card > strong {
    display: block !important;

    margin:
        8px 0
        0 !important;

    padding: 0 !important;

    font-size: 27px !important;
    font-weight: 850 !important;
    line-height: 1 !important;

    letter-spacing: -0.04em !important;

    color: #0f172a !important;
}


/* Total Haber note */

.dashboard-stats
.dashboard-filter-card .dashboard-stat-note {
    margin-top: auto !important;
    padding-top: 8px !important;

    font-size: 9.5px !important;
    font-weight: 600 !important;
}


/* =========================================================
   TOTAL HABER
   ========================================================= */

.dashboard-stats
.archive-stat-total {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f2f6ff 100%
        ) !important;

    border-color:
        #d7e2f4 !important;
}

.dashboard-stats
.archive-stat-total::before {
    content: "▤";

    background:
        #e4edff !important;

    color:
        #2563eb !important;
}

.dashboard-stats
.archive-stat-total::after {
    background:
        #64748b !important;
}


/* =========================================================
   GÖNDERİLDİ
   ========================================================= */

.dashboard-stats
.archive-stat-sent {
    background:
        linear-gradient(
            145deg,
            #f8fff9 0%,
            #eaf8ee 100%
        ) !important;

    border-color:
        #bce3c6 !important;
}

.dashboard-stats
.archive-stat-sent::before {
    content: "➤";

    background:
        #d7f3df !important;

    color:
        #159947 !important;
}

.dashboard-stats
.archive-stat-sent::after {
    background:
        #16a34a !important;
}


/* =========================================================
   PLANLANDI
   ========================================================= */

.dashboard-stats
.archive-stat-scheduled {
    background:
        linear-gradient(
            145deg,
            #fdfaff 0%,
            #f3eaff 100%
        ) !important;

    border-color:
        #dcc4f5 !important;
}

.dashboard-stats
.archive-stat-scheduled::before {
    content: "◷";

    background:
        #e9d9fb !important;

    color:
        #7c3aed !important;
}

.dashboard-stats
.archive-stat-scheduled::after {
    background:
        #7c3aed !important;
}


/* =========================================================
   HAZIRLANDI
   ========================================================= */

.dashboard-stats
.archive-stat-prepared {
    background:
        linear-gradient(
            145deg,
            #f9fbff 0%,
            #eaf2ff 100%
        ) !important;

    border-color:
        #c5d8f6 !important;
}

.dashboard-stats
.archive-stat-prepared::before {
    content: "✓";

    background:
        #dae8fd !important;

    color:
        #2563eb !important;
}

.dashboard-stats
.archive-stat-prepared::after {
    background:
        #2563eb !important;
}


/* =========================================================
   TASLAK
   ========================================================= */

.dashboard-stats
.archive-stat-draft {
    background:
        linear-gradient(
            145deg,
            #fffdf9 0%,
            #fff1df 100%
        ) !important;

    border-color:
        #f0d1aa !important;
}

.dashboard-stats
.archive-stat-draft::before {
    content: "✎";

    background:
        #fde7ca !important;

    color:
        #d97706 !important;
}

.dashboard-stats
.archive-stat-draft::after {
    background:
        #d97706 !important;
}


/* =========================================================
   İPTAL EDİLDİ
   ========================================================= */

.dashboard-stats
.archive-stat-cancelled {
    background:
        linear-gradient(
            145deg,
            #fffafa 0%,
            #ffebeb 100%
        ) !important;

    border-color:
        #f3c4c4 !important;
}

.dashboard-stats
.archive-stat-cancelled::before {
    content: "×";

    background:
        #f9dada !important;

    color:
        #dc2626 !important;

    font-size:
        27px !important;
}

.dashboard-stats
.archive-stat-cancelled::after {
    background:
        #dc2626 !important;
}


/* =========================================================
   ACTIVE FILTER
   ========================================================= */

.dashboard-stats
.dashboard-filter-card.dashboard-filter-active {
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 0 0 2px
        rgba(15, 23, 42, 0.035),
        0 13px 28px
        rgba(15, 23, 42, 0.10)
        !important;
}


/* Sent selected */

.dashboard-stats
.archive-stat-sent.dashboard-filter-active {
    border-color:
        #72ca89 !important;
}


/* Scheduled selected */

.dashboard-stats
.archive-stat-scheduled.dashboard-filter-active {
    border-color:
        #b788e6 !important;
}


/* Prepared selected */

.dashboard-stats
.archive-stat-prepared.dashboard-filter-active {
    border-color:
        #83adeb !important;
}


/* Draft selected */

.dashboard-stats
.archive-stat-draft.dashboard-filter-active {
    border-color:
        #e6ad67 !important;
}


/* Cancelled selected */

.dashboard-stats
.archive-stat-cancelled.dashboard-filter-active {
    border-color:
        #ea8888 !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .dashboard-stats.archive-stats {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

    .dashboard-stats
    .dashboard-filter-card {
        aspect-ratio: auto;

        min-height:
            140px !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 620px) {

    .dashboard-stats.archive-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .dashboard-stats
    .dashboard-filter-card {
        min-height:
            138px !important;
    }

}


/* =========================================================
   DASHBOARD SYSTEM LICENSE RECOVERY V1
   ========================================================= */

.dashboard-account-section {
    margin: 28px 0;
}

.dashboard-account-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 14px;
}

.dashboard-account-heading h2 {
    margin: 2px 0 0;
    font-size: 20px;
    color: #0f172a;
}

.dashboard-online-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid #ccebd5;
    border-radius: 999px;
    background: #f1fbf4;
    color: #15803d;
    font-size: 10px;
    font-weight: 800;
}

.dashboard-online-badge span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}

.dashboard-account-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 12px;
}

.dashboard-account-card {
    min-height: 118px;
    padding: 17px;
    display: flex;
    gap: 13px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,.035);
}

.dashboard-account-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-weight: 900;
}

.dashboard-account-body {
    min-width: 0;
    flex: 1;
}

.dashboard-account-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
}

.dashboard-account-body strong {
    display: block;
    margin-top: 8px;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -.03em;
    color: #0f172a;
}

.dashboard-account-body strong em {
    font-size: 13px;
    font-style: normal;
    color: #94a3b8;
}

.dashboard-account-body small {
    display: block;
    margin-top: 7px;
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
}

.account-quota {
    background: linear-gradient(145deg,#fff,#f2f7ff);
    border-color: #d7e4f8;
}

.account-quota .dashboard-account-icon {
    background: #dfeaff;
    color: #2563eb;
}

.account-license {
    background: linear-gradient(145deg,#fff,#effaf2);
    border-color: #cce8d4;
}

.account-license .dashboard-account-icon {
    background: #daf3e1;
    color: #16a34a;
}

.account-license strong {
    color: #15803d;
}

.account-expiry {
    background: linear-gradient(145deg,#fff,#f8f2ff);
    border-color: #dfd0f1;
}

.account-expiry .dashboard-account-icon {
    background: #eadff7;
    color: #7c3aed;
}

.dashboard-account-body .account-date {
    font-size: 17px;
}

.account-system {
    background: linear-gradient(145deg,#fff,#f0faf3);
    border-color: #cee8d6;
}

.account-system .dashboard-account-icon {
    background: #daf3e1;
    color: #16a34a;
    font-size: 12px;
}

.account-system strong {
    color: #15803d;
}

.dashboard-quota-track {
    height: 6px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce5f2;
}

.dashboard-quota-fill {
    height: 100%;
    border-radius: inherit;
    background: #2563eb;
}

.quota-unlimited {
    background: linear-gradient(90deg,#2563eb,#60a5fa);
}

@media (max-width: 1050px) {
    .dashboard-account-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 620px) {
    .dashboard-account-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-account-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   MOBIL MUHABIR HEADER BRAND V1
   ========================================================= */

.mobilmuhabir-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0;
}

.mobilmuhabir-header-logo {
    display: block;
    width: auto;
    height: 46px;
    max-width: 210px;
    object-fit: contain;
}

@media (max-width: 760px) {
    .mobilmuhabir-header-logo {
        height: 38px;
        max-width: 175px;
    }
}



/* ============================================================
   VIDEO CLIP TIMELINE / MARKERS V4-F
   ============================================================ */

.video-clip-timeline {
    margin-top: 12px;
    padding: 11px 12px 14px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background: #fff;
}

.video-clip-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 9px;

    color:
        var(--muted);

    font-size: 11px;
    font-weight: 600;
}

.video-clip-track {
    position: relative;

    height: 32px;

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    background:
        linear-gradient(
            to bottom,
            #f3f4f6,
            #e9ecef
        );

    overflow: visible;
}

.video-clip-track::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(10% - 1px),
            rgba(0, 0, 0, 0.08)
                calc(10% - 1px),
            rgba(0, 0, 0, 0.08)
                10%
        );
}

.video-existing-clip {
    position: absolute;
    z-index: 2;

    top: 4px;
    bottom: 4px;

    min-width: 4px;

    padding: 0;

    border:
        1px solid
        rgba(20, 83, 45, 0.55);

    border-radius: 4px;

    background:
        rgba(34, 197, 94, 0.62);

    cursor: pointer;

    overflow: hidden;
}

.video-existing-clip:hover {
    filter: brightness(0.92);
}

.video-existing-clip span {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;

    color: #12351f;

    font-size: 10px;
    font-weight: 700;
}

.video-clip-selection {
    position: absolute;
    z-index: 3;

    top: 3px;
    bottom: 3px;

    border:
        1px dashed
        rgba(37, 99, 235, 0.9);

    border-radius: 4px;

    background:
        rgba(59, 130, 246, 0.24);

    pointer-events: none;
}

.video-clip-marker {
    position: absolute;
    z-index: 5;

    top: -7px;
    bottom: -7px;

    width: 2px;

    transform:
        translateX(-1px);

    pointer-events: none;
}

.video-clip-marker::after {
    content: "";

    position: absolute;

    left: -4px;
    top: -1px;

    width: 10px;
    height: 10px;

    transform:
        rotate(45deg);

    border-radius: 1px;

    background:
        currentColor;
}

.video-clip-marker span {
    position: absolute;

    top: -24px;

    padding: 2px 5px;

    border-radius: 4px;

    background:
        currentColor;

    color: #fff;

    font-size: 9px;
    font-weight: 700;

    white-space: nowrap;
}

.video-clip-marker-in {
    color: #2563eb;
    background: #2563eb;
}

.video-clip-marker-in span {
    left: 4px;
}

.video-clip-marker-out {
    color: #dc2626;
    background: #dc2626;
}

.video-clip-marker-out span {
    right: 4px;
}

@media (max-width: 700px) {

    .video-clip-timeline {
        padding-left: 9px;
        padding-right: 9px;
    }

    .video-clip-track {
        height: 28px;
    }
}



/* ============================================================
   CLIP UI V4-G2
   ============================================================ */

/* Video için eski genel konuşma kararını sakla.
   DOM'da kalır; mevcut JS/backend sözleşmesi bozulmaz. */

.media-decision-card[data-media-kind="video"]
.video-general-audio-section,

.media-decision-card[data-media-kind="video"]
.video-general-speaker-fields {
    display: none !important;
}


/* Manuel IN / OUT text alanları ikinci bir editör gibi
   görünmesin. Player tek seçim yüzeyi. */

.clip-add-row {
    display: none !important;
}


/* ------------------------------------------------------------
   SEÇİMİ TEMİZLE
   ------------------------------------------------------------ */

.video-selection-tools {
    display: flex;
    justify-content: flex-end;

    margin-top: 7px;
    margin-bottom: 2px;
}

.video-clear-selection {
    appearance: none;

    border: 0;
    border-radius: 7px;

    padding: 7px 10px;

    background: transparent;

    color: #667085;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.video-clear-selection:hover {
    background: #f2f4f7;
    color: #101828;
}


/* ------------------------------------------------------------
   FLOW PANEL
   ------------------------------------------------------------ */

.clip-flow-panel {
    margin-top: 14px;

    padding: 16px;

    border: 1px solid #d0d5dd;
    border-radius: 12px;

    background: #fff;

    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, .04);
}

.clip-flow-message {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-bottom: 12px;
}

.clip-flow-message strong {
    color: #101828;
    font-size: 14px;
}

.clip-flow-message span {
    color: #667085;
    font-size: 12px;
}

.clip-flow-step {
    padding-top: 12px;

    border-top:
        1px solid #eaecf0;
}

.clip-flow-step > strong {
    display: block;

    margin-bottom: 10px;

    color: #344054;
    font-size: 13px;
}

.clip-flow-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 10px;
}

.clip-flow-speaker-label {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.clip-flow-speaker-label span {
    color: #475467;

    font-size: 12px;
    font-weight: 600;
}

.clip-flow-speaker-label input {
    box-sizing: border-box;

    width: 100%;

    padding: 10px 12px;

    border: 1px solid #d0d5dd;
    border-radius: 8px;

    background: #fff;

    color: #101828;

    outline: none;
}

.clip-flow-speaker-label input:focus {
    border-color: #98a2b3;

    box-shadow:
        0 0 0 3px
        rgba(152, 162, 179, .12);
}


/* ------------------------------------------------------------
   KAYITLI BÖLÜMLER
   ------------------------------------------------------------ */

.clip-editor {
    margin-top: 12px;

    padding: 12px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #f9fafb;
}

.clip-list {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 0;
}

.clip-row-clean {
    padding: 14px;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    background: #fff;
}

.clip-row-top-clean {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding-bottom: 11px;

    border-bottom:
        1px solid #eaecf0;
}

.clip-time-summary {
    display: flex;
    align-items: center;

    gap: 10px;
}

.clip-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 8px;

    background: #f2f4f7;

    color: #475467;

    font-size: 14px;
}

.clip-time-summary > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.clip-time-summary strong {
    color: #101828;

    font-size: 13px;
    font-weight: 700;
}

.clip-time-summary span {
    color: #667085;

    font-size: 11px;
}

.clip-summary-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    padding-top: 11px;
}

.clip-summary-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
}

.clip-audio-on {
    background: #ecfdf3;
    color: #027a48;
}

.clip-audio-off {
    background: #f2f4f7;
    color: #667085;
}

.clip-summary-speaker {
    color: #475467;

    font-size: 12px;
}


@media (max-width: 640px) {

    .clip-flow-panel {
        padding: 13px;
    }

    .clip-row-top-clean {
        align-items: flex-start;
    }

    .clip-summary-line {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* ============================================================
   V4-H — VIDEO CLIP / SINGLE FLOW UI
   ============================================================ */


/* ------------------------------------------------------------
   ANA SEÇİM PANELİ
   ------------------------------------------------------------ */

.clip-selection-panel {
    margin-top: 16px;
    padding: 0;

    overflow: hidden;

    border: 1px solid #d7dde5;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06);
}


/* ------------------------------------------------------------
   SEÇİLEN ZAMAN
   ------------------------------------------------------------ */

.clip-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 16px 18px;

    border-bottom: 1px solid #dce3eb;

    background: #eef4fa;
}

.clip-selection-header > div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.clip-selection-eyebrow {
    font-size: 10px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: .09em;

    color: #52677d;
}

.clip-selection-time {
    font-size: 18px;
    line-height: 1.2;

    font-weight: 750;

    color: #17283a;
}

.clip-selection-duration {
    flex: 0 0 auto;

    padding: 6px 10px;

    border: 1px solid #c8d5e3;
    border-radius: 999px;

    background: #ffffff;

    color: #334e68;

    font-size: 12px;
    font-weight: 700;
}


/* ------------------------------------------------------------
   KONUŞMA KARARI
   ------------------------------------------------------------ */

.clip-selection-question {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 18px;

    padding: 18px;

    border-bottom: 1px solid #e5e9ef;

    background: #ffffff;
}

.clip-selection-question-copy {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.clip-selection-question-copy strong {
    color: #202c38;

    font-size: 14px;
    font-weight: 700;
}

.clip-selection-question-copy span {
    max-width: 580px;

    color: #6b7785;

    font-size: 12px;
    line-height: 1.5;
}


/* Evet / Hayır segmented control */

.clip-choice-group {
    display: inline-flex;

    padding: 4px;

    border: 1px solid #d7dde5;
    border-radius: 10px;

    background: #f3f5f7;
}

.clip-choice {
    position: relative;

    margin: 0;

    cursor: pointer;
}

.clip-choice input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.clip-choice span {
    display: block;

    min-width: 72px;

    padding: 8px 14px;

    border-radius: 7px;

    text-align: center;

    color: #5d6976;

    font-size: 12px;
    font-weight: 700;

    transition:
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.clip-choice input:checked + span {
    background: #ffffff;

    color: #17283a;

    box-shadow:
        0 1px 4px rgba(15, 23, 42, 0.14);
}


/* ------------------------------------------------------------
   KONUŞMACI
   ------------------------------------------------------------ */

.clip-speaker-panel {
    padding: 18px;

    border-bottom: 1px solid #e1e7ee;

    background: #f8fafc;
}

.clip-speaker-field {
    display: grid;

    grid-template-columns:
        auto
        auto
        1fr;

    align-items: center;

    gap: 8px;

    margin: 0;
}

.clip-speaker-field > span {
    color: #293847;

    font-size: 12px;
    font-weight: 700;
}

.clip-speaker-field > small {
    padding: 3px 7px;

    border-radius: 999px;

    background: #e7edf3;

    color: #6a7785;

    font-size: 10px;
    font-weight: 700;
}

.clip-speaker-field input {
    width: 100%;

    box-sizing: border-box;

    padding: 10px 12px;

    border: 1px solid #cfd8e3;
    border-radius: 9px;

    outline: none;

    background: #ffffff;

    color: #1f2933;

    font-size: 13px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.clip-speaker-field input:focus {
    border-color: #879caf;

    box-shadow:
        0 0 0 3px
        rgba(76, 110, 140, .10);
}


/* İsmi haberde kullanma */

.clip-hide-speaker-choice {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 14px;
    padding: 11px 12px;

    border: 1px solid #dbe3eb;
    border-radius: 9px;

    background: #ffffff;

    cursor: pointer;
}

.clip-hide-speaker-choice input {
    flex: 0 0 auto;

    margin-top: 2px;
}

.clip-hide-speaker-choice > span {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.clip-hide-speaker-choice strong {
    color: #334155;

    font-size: 12px;
}

.clip-hide-speaker-choice small {
    color: #778493;

    font-size: 11px;
    line-height: 1.4;
}


/* ------------------------------------------------------------
   ALT AKSİYONLAR
   ------------------------------------------------------------ */

.clip-selection-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 9px;

    padding: 14px 18px;

    background: #ffffff;
}

.clip-selection-actions button {
    min-height: 38px;
}

.clip-selection-actions
[data-clip-flow-save] {
    min-width: 130px;
}

.clip-selection-actions
[data-clip-flow-save]:disabled {
    opacity: .45;

    cursor: not-allowed;
}


/* ------------------------------------------------------------
   HATA
   ------------------------------------------------------------ */

.clip-selection-panel
.clip-flow-panel
.clip-editor-error {
    margin: 0 18px 14px;
}

.clip-selection-panel
[data-clip-flow-error]:not(:empty) {
    padding: 10px 12px;

    border: 1px solid #f0c8c5;
    border-radius: 8px;

    background: #fff5f4;

    color: #a8322a;
}


/* ============================================================
   KAYDEDİLMİŞ BÖLÜMLER
   Aktif editörden görsel olarak tamamen ayır.
   ============================================================ */

.clip-editor {
    margin-top: 18px;

    padding: 16px;

    border: 1px solid #dce2e8;
    border-radius: 12px;

    background: #f3f5f7;
}


/*
 * Manuel Başlangıç / Bitiş alanı artık kullanıcı arayüzünün
 * parçası değil. JS iç bağlantıları için DOM'da kalabilir.
 */
.clip-editor .clip-add-row {
    display: none !important;
}


.clip-list {
    display: grid;

    gap: 9px;

    margin-top: 0;
}


/* Kaydedilmiş clip */

.clip-row-clean {
    position: relative;

    padding: 13px 14px;

    border: 1px solid #d6dde5;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 1px 3px rgba(15, 23, 42, .04);
}

.clip-row-clean::before {
    content: "";

    position: absolute;

    top: 10px;
    bottom: 10px;
    left: 0;

    width: 3px;

    border-radius: 0 3px 3px 0;

    background: #73889c;
}


/* Zaman */

.clip-row-clean
.clip-row-top strong {
    color: #213547;

    font-size: 14px;
    font-weight: 750;
}

.clip-row-clean
.clip-row-top span {
    color: #7b8794;

    font-size: 11px;
}


/* Kaydedilmiş bilgi satırları */

.clip-row-clean
.clip-save-status {
    display: inline-flex;

    margin-top: 8px;
    padding: 4px 7px;

    border-radius: 6px;

    background: #edf2f6;

    color: #596a79;

    font-size: 10px;
    font-weight: 700;
}


/* Sil */

.clip-row-clean
.clip-delete-button {
    padding: 5px 8px;

    border-radius: 6px;

    color: #a43a34;

    transition:
        background .15s ease;
}

.clip-row-clean
.clip-delete-button:hover {
    background: #fff0ef;
}


/* ============================================================
   ESKİ GENEL VIDEO KARARLARINI UI'DAN KALDIR
   ============================================================ */

.media-decision-card[data-media-kind="video"]
.video-general-audio-section {
    display: none !important;
}


/*
 * IN/OUT zaten görüntü seçimidir.
 * Video kartındaki eski Görüntülü/Görüntüsüz karar kutusunu
 * kullanıcıya göstermiyoruz.
 */
.media-decision-card[data-media-kind="video"]
.media-decision-section:has(
    input[name^="visual_"]
) {
    display: none !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {

    .clip-selection-question {
        grid-template-columns: 1fr;
    }

    .clip-choice-group {
        width: 100%;
    }

    .clip-choice {
        flex: 1;
    }

    .clip-choice span {
        min-width: 0;
    }

    .clip-speaker-field {
        grid-template-columns:
            auto
            1fr;
    }

    .clip-speaker-field input {
        grid-column:
            1 / -1;
    }

    .clip-selection-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .clip-selection-actions button {
        width: 100%;
    }
}



/* ============================================================
   V4-I — VIDEO CLIP EDITOR FINAL UI
   ============================================================ */


/* ------------------------------------------------------------
   ESKİ / GEREKSİZ VIDEO KARARLARI
   ------------------------------------------------------------ */

.video-general-audio-section {
    display: none !important;
}

.clip-add-row[hidden] {
    display: none !important;
}


/* ------------------------------------------------------------
   PLAYER + SEÇİM ANA BLOĞU
   ------------------------------------------------------------ */

.video-player-editor {
    margin-top: 18px;
}

.video-clip-editor,
.video-player-editor,
.clip-selection-panel {
    box-sizing: border-box;
}


/* seçim paneli */

.clip-selection-panel {
    margin-top: 14px !important;
    padding: 18px !important;

    border: 1px solid #d7dde7 !important;
    border-radius: 14px !important;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f3f6fa 100%
        ) !important;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04) !important;
}


/* ------------------------------------------------------------
   IN / OUT DEĞERLERİ
   ------------------------------------------------------------ */

.mark-values {
    gap: 10px !important;
    margin-top: 10px !important;
}

.mark-values > div {
    min-height: 58px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 1px solid #e5e9ef !important;
    border-radius: 10px !important;

    background: #fff !important;
}

.mark-values span {
    margin-bottom: 4px;

    color: #7b8492 !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: .05em;
    text-transform: uppercase;
}

.mark-values strong {
    color: #111827 !important;

    font-size: 14px !important;
    font-weight: 750 !important;
}


/* ------------------------------------------------------------
   KLAVYE YARDIMI
   ------------------------------------------------------------ */

.video-keyboard-help {
    margin: 10px 0 0 !important;

    color: #89919d !important;

    font-size: 11px !important;
    line-height: 1.4 !important;

    text-align: center;
}


/* ------------------------------------------------------------
   YENİ BÖLÜM SEÇİM / KARAR ALANI
   ------------------------------------------------------------ */

.clip-flow-panel {
    margin-top: 14px !important;
    padding: 16px !important;

    border: 1px solid #dce2ea !important;
    border-radius: 12px !important;

    background: #fff !important;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .035) !important;
}

.clip-flow-message {
    margin: 0 0 14px !important;
    padding: 0 0 13px !important;

    border-bottom: 1px solid #edf0f4;
}

.clip-flow-message strong {
    display: block;

    margin-bottom: 4px;

    color: #111827 !important;

    font-size: 15px !important;
    font-weight: 750 !important;
}

.clip-flow-message span {
    color: #657080 !important;

    font-size: 13px !important;
}


/* ------------------------------------------------------------
   "BU BÖLÜMDE KONUŞMA VAR MI?"
   ------------------------------------------------------------ */

.clip-selection-panel
.clip-flow-step > strong {
    display: block;

    margin-bottom: 10px;

    color: #303846 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   KONUŞMACI ALANI
   ------------------------------------------------------------ */

.clip-speaker-panel {
    margin-top: 12px !important;
    padding: 15px !important;

    border: 1px solid #dfe5ed !important;
    border-radius: 11px !important;

    background: #f8fafc !important;
}

.clip-speaker-panel label {
    margin: 0 !important;
}

.clip-speaker-panel span {
    display: block;

    margin-bottom: 7px;

    color: #596273 !important;

    font-size: 12px !important;
    font-weight: 650 !important;
}

.clip-speaker-panel input[type="text"],
.clip-flow-speaker-label input[type="text"] {
    width: 100%;
    height: 42px;

    box-sizing: border-box;

    padding: 0 12px;

    border: 1px solid #ccd4df !important;
    border-radius: 8px !important;

    background: #fff !important;

    color: #111827;

    font-size: 14px;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.clip-speaker-panel input[type="text"]:focus,
.clip-flow-speaker-label input[type="text"]:focus {
    border-color: #64748b !important;

    box-shadow:
        0 0 0 3px rgba(100, 116, 139, .10) !important;
}


/* ------------------------------------------------------------
   KAYITLI BÖLÜMLER ALANI
   ------------------------------------------------------------ */

.clip-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 14px !important;
}


/* kart */

.clip-summary-card,
.clip-row-clean {
    position: relative;

    margin: 0 !important;
    padding: 15px 16px !important;

    overflow: hidden;

    border: 1px solid #dbe2ea !important;
    border-radius: 11px !important;

    background: #fff !important;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .035) !important;
}


/* eski ::before varsa öldür */

.clip-summary-card::before,
.clip-row-clean::before {
    display: none !important;
}


/* ------------------------------------------------------------
   KART ÜST SATIR
   ------------------------------------------------------------ */

.clip-summary-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.clip-summary-number {
    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 0;
}


/* küçük bölüm işareti */

.clip-summary-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #334155;
}


/* zaman */

.clip-summary-time {
    display: block;

    color: #172033 !important;

    font-size: 14px !important;
    font-weight: 750 !important;

    letter-spacing: .01em;
}


/* süre */

.clip-summary-duration {
    display: block;

    margin-top: 3px;

    color: #89919d !important;

    font-size: 11px !important;
}


/* ------------------------------------------------------------
   SİL
   ------------------------------------------------------------ */

.clip-summary-card
.clip-delete-button {
    padding: 5px 8px !important;

    border: 0 !important;

    background: transparent !important;

    color: #b42318 !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    cursor: pointer;
}

.clip-summary-card
.clip-delete-button:hover {
    background: #fff1f0 !important;

    border-radius: 6px;
}


/* ------------------------------------------------------------
   KART META / BADGE SATIRI
   ------------------------------------------------------------ */

.clip-summary-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 12px;
    padding-top: 11px;

    border-top: 1px solid #edf0f4;
}

.clip-summary-badge {
    display: inline-flex;
    align-items: center;

    min-height: 25px;

    box-sizing: border-box;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 11px !important;
    font-weight: 650 !important;

    line-height: 1;
}


/* konuşma kullanılacak */

.clip-audio-on,
.clip-summary-badge.audio {
    border: 1px solid #b8ddc8 !important;

    background: #edf8f1 !important;

    color: #267044 !important;
}


/* konuşma kullanılmayacak */

.clip-audio-off,
.clip-summary-badge.muted {
    border: 1px solid #dce1e8 !important;

    background: #f3f5f7 !important;

    color: #68717e !important;
}


/* görüntü */

.clip-summary-badge.visual {
    border: 1px solid #cbd9ef !important;

    background: #f0f5fc !important;

    color: #345b8c !important;
}


/* konuşmacı */

.clip-summary-badge.speaker {
    border: 1px solid #e3d6b5 !important;

    background: #faf6eb !important;

    color: #765b22 !important;
}


/* gerçek isim */

.clip-summary-speaker-name {
    display: inline-flex;
    align-items: center;

    min-height: 25px;

    box-sizing: border-box;

    padding: 4px 9px;

    border: 1px solid #d8c9ec;
    border-radius: 6px;

    background: #f7f2fc;

    color: #65458a;

    font-size: 11px;
    font-weight: 700;
}


/* ------------------------------------------------------------
   GÖRÜNTÜ BÖLÜMÜNÜ AYIR
   ------------------------------------------------------------ */

.media-visual-section,
.media-visual-choice {
    margin-top: 18px !important;
    padding-top: 16px !important;

    border-top: 1px solid #e4e8ee !important;
}


/* ------------------------------------------------------------
   MOBİL
   ------------------------------------------------------------ */

@media (max-width: 700px) {

    .clip-selection-panel {
        padding: 13px !important;
    }

    .clip-flow-panel {
        padding: 13px !important;
    }

    .clip-summary-card,
    .clip-row-clean {
        padding: 13px !important;
    }

    .clip-summary-meta {
        gap: 5px;
    }
}


/* ============================================================
   END V4-I
   ============================================================ */



/* ============================================================
   V4-R — SELECTED CLIPS COMPACT LIST
   ============================================================ */

.selected-clips-panel {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}


/* Başlık */

.selected-clips-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.selected-clips-header > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-clips-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #64748b;
}

.selected-clips-header > div > strong {
    display: none;
}

.selected-clips-count {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}


/* Liste */

.selected-clips-list {
    display: block;
}

.selected-clips-list .clip-summary-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* Her bölüm */

.selected-clips-list .clip-row-clean {
    margin: 0 !important;
    padding: 8px 10px !important;

    border: 1px solid #e2e8f0;
    border-left: 4px solid var(
        --clip-section-color,
        #64748b
    );

    border-radius: 7px;
    background: #ffffff;
}


/* Üst satır */

.selected-clips-list .clip-row-top,
.selected-clips-list .clip-row-top-clean {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 !important;
}


/* Bölüm bilgisi */

.selected-clips-list .clip-time-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.selected-clips-list .clip-section-icon {
    width: 25px;
    height: 25px;
    min-width: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    font-size: 11px;
    font-weight: 800;
}

.selected-clips-list .clip-time-summary > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 8px;
}

.selected-clips-list .clip-time-summary strong {
    font-size: 12px;
    line-height: 1.2;
}

.selected-clips-list .clip-time-summary span {
    font-size: 10px;
    line-height: 1.2;
    color: #64748b;
}

.selected-clips-list .clip-timecode {
    white-space: nowrap;
}


/* Konuşma bilgisi */

.selected-clips-list .clip-summary-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 6px;
    padding-top: 6px;

    border-top: 1px solid #f1f5f9;
}

.selected-clips-list .clip-summary-badge {
    min-height: auto;
    padding: 3px 7px;
    border-radius: 5px;

    font-size: 10px;
    line-height: 1.2;
}

.selected-clips-list .clip-summary-speaker {
    font-size: 10px;
    color: #475569;
}


/* Butonlar */

.selected-clips-list [data-edit-clip],
.selected-clips-list [data-delete-clip] {
    min-height: 26px;
    padding: 3px 8px;
    font-size: 10px;
}


/* ============================================================
   END V4-R
   ============================================================ */


/* ============================================================
   V4-S — SELECTED CLIPS PROFESSIONAL COMPACT ROWS
   ============================================================ */

.selected-clips-panel {
    width: 100%;
    max-width: none;
    margin: 10px 0 0;
    padding: 10px 12px;

    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
}


/* ------------------------------------------------------------
   PANEL HEADER
   ------------------------------------------------------------ */

.selected-clips-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 0 7px;
}

.selected-clips-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    color: #64748b;
}

.selected-clips-count {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
}


/* ------------------------------------------------------------
   LIST
   ------------------------------------------------------------ */

.selected-clips-list .clip-summary-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


/* ------------------------------------------------------------
   COMPACT CLIP CARD
   ------------------------------------------------------------ */

.selected-clips-list .clip-row,
.selected-clips-list .clip-row-clean {
    position: relative;

    margin: 0 !important;
    padding: 8px 10px !important;

    min-height: 0 !important;

    border: 1px solid #e2e8f0;
    border-left: 4px solid var(
        --clip-section-color,
        #64748b
    );

    border-radius: 7px;
    background: #ffffff;
}


/* ------------------------------------------------------------
   TOP ROW
   ------------------------------------------------------------ */

.selected-clips-list .clip-row-top,
.selected-clips-list .clip-row-top-clean {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 0 !important;
    padding: 0 !important;
}


/* ------------------------------------------------------------
   CLIP INFO
   ------------------------------------------------------------ */

.selected-clips-list .clip-time-summary {
    display: flex;
    align-items: center;

    gap: 8px;

    flex: 1;
    min-width: 0;
}


/* renkli bölüm numarası */

.selected-clips-list .clip-section-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;

    border-radius: 6px;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}


/* bölüm bilgileri artık yatay */

.selected-clips-list .clip-time-summary > div {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
    min-width: 0;
}


.selected-clips-list .clip-time-summary strong {
    margin: 0;

    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;

    color: #0f172a;
}


.selected-clips-list .clip-time-summary span {
    margin: 0;

    font-size: 10px;
    line-height: 1.2;

    color: #64748b;
}


.selected-clips-list .clip-timecode {
    white-space: nowrap;
}


/* ------------------------------------------------------------
   SOURCE / SPEAKER — SECOND COMPACT LINE
   ------------------------------------------------------------ */

.selected-clips-list .clip-summary-line {
    display: flex;
    align-items: center;

    gap: 6px;

    margin: 5px 0 0 32px !important;
    padding: 5px 0 0 !important;

    border-top: 1px solid #f1f5f9;
}


.selected-clips-list .clip-summary-badge {
    display: inline-flex;
    align-items: center;

    min-height: 0 !important;

    padding: 2px 6px;

    border-radius: 4px;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
}


.selected-clips-list .clip-summary-speaker {
    font-size: 10px;
    line-height: 1.3;

    color: #475569;
}


/* ------------------------------------------------------------
   ACTIONS
   ------------------------------------------------------------ */

.selected-clips-list [data-edit-clip],
.selected-clips-list [data-delete-clip] {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding: 4px 7px !important;

    border-radius: 5px;

    font-family: inherit;
    font-size: 9px !important;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;
}


/* Düzenle */

.selected-clips-list [data-edit-clip] {
    border: 1px solid #cbd5e1;

    background: #f8fafc;
    color: #334155;
}

.selected-clips-list [data-edit-clip]:hover {
    background: #f1f5f9;
}


/* Sil */

.selected-clips-list [data-delete-clip] {
    border: 0;

    background: transparent;
    color: #dc2626;
}

.selected-clips-list [data-delete-clip]:hover {
    background: #fef2f2;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    .selected-clips-list .clip-row-top,
    .selected-clips-list .clip-row-top-clean {
        align-items: flex-start;
    }

    .selected-clips-list .clip-time-summary > div {
        gap: 4px 7px;
    }

    .selected-clips-list .clip-summary-line {
        margin-left: 0 !important;
        flex-wrap: wrap;
    }
}


/* ============================================================
   END V4-S
   ============================================================ */