/* ==========================================================================
   Pervis — yönetim paneli stilleri
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB;
}

:root {
  /* Yesil — eylem */
  --brand:#0a854e; --brand-600:#076b3f; --brand-300:#34d399;
  --brand-50:#e9f7f0; --brand-100:#cfeddf;
  /* Mavi — icerik, baslik ve bilgi alanlari */
  --mavi-950:#0b2239; --mavi-800:#123a5e; --mavi-600:#14456f;
  --mavi:#1b6fa8; --mavi-300:#7fc0ea; --mavi-50:#eef5fb; --mavi-100:#d8e8f5;
  /* Notr — hafif mavi kirikli gri skala */
  --ink-950:#0f1720; --ink-900:#16202b; --ink-800:#26333f; --ink-700:#3c4a59;
  --ink-600:#4e5d6c; --ink-500:#64748b; --ink-400:#8a97a6; --ink-300:#aab5c2;
  --ink-200:#dde4eb; --ink-100:#ebf0f5; --ink-50:#f6f9fc;
  /* Cizgi, kose ve golge */
  --cizgi:#e4eaf0; --cizgi-koyu:#d3dce5;
  --golge-sm: 0 1px 2px rgba(11,34,57,.06);
  --golge:    0 2px 8px rgba(11,34,57,.07);
  --golge-lg: 0 16px 40px rgba(11,34,57,.10);
  --ok:#0a7c46; --err:#c62828;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ink-50); color: var(--ink-900);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3 { margin: 0; letter-spacing: -.01em; }
p { margin: 0; }

/* ------------------------------------------------------------------ DÜZEN */

.shell { display: flex; min-height: 100vh; }
.side {
  width: 250px; flex-shrink: 0; background: var(--mavi-950); color: #fff;
  display: flex; flex-direction: column;
}
.side-logo { padding: 22px 24px 18px; }
.side-logo img { height: 30px; width: auto; }
.side-nav { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; flex: 1; }
.side-nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 9px; color: rgba(255,255,255,.6); font-size: .9rem;
}
.side-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.side-nav a.is-active { background: var(--brand); color: #fff; font-weight: 600; }
.side-nav .ico { width: 16px; text-align: center; opacity: .85; }
.side-nav .muted { color: rgba(255,255,255,.35); margin-top: 8px; }
.side-nav .badge {
  margin-left: auto; background: var(--brand); color: #fff;
  border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 700;
}
.side-nav a.is-active .badge { background: rgba(0,0,0,.25); }
.side-foot { padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.1); }
.side-foot-label { font-size: .72rem; color: rgba(255,255,255,.4); }
.side-foot-name { font-size: .88rem; font-weight: 500; margin: 3px 0 8px; }
.side-foot a { font-size: .78rem; color: rgba(255,255,255,.5); text-decoration: underline; }
.side-foot a:hover { color: #fff; }

.main { flex: 1; min-width: 0; }
.topbar {
  background: #fff; border-bottom: 1px solid var(--cizgi);
  padding: 22px 36px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.topbar h1 { font-size: 1.45rem; font-weight: 700; }
.topbar p { color: var(--ink-500); font-size: .88rem; margin-top: 2px; }
.topbar-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.body { padding: 28px 36px 60px; }

/* --------------------------------------------------------------- ÖĞELER */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600;
  background: var(--brand); color: #fff; transition: background-color .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--brand-600); }
.btn-ghost { background: #fff; color: var(--ink-700); border: 1px solid var(--cizgi-koyu); }
.btn-ghost:hover { background: var(--ink-50); }
/* WhatsApp yeşili — Meta ile konuşan işlemler için */
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1DA851; }
.btn-wa svg { flex: 0 0 auto; }
.btn-sm { padding: 8px 16px; font-size: .82rem; }
.btn-block { width: 100%; }
.btn input[type=file] { display: none; }

.input {
  width: 100%; padding: 10px 14px; font: inherit; font-size: .88rem;
  border: 1px solid var(--cizgi-koyu); border-radius: 9px; background: #fff;
  color: var(--ink-900); outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--mavi); box-shadow: 0 0 0 3px var(--mavi-50); }
.input.is-locked, .input[readonly] { background: var(--ink-50); color: var(--ink-400); }
.input-sm { padding: 7px 10px; font-size: .8rem; }
textarea.input { resize: vertical; }
select.input { appearance: auto; }

.field { margin-bottom: 16px; }
.field > label, .f-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-700); }
.hint { font-size: .78rem; color: var(--ink-400); font-weight: 400; margin-top: 5px; }
.muted { color: var(--ink-500); font-size: .85rem; }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 12px; font-size: .88rem; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }

