/*
 * KOD REHBERİ — assets/css/panel.css
 * Yönetim panelinin menü, form, tablo ve ekran düzeni.
 * Genel okuma sırası ve örnekler: proje kökündeki KOD-OKUMA-REHBERI.md.
 */

/* Tema değişkenleri: var(--...) kullanan kurallar bu ortak değerleri okur. */
:root {
    --purple:#655075;
    --deep:#493855;
    --ink:#34383b;
    --muted:#7c7e87;
    --line:#e9e6ec;
    --bg:#f7f6f9;
    --light:#f1edf5
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--bg);
    font:14px/1.65 'Segoe UI',Arial,sans-serif;
    color:var(--ink)
}

a {
    color:inherit;
    text-decoration:none
}

button,input,textarea,select {
    font:inherit
}

button {
    cursor:pointer
}

h1,h2,h3,p {
    margin-top:0
}

h1 {
    font:400 36px/1.2 Georgia,serif;
    letter-spacing:-.7px;
    margin-bottom:10px
}

h2 {
    font-size:17px;
    font-weight:600;
    line-height:1.4;
    margin-bottom:6px
}

h3 {
    font-size:18px
}

p {
    color:var(--muted);
    margin-bottom:16px
}

button,a,input,textarea {
    transition:background .15s,border-color .15s
}

a:hover {
    color:var(--purple)
}

:focus-visible {
    outline:3px solid #b297c8;
    outline-offset:3px
}

.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:248px;
    background:#fff;
    border-right:1px solid var(--line);
    padding:37px 22px 24px;
    display:flex;
    flex-direction:column
}

.panel-brand {
    font:italic 35px Georgia,serif;
    color:var(--deep);
    padding:0 12px
}

.panel-brand small {
    display:block;
    font:8px 'Segoe UI',sans-serif;
    letter-spacing:2.6px;
    margin:12px 0 50px
}

.nav-label {
    font-size:9px;
    color:#a09aa7;
    letter-spacing:1.8px;
    padding:0 14px;
    margin-bottom:15px
}

.sidebar nav {
    display:grid;
    gap:6px
}

.sidebar nav a {
    padding:12px 13px;
    border-radius:6px;
    font-size:12px;
    color:#77707e;
    display:flex;
    gap:13px;
    align-items:center
}

.sidebar nav a>span {
    font-size:20px;
    width:24px;
    text-align:center;
    line-height:1
}

.sidebar nav a:hover,.sidebar nav a[aria-current] {
    background:var(--light);
    color:var(--purple)
}

.sidebar nav a[aria-current] {
    font-weight:600
}

.sidebar-bottom {
    margin-top:auto;
    padding:30px 12px 0
}

.test-note {
    background:#f7f5f8;
    border:1px solid var(--line);
    padding:15px;
    border-radius:6px;
    margin-bottom:20px
}

.test-note strong {
    color:var(--purple);
    font-size:11px
}

.test-note p {
    font-size:11px;
    line-height:1.7;
    margin:5px 0 0
}

.sidebar-bottom>a,.logout {
    font-size:11px;
    display:block;
    padding:8px 0
}

.logout {
    border:0;
    background:none;
    color:var(--muted)
}

.workspace {
    margin-left:248px;
    min-height:100vh;
    display:flex;
    flex-direction:column
}

.topbar {
    height:76px;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:0 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:11px;
    color:var(--muted)
}

.topbar b {
    padding:0 14px;
    font-weight:400;
    color:#ccc
}

.admin-label {
    display:flex;
    align-items:center;
    gap:8px;
    color:#666
}

.admin-label i {
    height:7px;
    width:7px;
    border-radius:50%;
    background:#96aa82
}

.panel-main {
    padding:40px;
    max-width:1500px;
    width:100%;
    margin:0 auto;
    flex:1
}

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

.page-heading p {
    font-size:12px;
    margin-bottom:0
}

.eyebrow {
    font-size:9px;
    letter-spacing:2px;
    color:var(--purple);
    display:block;
    margin-bottom:12px;
    font-weight:600
}

.btn {
    padding:11px 18px;
    border:1px solid transparent;
    border-radius:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    font-size:12px;
    font-weight:500;
    line-height:1.5
}

.primary {
    background:var(--purple);
    color:white
}

.primary:hover {
    background:var(--deep);
    color:white
}