.panel { background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; margin-bottom: 22px;
         overflow: hidden; box-shadow: var(--golge-sm); }
.panel.pad, .panel .pad { padding: 22px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--cizgi);
}
.panel-head h2, .panel-title { font-size: .95rem; font-weight: 700; }
.panel-title { padding: 16px 22px; border-bottom: 1px solid var(--cizgi); }
.panel h3 { font-size: .85rem; font-weight: 700; margin-bottom: 14px; }
.panel-head a { font-size: .82rem; color: var(--mavi); }
.panel-head a:hover { text-decoration: underline; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.flash { padding: 12px 16px; border-radius: 9px; font-size: .88rem; margin-bottom: 18px; }
.flash--ok  { background: #e8f6ee; color: var(--ok); }
.flash--err { background: #fdeaea; color: var(--err); }
.flash--uyari { background: #fff6e6; color: #8a5a1a; }
.flash a { color: inherit; font-weight: 600; }

/* Kredi / sözleşme kutusu — gönderim öncesi maliyet özeti */
.kredi-kutu {
  background: #f6f8fb; border: 1px solid #dfe6f0; border-radius: 12px;
  padding: 14px 16px; margin: 18px 0; font-size: .9rem;
}
.kredi-kutu--uyari { background: #fff6e6; border-color: #f2ddc0; }
.kredi-satir { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; }
.kredi-satir + .kredi-satir { border-top: 1px solid rgba(0,0,0,.05); }
.kredi-satir span { color: var(--ink-500); }
.kredi-uyari { margin: 10px 0 0; color: #8a5a1a; font-weight: 600; }
.kredi-bakiye { font-size: 1.6rem; font-weight: 700; margin: 2px 0 0; }
.alt-baslik { font-size: .9rem; font-weight: 700; margin: 26px 0 12px; color: var(--ink-900); }
.tablo-kaydir { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 10px; }

.empty-box {
  background: #fff; border: 2px dashed var(--cizgi-koyu); border-radius: 14px;
  padding: 70px 20px; text-align: center; color: var(--ink-400);
}

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600;
        background: var(--ink-100); color: var(--ink-500); }
.pill--ok { background: #dcf3e6; color: var(--ok); }
.pill--brand { background: var(--mavi-100); color: var(--mavi-600); margin-left: 8px; }
.pill--uyari { background: #fdeaea; color: #b02a2a; margin-left: 6px; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); display: inline-block; }

.mini {
  background: transparent; border: 0; cursor: pointer; font: inherit; font-size: .8rem;
  color: var(--ink-500); padding: 5px 9px; border-radius: 6px;
}
.mini:hover { background: var(--ink-100); color: var(--ink-900); }
.mini.danger:hover { background: #fdecea; color: var(--err); }
.inline { display: inline; }
/* .inline button metin görünümlüdür; gerçek düğme koyulacaksa bu sınıf kullanılır */
.form-inline { display: inline; }
.inline button { background: 0; border: 0; cursor: pointer; font: inherit; font-size: .8rem; color: var(--ink-500); padding: 0; }
.inline button:hover { color: var(--ink-900); text-decoration: underline; }
.inline button.danger:hover { color: var(--err); }

/* ------------------------------------------------------------ GENEL BAKIŞ */

.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.stat-card { background: #fff; border: 1px solid var(--ink-200); border-radius: 13px; padding: 22px; transition: box-shadow .15s; }
.stat-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.stat-card-label { font-size: .84rem; color: var(--ink-500); }
.stat-card-value { font-size: 1.9rem; font-weight: 700; margin-top: 6px; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-bottom: 1px solid var(--ink-100); }
.list > li:last-child { border-bottom: 0; }
.list-empty { padding: 32px; text-align: center; color: var(--ink-400); font-size: .88rem; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; }
.list-row:hover { background: var(--ink-50); }
.list-msg { padding: 12px 22px; }
.list-msg-head { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.list-msg-date { margin-left: auto; font-size: .75rem; color: var(--ink-400); }
.list-msg-text { font-size: .84rem; color: var(--ink-500); margin-top: 3px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------- TABLOLAR */

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-400); padding: 13px 22px; border-bottom: 1px solid var(--ink-200); font-weight: 700;
}
.table td { padding: 14px 22px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--ink-50); }
.table .right, .table th.right { text-align: right; }
.table-title { font-weight: 600; }
.table-title:hover { color: var(--brand-600); }
.table-empty { text-align: center; color: var(--ink-400); padding: 60px 20px !important; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .8rem; color: var(--ink-500); }
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; font-size: .8rem; }
.row-actions > a { color: var(--ink-500); }
.row-actions > a:hover { color: var(--ink-900); }
.row-actions .link-brand { color: var(--brand-600); }
.row-actions .link-brand:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- MODALLAR */

.modal { border: 0; border-radius: 16px; padding: 0; max-width: 92vw; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.modal::backdrop { background: rgba(28,28,28,.55); }
.modal-card { padding: 28px; width: 440px; max-width: 100%; }
.modal-card--wide { width: 640px; }
.modal-card h2 { font-size: 1.1rem; font-weight: 700; }
.modal-sub { color: var(--ink-500); font-size: .86rem; margin: 4px 0 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.slug-input { display: flex; align-items: center; border: 1px solid var(--ink-200); border-radius: 9px; padding-left: 12px; }
.slug-input:focus-within { border-color: var(--brand); }
.slug-input span { color: var(--ink-400); font-size: .88rem; }
.slug-input .input { border: 0; padding-left: 4px; }
.slug-input .input:focus { border: 0; }

.block-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-height: 55vh; overflow-y: auto; }
.block-pick {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: #fff; border: 1px solid var(--ink-200); border-radius: 12px;
  padding: 14px; cursor: pointer; font: inherit;
}
.block-pick:hover { border-color: var(--mavi-300); background: var(--mavi-50); }
.block-pick-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--ink-100);
  display: flex; align-items: center; justify-content: center; color: var(--ink-600);
}
.block-pick strong { display: block; font-size: .88rem; }
.block-pick small { display: block; color: var(--ink-500); font-size: .78rem; }

/* ------------------------------------------------------------ BLOK EDİTÖR */

.editor-bar {
  position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--ink-200);
  display: flex; align-items: center; gap: 16px; padding: 14px 36px; flex-wrap: wrap;
}
.editor-bar .back { color: var(--ink-400); font-size: .85rem; }
.editor-bar .back:hover { color: var(--ink-900); }
.title-input {
  flex: 1; min-width: 200px; font: inherit; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em;
  border: 1px solid transparent; border-radius: 9px; padding: 6px 10px; outline: none; background: transparent;
}
.title-input:hover { border-color: var(--ink-200); }
.title-input:focus { border-color: var(--brand); }
.editor-bar-actions { display: flex; gap: 10px; }

.editor-grid { display: grid; grid-template-columns: 1fr 310px; gap: 26px; align-items: start; }
.editor-side { position: sticky; top: 90px; }

.blocks-empty {
  border: 2px dashed var(--ink-200); border-radius: 13px; padding: 60px 20px;
  text-align: center; color: var(--ink-400); background: #fff;
}
.blocks-empty .btn { margin-top: 16px; }

.blk { background: #fff; border: 1px solid var(--ink-200); border-radius: 13px; margin-bottom: 12px; overflow: hidden; }
.blk-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.blk-icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--ink-100);
  display: flex; align-items: center; justify-content: center; color: var(--ink-500); font-size: .9rem;
}
.blk-title { flex: 1; min-width: 0; text-align: left; background: 0; border: 0; cursor: pointer; font: inherit; padding: 0; }
.blk-title strong { display: block; font-size: .88rem; }
.blk-title small { display: block; font-size: .78rem; color: var(--ink-400);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk-actions { display: flex; gap: 2px; flex-shrink: 0; }
.blk-body { border-top: 1px solid var(--ink-100); background: #fafafa; padding: 20px 18px; }

.add-block {
  width: 100%; margin-top: 14px; padding: 16px; cursor: pointer; font: inherit; font-weight: 600;
  border: 2px dashed var(--ink-200); border-radius: 13px; background: transparent; color: var(--ink-500);
}
.add-block:hover { border-color: var(--brand); color: var(--brand); }

/* tekrarlayıcı (repeater) */
.rep-list { display: grid; gap: 12px; }
.rep-item { border: 1px solid var(--ink-200); border-radius: 10px; background: #fff; padding: 14px; }
.rep-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rep-num { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); }
.rep-actions { display: flex; gap: 2px; }
.rep-body { display: grid; gap: 12px; }
.rep-body .field { margin-bottom: 0; }
.rep-add {
  width: 100%; margin-top: 12px; padding: 10px; cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem;
  border: 2px dashed var(--ink-200); border-radius: 9px; background: transparent; color: var(--ink-500);
}
.rep-add:hover { border-color: var(--brand); color: var(--brand); }

/* görsel alanı */
.img-empty {
  width: 100%; height: 92px; cursor: pointer; font: inherit; font-size: .85rem; color: var(--ink-400);
  border: 2px dashed var(--ink-200); border-radius: 10px; background: transparent;
}
.img-empty:hover { border-color: var(--brand); color: var(--brand); }
.img-picked { display: flex; gap: 12px; align-items: flex-start; }
.img-picked img { width: 128px; height: 92px; object-fit: cover; border-radius: 9px; border: 1px solid var(--ink-200); }
.img-picked-actions { display: flex; flex-direction: column; gap: 4px; }
.img-setting { display: flex; gap: 14px; align-items: center; }
.img-setting img { max-height: 52px; width: auto; background: var(--ink-100); border-radius: 6px; padding: 6px 10px; }
.img-setting-actions { display: flex; gap: 6px; }

/* zengin metin */
.rt { border: 1px solid var(--ink-200); border-radius: 10px; overflow: hidden; background: #fff; }
.rt:focus-within { border-color: var(--brand); }
.rt-bar { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px 8px; background: var(--ink-50); border-bottom: 1px solid var(--ink-200); }
.rt-btn { background: 0; border: 0; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600;
          color: var(--ink-600); padding: 5px 9px; border-radius: 6px; }
.rt-btn:hover { background: var(--ink-200); }
.rt-area { min-height: 150px; padding: 12px 16px; outline: none; font-size: .9rem; line-height: 1.7; }
.rt-area h2 { font-size: 1.25rem; margin: 14px 0 6px; }
.rt-area h3 { font-size: 1.05rem; margin: 12px 0 5px; }
.rt-area p { margin: 8px 0; }
.rt-area ul, .rt-area ol { margin: 8px 0; padding-left: 22px; }
.rt-area blockquote { border-left: 3px solid var(--brand); margin: 10px 0; padding-left: 14px; color: var(--ink-600); }

/* ----------------------------------------------------------------- MEDYA */

.media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.media-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.media-tile { background: #fff; border: 1px solid var(--ink-200); border-radius: 12px; overflow: hidden; }
.media-tile > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--ink-50); }
.media-tile-body { padding: 12px 14px; display: grid; gap: 9px; }
.media-tile-name { font-size: .78rem; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-tile-actions { display: flex; align-items: center; justify-content: space-between; }
.media-alt-form { margin: 0; }

.media-modal { position: fixed; inset: 0; z-index: 100; background: rgba(28,28,28,.6);
               display: flex; align-items: center; justify-content: center; padding: 24px; }
.media-card { background: #fff; border-radius: 16px; width: 900px; max-width: 100%; max-height: 84vh;
              display: flex; flex-direction: column; overflow: hidden; }
.media-head { display: flex; align-items: center; justify-content: space-between;
              padding: 16px 22px; border-bottom: 1px solid var(--ink-200); }
.media-head h2 { font-size: .98rem; font-weight: 700; }
.media-head-actions { display: flex; align-items: center; gap: 12px; }
.media-close { background: 0; border: 0; font-size: 1.3rem; color: var(--ink-400); cursor: pointer; }
.media-grid { flex: 1; overflow-y: auto; padding: 20px 22px;
              display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.media-item { background: #fff; border: 1px solid var(--ink-200); border-radius: 10px;
              overflow: hidden; cursor: pointer; padding: 0; font: inherit; text-align: left; }
.media-item:hover { border-color: var(--brand); }
.media-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--ink-50); }
.media-item span { display: block; padding: 7px 10px; font-size: .74rem; color: var(--ink-500);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-empty { grid-column: 1/-1; text-align: center; color: var(--ink-400); padding: 40px 0; font-size: .88rem; }

/* ------------------------------------------------------------------ MENÜ */

.menu-rows { display: grid; gap: 12px; }
.menu-row { border: 1px solid var(--ink-200); border-radius: 10px; background: #fbfbfb; padding: 14px; }
.menu-row-top { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.menu-row-top .input { font-weight: 500; }
.menu-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-add { margin-top: 12px; }

/* -------------------------------------------------------------- MESAJLAR */

.msg-list { display: grid; gap: 12px; }
.msg { margin-bottom: 0; }
.msg.is-read { opacity: .68; }
.msg-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.msg-name { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.msg-contact { display: flex; gap: 16px; font-size: .84rem; color: var(--ink-500); margin-top: 4px; flex-wrap: wrap; }
.msg-contact a:hover { color: var(--brand-600); }
.msg-actions { display: flex; align-items: center; gap: 14px; font-size: .78rem; color: var(--ink-400); }
.msg-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-100);
            font-size: .89rem; line-height: 1.7; color: var(--ink-700); }
.msg-meta { margin-top: 10px; font-size: .74rem; color: var(--ink-400); }

/* ---------------------------------------------------------------- AYARLAR */

.settings-grid { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
.settings-grid aside { position: sticky; top: 20px; }
.sys-info p { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem;
              padding: 6px 0; border-bottom: 1px solid var(--ink-100); }
.sys-info p:last-child { border-bottom: 0; }
.sys-info span { color: var(--ink-500); }
.sys-warn { display: block !important; background: #fff6e6; color: #8a5a1a;
            padding: 10px 12px; border-radius: 8px; margin-top: 10px; line-height: 1.5; }

/* ------------------------------------------------------------------ GİRİŞ */

.login-body { background: var(--mavi-950); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-box { width: 380px; max-width: 100%; }
.login-brand { text-align: center; margin-bottom: 28px; }
.login-brand img { height: 38px; width: auto; margin: 0 auto; }
.login-brand p { color: rgba(255,255,255,.5); font-size: .87rem; margin-top: 18px; }
.login-card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.login-card .btn { margin-top: 6px; }

/* ------------------------------------------------------------- DUYARLILIK */

@media (max-width: 1100px) {
  .editor-grid, .settings-grid { grid-template-columns: 1fr; }
  .editor-side, .settings-grid aside { position: static; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .side { width: 100%; }
  .side-nav { flex-direction: row; overflow-x: auto; padding-bottom: 12px; }
  .side-nav a { white-space: nowrap; }
  .side-foot { display: flex; align-items: center; gap: 14px; }
  .side-foot-name { margin: 0; }
  .two-col, .grid-2, .menu-row-grid { grid-template-columns: 1fr; }
  .topbar, .body, .editor-bar { padding-left: 18px; padding-right: 18px; }
  .hide-sm { display: none; }
  .table td, .table th { padding-left: 14px; padding-right: 14px; }
  .row-actions { gap: 10px; flex-wrap: wrap; }
  .block-picker-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .stat-cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- ROL ÖZETİ */

.rol-ozet { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.rol-kart { background: #fff; border: 1px solid var(--ink-200); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; }
.rol-ad { font-size: .84rem; font-weight: 600; color: var(--ink-700); }
.rol-sayi { font-size: 1.3rem; font-weight: 700; }

.yetki-tablo { font-size: .84rem; }
.yetki-tablo th { padding: 10px 12px; }
.yetki-tablo td { padding: 9px 12px; }
.yetki-tablo th:not(:first-child), .yetki-tablo td:not(:first-child) { text-align: center; width: 90px; }
.yetki-tablo .evet { color: #0a7c46; font-weight: 700; }
.yetki-tablo .hayir { color: var(--ink-300); }

.side-rol { display: inline-block; margin-top: 6px; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.75); border-radius: 4px; padding: 2px 7px; }

@media (max-width: 1100px) { .rol-ozet { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .rol-ozet { grid-template-columns: repeat(2, 1fr); }
  .yetki-tablo { font-size: .76rem; } .yetki-tablo th:not(:first-child), .yetki-tablo td:not(:first-child) { width: 52px; } }
.ok-yesil { color: #0a7c46; }
.ok-kirmizi { color: #c62828; }


/* Sunucu bakım ekranı */
.log-kutu{background:#1e1e22;color:#d6d6dc;border-radius:10px;padding:14px 16px;
  font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;word-break:break-all;overflow:auto;max-height:260px;margin:8px 0}
.log-kutu--uzun{max-height:460px}

/* Müşteri sayfası — numara tablosu dar panele sığsın */
.num-kimlik { line-height: 1.5; }
.num-kimlik > div + div { margin-top: 6px; }
.num-kimlik code { display: block; background: var(--ink-50); padding: 2px 6px; border-radius: 5px;
                   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                   font-size: .74rem; letter-spacing: -.2px; white-space: nowrap; }
.num-etiket { display: block; color: var(--ink-400); font-size: .68rem;
              text-transform: uppercase; letter-spacing: .04em; }
.row-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
/* dar panelde iki düğme yan yana sığmıyor — alt alta koy */
.num-tablo { table-layout: fixed; width: 100%; }
.num-tablo td, .num-tablo th { overflow-wrap: anywhere; padding-left: 8px; padding-right: 8px; }
.num-tablo col.c-hat { width: 34%; }
.num-tablo col.c-kimlik { width: 46%; }
.num-tablo col.c-islem { width: 20%; }
.num-tablo .row-actions { flex-direction: column; align-items: flex-end; gap: 2px; }
/* modal hücre içinde açılıyor — hizalamayı hücreden devralmasın */
.modal, .modal-card { text-align: left; }
.modal-card .modal-actions { flex-wrap: wrap; }
.num-tablo .row-actions .mini,
.num-tablo .row-actions .inline button { white-space: nowrap; }

/* Kampanya — alıcı kaynağı seçimi */
.secim { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.secim-kart { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
              border: 1px solid var(--ink-200); border-radius: 10px; padding: 12px 14px; background: #fff; }
.secim-kart:hover { border-color: var(--brand); }
.secim-kart input { margin-top: 3px; accent-color: var(--brand); }
.secim-kart strong { display: block; font-size: .88rem; }
.secim-kart em { display: block; font-style: normal; font-size: .78rem; color: var(--ink-400); margin-top: 2px; }
.secim-kart:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
@media (max-width: 700px) { .secim { grid-template-columns: 1fr; } }

/* Sohbet sekmeleri */
.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--ink-200); margin-bottom: 14px; }
.sekme { padding: 10px 18px; font-size: .88rem; font-weight: 600; color: var(--ink-500);
         border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sekme:hover { color: var(--ink-900); }
.sekme.is-on { color: var(--brand); border-bottom-color: var(--brand); }
.sekme em { font-style: normal; font-weight: 500; opacity: .75; }

/* Sohbetteki sistem notu (üstlenme kaydı) */
.sistem-not { text-align: center; margin: 16px 0; }
.sistem-not span { display: inline-block; background: rgba(255,255,255,.85); color: var(--ink-500);
                   border-radius: 999px; padding: 5px 15px; font-size: .74rem;
                   box-shadow: 0 1px 3px rgba(0,0,0,.07); }

/* Sohbeti üstlenme çubuğu */
.ustlen-cubuk { display:flex; align-items:center; gap:13px;
                background:#fff; border:1px solid var(--ink-200); border-radius:13px;
                padding:11px 14px; margin-bottom:12px; font-size:.85rem; flex-wrap:wrap;
                box-shadow:0 1px 3px rgba(0,0,0,.05); }
.ustlen-rozet { flex-shrink:0; width:34px; height:34px; border-radius:999px;
                display:flex; align-items:center; justify-content:center;
                background:var(--ink-100); color:var(--ink-600); font-size:.9rem; font-weight:700; }
.ustlen-metin { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.ustlen-metin strong { font-size:.87rem; color:var(--ink-900); }
.ustlen-metin em { font-style:normal; font-size:.78rem; color:var(--ink-500); }
.ustlen-cubuk .form-inline { margin-left:auto; }
.ustlen-cubuk.is-benim   { background:#f2faf5; border-color:#c6e5d4; }
.ustlen-cubuk.is-benim   .ustlen-rozet { background:#d8f0e2; color:#0a7c46; }
.ustlen-cubuk.is-baskasi { background:#fff8f3; border-color:#ffdcc6; }
.ustlen-cubuk.is-baskasi .ustlen-rozet { background:var(--mavi-100); color:var(--mavi-600); }

/* Ayar ekranlarındaki küçük kod/klasör kutusu */
.kod-kutu { background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 8px;
            padding: 10px 12px; font-family: ui-monospace, monospace; font-size: .76rem;
            color: var(--ink-700); margin: 0 0 10px; line-height: 1.7;
            white-space: pre-wrap; word-break: break-word; }

/* ==========================================================================
   İKİ ADIMLI DOĞRULAMA
   ========================================================================== */

/* --- giriş sırasındaki kod ekranı --- */
.ia-baslik   { font-size: .98rem; font-weight: 700; color: var(--ink-900); margin: 0 0 6px; text-align: center; }
.ia-alt      { text-align: center; margin: 0 0 18px; }
.ia-orta     { text-align: center; margin-top: 14px; }
.ia-kod      { text-align: center; letter-spacing: .32em; font-size: 1.35rem; font-weight: 700;
               font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 14px 12px; }
.ia-kod::placeholder { letter-spacing: .32em; font-weight: 400; color: var(--ink-300); }
.ia-hatirla  { display: flex; align-items: center; gap: 9px; font-size: .84rem;
               color: var(--ink-600); margin: 0 0 16px; cursor: pointer; }
.ia-hatirla input { width: 16px; height: 16px; accent-color: var(--brand); }
.btn-link    { background: none; border: 0; padding: 0; color: var(--mavi); cursor: pointer;
               font: inherit; text-decoration: underline; }
.btn-link[disabled] { color: var(--ink-400); cursor: default; text-decoration: none; }

/* --- Güvenlik ekranı --- */
.ia-icerik   { max-width: 780px; }
.ia-kart     { padding: 20px 22px; margin-bottom: 16px; }
.ia-kart h3  { margin: 0 0 8px; font-size: 1rem; }
.ia-kart--vurgu { border: 1px solid var(--mavi-100); background: var(--mavi-50); }

.ia-durum    { font-weight: 700; margin: 0 0 4px; }
.ia-durum--acik   { color: var(--ok, #1e7a4b); }
.ia-durum--kapali { color: #b02a2a; }

.ia-secim    { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ia-secenek  { display: block; width: 100%; text-align: left; background: #fff; cursor: pointer;
               border: 1px solid var(--cizgi-koyu); border-radius: 12px; padding: 16px 18px;
               transition: border-color .15s, box-shadow .15s; font: inherit; }
.ia-secenek:hover:not([disabled]) { border-color: var(--mavi-300); box-shadow: var(--golge); }
.ia-secenek[disabled] { opacity: .55; cursor: not-allowed; }
.ia-secenek-ico { display: block; font-size: 1.5rem; margin-bottom: 8px; }
.ia-secenek strong { display: block; margin-bottom: 5px; color: var(--ink-900); }
.ia-secenek span:not(.ia-secenek-ico):not(.ia-secenek-eylem) {
               display: block; font-size: .82rem; color: var(--ink-600); line-height: 1.6; }
.ia-secenek-eylem { display: block; margin-top: 10px; font-size: .82rem; font-weight: 600; color: var(--mavi); }

.ia-kur      { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; margin-top: 14px; }
@media (max-width: 640px) { .ia-kur { grid-template-columns: 1fr; } }
.ia-qr       { background: #fff; border: 1px solid var(--ink-200); border-radius: 10px; padding: 8px; line-height: 0; }
.ia-qr svg   { display: block; width: 190px; height: 190px; }
.ia-secret   { font-family: ui-monospace, monospace; font-size: .95rem; font-weight: 700;
               letter-spacing: .06em; background: var(--ink-50); border: 1px solid var(--ink-200);
               border-radius: 8px; padding: 10px 12px; margin: 6px 0 16px; word-break: break-all; }

.ia-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
.ia-form .input { margin-bottom: 12px; max-width: 300px; }

.ia-kurtarma { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;
               margin: 14px 0; }
.ia-kurtarma span { font-family: ui-monospace, monospace; font-size: .92rem; font-weight: 700;
               background: #fff; border: 1px dashed var(--ink-300); border-radius: 8px;
               padding: 9px 10px; text-align: center; letter-spacing: .04em; }

.ia-cihaz    { list-style: none; margin: 0 0 14px; padding: 0; }
.ia-cihaz li { border-top: 1px solid var(--ink-100); padding: 10px 0; font-size: .84rem; }
.ia-cihaz li:first-child { border-top: 0; }
.ia-cihaz li span { display: block; word-break: break-word; }

/* Sunucu ekranı — hazır komut kutuları */
.komut-blok { border: 1px solid var(--ink-100); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.komut-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
             padding: 12px 14px; background: var(--ink-50); }
.komut-ust strong { font-size: .88rem; }
.komut-blok .log-kutu { margin: 0; border: 0; border-top: 1px solid var(--ink-100); border-radius: 0; }
.js-kopyala { white-space: nowrap; flex-shrink: 0; }

/* ==========================================================================
   YÖNETİM GENEL BAKIŞ
   ========================================================================== */

/* Üyelik şeridi */
.uye-serit { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
             gap: 14px; margin: 0 0 26px; }
.uye-kutu { display: flex; align-items: baseline; gap: 10px; background: #fff;
            border: 1px solid var(--ink-100); border-radius: 12px; padding: 15px 18px;
            text-decoration: none; }
.uye-kutu--uyari { border-color: #f2ddc0; background: #fffaf3; }
.uye-sayi { font-size: 1.5rem; font-weight: 700; color: var(--ink-900); line-height: 1; }
.uye-etiket { font-size: .8rem; color: var(--ink-500); }

/* Sıralama numarası */
.sira-no { display: inline-flex; align-items: center; justify-content: center;
           width: 20px; height: 20px; border-radius: 6px; background: var(--ink-50);
           color: var(--ink-500); font-size: .7rem; font-weight: 700; margin-right: 8px; }

/* Son üyelik satırı */
.uye-satir span:first-child { display: flex; flex-direction: column; gap: 2px; }
.uye-satir .muted { font-size: .76rem; }
.uye-rozet { flex-shrink: 0; }

/* 14 günlük mini grafik */
.mini-grafik { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.mg-sutun { flex: 1; display: flex; flex-direction: column; align-items: center;
            justify-content: flex-end; height: 100%; gap: 6px; cursor: default; }
.mg-cubuk { display: block; width: 100%; max-width: 30px; border-radius: 5px 5px 0 0;
            background: linear-gradient(180deg, var(--mavi-300), var(--mavi)); transition: opacity .15s; }
.mg-sutun:hover .mg-cubuk { opacity: .75; }
.mg-gun { font-size: .68rem; color: var(--ink-400); }
.stat-cards--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .stat-cards--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .stat-cards--5 { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================ DOSYA YÖNETİCİSİ */

.dosya-ust { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.dosya-iz { font-size: .95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dosya-iz a { color: var(--mavi); }
.dosya-iz a:hover { text-decoration: underline; }
.dosya-ayrac { color: var(--ink-400); }
.dosya-ozet { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .82rem; }

.dosya-uyari {
  background: #f6f8fb; border: 1px solid #dfe6f0; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 22px; font-size: .88rem; color: var(--ink-700);
}
.dosya-uyari code { background: #fff; }

.dosya-tablo td { vertical-align: middle; }
.dosya-ad { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.dosya-simge { font-size: 1.05rem; line-height: 1; }
.dosya-ust-link { color: var(--ink-500); font-size: .88rem; }
.dosya-ust-link:hover { color: var(--ink-900); }
.dosya-kilit { cursor: default; }

@media (max-width: 700px) {
  .dosya-ozet { align-items: flex-start; }
}

/* ============================================================= VİDEO DOSYALARI */

.video-secim-arac { display: flex; gap: 6px; flex-wrap: wrap; }
.video-tablo td { vertical-align: middle; }
.video-tablo .video-kutu { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.video-kilitli { background: var(--ink-50); }
.video-kilitli td { color: var(--ink-500); }

.video-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 16px; flex-wrap: wrap;
}
.video-alt button[disabled] { opacity: .45; cursor: default; }
.video-alt button[disabled]:hover { background: var(--brand); }