.secondary {
    border-color:#ddd6e4;
    background:#fff;
    color:var(--purple)
}

.secondary:hover {
    background:var(--light)
}

.danger {
    background:#a3444e;
    color:white
}

.wide {
    width:100%;
    justify-content:space-between
}

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

.stat {
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    padding:25px
}

.stat>span {
    font-size:12px;
    color:var(--muted);
    display:flex;
    justify-content:space-between;
    gap:15px
}

.stat b {
    font-size:20px;
    line-height:1;
    color:var(--purple);
    font-weight:400
}

.stat strong {
    display:block;
    font:42px/1.5 Georgia,serif;
    color:var(--deep);
    margin:10px 0
}

.stat small {
    font-size:10px;
    color:var(--muted)
}

.notice {
    padding:15px 20px;
    border-radius:5px;
    font-size:12px;
    line-height:1.8;
    margin-bottom:25px;
    border:1px solid
}

.notice strong {
    margin-right:8px
}

.notice p:last-child {
    margin-bottom:0
}

.info {
    background:#f0ecf5;
    border-color:#e3dbed;
    color:#766087
}

.success {
    background:#edf4ed;
    border-color:#d7e7d7;
    color:#3b6142
}

.error {
    background:#fff0f0;
    border-color:#eccdce;
    color:#a03d49
}

.error p {
    color:inherit
}

.card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden
}

.card-heading {
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.card-heading p {
    font-size:11px;
    margin-bottom:0
}

.link {
    font-size:12px;
    font-weight:500;
    color:var(--purple)
}

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

.empty>span {
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--light);
    color:var(--purple);
    width:65px;
    height:65px;
    margin:0 auto 20px;
    font-size:29px
}

.empty h3 {
    font:24px Georgia,serif;
    color:var(--deep);
    margin-bottom:12px
}

.empty p {
    font-size:12px
}

.empty .btn {
    margin-top:7px
}

.table-scroll {
    overflow-x:auto
}

table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:12px
}

th {
    background:#fbfafc;
    color:#93909a;
    font-size:10px;
    font-weight:500;
    white-space:nowrap
}

td,th {
    padding:18px 23px;
    border-bottom:1px solid #eeebf1
}

tr:last-child td {
    border-bottom:0
}

td {
    color:#797582
}

td small {
    display:block;
    font-size:10px;
    color:#96919c;
    margin-top:4px
}

.row-title {
    display:block;
    font-weight:600;
    color:#4d4357;
    max-width:270px;
    overflow-wrap:anywhere
}

.nowrap {
    white-space:nowrap
}

.badge {
    display:inline-block;
    padding:4px 9px;
    border-radius:30px;
    font-size:9px;
    white-space:nowrap;
    font-weight:500
}

.badge.purple {
    background:var(--light);
    color:var(--purple)
}

.badge.neutral {
    background:#f0f2ef;
    color:#7d8879
}

.panel-footer {
    padding:23px 40px;
    border-top:1px solid var(--line);
    font-size:10px;
    color:#aaa4af;
    display:flex;
    justify-content:space-between;
    gap:20px
}

.tabs {
    display:flex;
    gap:12px;
    margin-bottom:24px
}

.tabs a {
    font-size:12px;
    padding:8px 15px;
    border:1px solid var(--line);
    border-radius:30px;
    background:#fff
}

.tabs a[aria-current] {
    color:white;
    background:var(--purple);
    border-color:var(--purple)
}

.total {
    font-size:12px;
    color:var(--muted)
}

.back {
    font-size:11px;
    display:inline-block;
    color:var(--muted);
    margin-bottom:20px
}

.padded {
    padding:28px
}

.sender {
    display:flex;
    justify-content:space-between;
    gap:25px;
    border-bottom:1px solid var(--line);
    padding-bottom:25px
}

.sender .eyebrow {
    margin-bottom:8px
}

.sender h2 {
    font-size:21px;
    margin-bottom:5px;
    overflow-wrap:anywhere
}

.sender p {
    font-size:12px;
    margin:8px 0 0
}

.message-content {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    line-height:1.9;
    padding:30px 0 40px;
    font-size:14px
}

.hint {
    font-size:10px;
    color:#8f8a98;
    line-height:1.8;
    margin:10px 0 0
}

.product-cell {
    display:flex;
    align-items:center;
    gap:15px
}

.product-cell img,.image-placeholder {
    width:52px;
    height:60px;
    object-fit:contain;
    background:var(--light);
    border-radius:4px;
    flex-shrink:0
}

.image-placeholder {
    display:grid;
    place-items:center;
    font-size:24px;
    color:#b8acc3
}

.row-actions {
    display:flex;
    gap:15px
}

.danger-link {
    font-size:12px;
    color:#a95967
}

.product-form {
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);
    gap:24px;
    align-items:start
}

.form-side {
    display:grid;
    gap:24px
}

label {
    display:block;
    font-size:12px;
    font-weight:500;
    color:#665c6d;
    margin:20px 0 7px
}

input,textarea {
    display:block;
    width:100%;
    padding:11px 13px;
    border:1px solid #e1dbe6;
    border-radius:4px;
    background:#fefdfF;
    color:var(--ink);
    font-size:13px
}

input:focus,textarea:focus {
    border-color:#ad95be
}

textarea {
    resize:vertical;
    min-height:80px
}

input[type=file] {
    font-size:11px;
    padding:10px;
    overflow:hidden
}

input[type=file]::file-selector-button {
    border:0;
    background:var(--light);
    color:var(--purple);
    padding:7px 9px;
    border-radius:3px;
    cursor:pointer;
    margin-right:8px
}

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.upload-preview {
    height:230px;
    background:#f8f6fa;
    border:1px dashed #d9cee2;
    border-radius:5px;
    margin-top:20px;
    display:grid;
    place-items:center;
    overflow:hidden
}

.upload-preview img {
    width:100%;
    height:230px;
    object-fit:contain;
    padding:12px
}

.upload-preview>span {
    text-align:center;
    color:#c3b8ce;
    font-size:50px
}

.upload-preview small {
    display:block;
    font-size:11px;
    color:#99909f
}

.save-card p {
    font-size:12px;
    margin-top:15px
}

.cancel {
    display:block;
    text-align:center;
    font-size:11px;
    margin-top:15px;
    color:var(--muted)
}

.checkbox {
    display:flex;
    gap:8px;
    align-items:center;
    font-size:11px
}

.checkbox input {
    width:auto
}

.narrow {
    max-width:650px
}

.narrow form>.btn {
    margin-top:20px
}

.actions {
    display:flex;
    gap:15px;
    margin-top:25px
}

.pagination {
    display:flex;
    justify-content:flex-end;
    gap:20px;
    align-items:center;
    margin-top:25px;
    font-size:12px
}

.login-body {
    background:radial-gradient(ellipse at top,#eee5f1,transparent 70%),#f7f5f8;
    min-height:100vh
}

.login-main {
    max-width:470px;
    padding:65px 20px;
    margin:auto
}

.login-brand {
    text-align:center;
    font:italic 43px Georgia,serif;
    color:var(--deep);
    margin-bottom:34px
}

.login-brand span {
    display:block;
    font:8px 'Segoe UI',sans-serif;
    letter-spacing:2.3px;
    margin-top:12px
}

.login-card {
    padding:35px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 12px 40px #4b315008
}

.login-card h1 {
    font-size:32px
}

.login-card p {
    font-size:12px
}

.login-card .btn {
    margin-top:25px
}

.login-back {
    display:block;
    text-align:center;
    font-size:11px;
    color:var(--muted);
    margin-top:25px
}

.sr-only,.skip:not(:focus) {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.skip:focus {
    position:fixed;
    top:10px;
    left:10px;
    background:white;
    padding:10px;
    z-index:10
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(max-width:1100px) {
    .sidebar {
        width:215px;
        padding-left:15px;
        padding-right:15px
    }
    .workspace {
        margin-left:215px
    }
    .panel-main {
        padding:30px 25px
    }
    .topbar {
        padding:0 25px
    }
    .product-form {
        grid-template-columns:1fr
    }
    .form-side {
        grid-template-columns:1fr 1fr;
        align-items:start
    }
    .stats {
        gap:12px
    }
    .stat {
        padding:20px
    }
    .panel-footer {
        padding:23px 25px
    }
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(max-width:760px) {
    .sidebar {
        position:static;
        width:auto;
        padding:20px;
        border-right:0;
        border-bottom:1px solid var(--line)
    }
    .panel-brand {
        font-size:29px;
        padding:0
    }
    .panel-brand small {
        margin:7px 0 18px;
        font-size:7px
    }
    .nav-label,.test-note {
        display:none
    }
    .sidebar nav {
        display:flex;
        flex-wrap:wrap;
        gap:6px
    }
    .sidebar nav a {
        padding:8px 10px;
        font-size:10px;
        gap:6px
    }
    .sidebar nav a>span {
        font-size:16px;
        width:auto
    }
    .sidebar-bottom {
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:12px 0 0;
        margin-top:0
    }
    .workspace {
        margin:0
    }
    .topbar {
        height:55px;
        padding:0 20px;
        font-size:10px
    }
    .panel-main {
        padding:28px 20px
    }
    .page-heading {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:18px;
        margin-bottom:24px
    }
    h1 {
        font-size:31px
    }
    .stats {
        grid-template-columns:1fr
    }
    .stat {
        padding:18px 20px;
        position:relative
    }
    .stat strong {
        font-size:34px;
        line-height:1.2;
        margin:8px 0
    }
    .stat small {
        position:absolute;
        right:20px;
        bottom:20px
    }
    .notice {
        font-size:11px;
        padding:15px
    }
    .card-heading {
        padding:20px
    }
    .card-heading h2 {
        font-size:15px
    }
    .card-heading p {
        font-size:10px
    }
    .empty {
        padding:35px 20px
    }
    td,th {
        padding:15px
    }
    .sender {
        flex-direction:column;
        gap:20px
    }
    .padded {
        padding:22px
    }
    .form-side,.form-row {
        grid-template-columns:1fr
    }
    .form-row {
        gap:0
    }
    .panel-footer {
        font-size:8px;
        padding:20px;
        gap:20px
    }
    .tabs {
        gap:6px
    }
    .tabs a {
        font-size:10px;
        padding:8px 11px
    }
    .login-main {
        padding-top:45px
    }
    .login-card {
        padding:28px
    }
    .message-content {
        font-size:13px
    }
    .product-form {
        gap:20px
    }
    .pagination {
        gap:10px;
        font-size:10px
    }
    .pagination .btn {
        font-size:10px;
        padding:8px 12px
    }
}

.smtp-grid {
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);
    gap:24px;
    align-items:start
}

.smtp-grid select {
    width:100%;
    padding:11px 10px;
    border:1px solid #e1dbe6;
    border-radius:4px;
    background:#fefdff;
    color:var(--ink);
    font:13px 'Segoe UI',Arial,sans-serif;
    min-height:44px
}

.smtp-description {
    font-size:12px;
    margin-top:15px
}

.smtp-toggle {
    padding:15px;
    background:var(--light);
    border-radius:5px
}

.form-divider {
    border:0;
    border-top:1px solid var(--line);
    margin:28px 0
}

.smtp-steps {
    padding-left:20px;
    font-size:12px;
    color:var(--muted);
    line-height:1.8
}

.smtp-steps li {
    margin:12px 0
}

.mail-status {
    margin-top:24px
}

.mail-status .card-heading {
    padding:0 0 10px
}

.mail-status .notice {
    margin:18px 0
}

.smtp-grid .form-side {
    grid-template-columns:1fr
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(max-width:1000px) {
    .smtp-grid {
        grid-template-columns:1fr
    }
    .smtp-grid .form-side {
        grid-template-columns:1fr 1fr
    }
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(max-width:760px) {
    .smtp-grid .form-side {
        grid-template-columns:1fr
    }
}

.content-select {
    width:100%;
    padding:11px 10px;
    border:1px solid #e1dbe6;
    border-radius:4px;
    background:#fefdff;
    color:var(--ink);
    font:13px 'Segoe UI',Arial,sans-serif;
    min-height:44px
}

.blog-editor {
    line-height:1.9;
    min-height:350px
}

.content-list-toolbar {
    margin-bottom:22px
}

.content-slug {
    overflow-wrap:anywhere
}

.sidebar {
    overflow-y:auto
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(min-width:761px) and (max-height:850px) {
    .sidebar {
        padding-top:24px
    }
    .panel-brand small {
        margin-bottom:24px
    }
    .sidebar nav a {
        padding-top:9px;
        padding-bottom:9px
    }
    .sidebar-bottom {
        padding-top:18px
    }
    .test-note {
        padding:10px;
        margin-bottom:10px
    }
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(prefers-reduced-motion:reduce) {
    * {
        transition:none!important
    }
}