/* TeknoPozitif Santral paneli. Görünüm TeknoPozitif ürün ailesiyle ortak: lacivert menü, Sora başlık, Figtree metin. */
@font-face { font-family: Figtree; font-style: normal; font-weight: 300 900; font-display: swap; src: url(yazi/figtree-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 300 900; font-display: swap; src: url(yazi/figtree-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Sora; font-style: normal; font-weight: 100 800; font-display: swap; src: url(yazi/sora-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Sora; font-style: normal; font-weight: 100 800; font-display: swap; src: url(yazi/sora-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --zemin: #F3F5F8; --kart: #FFFFFF; --yuzey2: #F5F7FA; --yazi: #13202E; --soluk: #536273;
  --cizgi: #DCE2E9; --cizgi2: #C9D2DC; --alan: #8592A3; --ana: #1667B0; --ana-yazi: #FFFFFF; --ana-soluk: #E4EFF9;
  --menu: #0F2A44; --menu-yazi: #C9D6E4; --menu-secili: #FFFFFF; --menu-secili-yazi: #0F2A44; --menu-cizgi: #17385A; --menu-soluk: #9DB0C4;
  --yesil: #17663F; --yesil-z: #E2F3EA; --sari: #7A4A00; --sari-z: #FFF4E0;
  --kirmizi: #A8322B; --kirmizi-z: #FCEBE8; --mavi: #0F4E87; --mavi-z: #E4EFF9;
  --golge: 0 1px 2px rgba(15, 42, 68, .05);
  --r: 16px; --r2: 12px; --r3: 10px;
  --govde-yazi: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --baslik-yazi: Sora, Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0B1A2B; --kart: #12263B; --yuzey2: #0F2135; --yazi: #F1F5F9; --soluk: #B7C4D2;
    --cizgi: #24405C; --cizgi2: #3A5878; --alan: #7F93A8; --ana: #7FBDF2; --ana-yazi: #0B1A2B; --ana-soluk: #17385A;
    --menu: #071320; --menu-secili: #E4EFF9; --menu-cizgi: #12263B;
    --yesil: #A7E3C3; --yesil-z: #12402B; --sari: #F8D48A; --sari-z: #523400;
    --kirmizi: #F5B5AF; --kirmizi-z: #5E1B16; --mavi: #BBDCF7; --mavi-z: #17385A;
    --golge: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/22px var(--govde-yazi); background: var(--zemin); color: var(--yazi); }
a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
h1 { font-family: var(--baslik-yazi); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 16px; }
h2 { font-family: var(--baslik-yazi); font-size: 18px; line-height: 26px; font-weight: 600; margin: 0 0 12px; }
p { margin: 0 0 12px; }
.soluk { color: var(--soluk); }
.kucuk { font-size: 13px; line-height: 20px; }
.rakam { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- kabuk ---- */
.duzen { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.yan { background: var(--menu); color: var(--menu-yazi); padding: 16px 14px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.yan .logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: #fff; font-family: var(--baslik-yazi); font-weight: 600; font-size: 17px; }
.yan .logo i { width: 32px; height: 32px; border-radius: 9px; background: #1667B0; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; color: #fff; flex: none; }
.yan .logo small { display: block; font-family: var(--govde-yazi); font-size: 10px; font-weight: 600; letter-spacing: .18em; color: var(--menu-soluk); line-height: 12px; }
.yan .logo:hover { text-decoration: none; }
.yan .baglam-kutu { display: block; border: 1px solid #2A4A6B; background: var(--menu-cizgi); border-radius: var(--r2); padding: 10px 12px; margin: 0 0 14px; color: #fff; }
.yan .baglam-kutu:hover { text-decoration: none; border-color: #4A6F95; }
.yan .baglam-kutu strong { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yan .baglam-kutu span { display: block; font-size: 12px; color: var(--menu-soluk); }
.yan .grup { padding: 18px 12px 6px; color: var(--menu-soluk); font-size: 12px; font-weight: 500; }
.yan a.oge { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: var(--r3); color: var(--menu-yazi); font-size: 14px; font-weight: 500; }
.yan a.oge:hover { background: var(--menu-cizgi); color: #fff; text-decoration: none; }
.yan a.oge.secili { background: var(--menu-secili); color: var(--menu-secili-yazi); font-weight: 600; }
.yan svg, .ust svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.yan .alt { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.yan .gecis { display: block; border: 1px dashed #4A6F95; border-radius: var(--r2); padding: 10px 12px; color: #fff; font-size: 13px; font-weight: 600; }
.yan .gecis:hover { background: var(--menu-cizgi); text-decoration: none; }
.yan .kim { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px; font-size: 12px; color: var(--menu-soluk); }
.yan .kim i { width: 34px; height: 34px; border-radius: 50%; background: #1667B0; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; }
.yan .kim strong { display: block; color: #fff; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yan .kim a.sifre { color: var(--menu-soluk); }
.yan .kim a.cikis { border: 1px solid #4A6F95; border-radius: var(--r3); padding: 6px 10px; color: #fff; font-weight: 600; }
.yan .kim a.cikis:hover { background: var(--menu-cizgi); text-decoration: none; }
.icerik { min-width: 0; display: flex; flex-direction: column; }
.ust { background: var(--kart); border-bottom: 1px solid var(--cizgi); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 60px; padding: 8px 32px; }
.ust .firma { font-weight: 600; font-size: 15px; min-width: 0; }
.ust .geri { font-size: 13px; font-weight: 400; margin-left: 8px; }
.ust .durum { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.menu-ac { display: none; border: 1px solid var(--cizgi); background: var(--kart); color: inherit; border-radius: var(--r3); width: 40px; height: 40px; place-items: center; cursor: pointer; }
.govde { padding: 24px 32px 96px; min-width: 0; }
.govde > .ic { max-width: 1240px; display: flex; flex-direction: column; gap: 24px; }
.govde > .ic > * { margin-top: 0; margin-bottom: 0; }
.musteri-serit { background: var(--sari-z); color: var(--sari); padding: 10px 16px; border-radius: var(--r); font-size: 14px; }

/* ---- başlık ---- */
.baslik-satir { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.baslik-satir h1, .baslik-satir h2 { margin: 0; }
.baslik-satir .alt { color: var(--soluk); font-size: 14px; line-height: 20px; margin-top: 4px; max-width: 70ch; }
.iz { font-size: 13px; color: var(--soluk); margin-bottom: 4px; }
.satir { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; }

/* ---- düğme ---- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r3); border: 1px solid var(--ana); background: var(--ana); color: var(--ana-yazi); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dugme:hover { filter: brightness(1.08); text-decoration: none; }
.dugme.ikincil { background: var(--kart); color: var(--yazi); border-color: var(--cizgi2); font-weight: 600; }
.dugme.ikincil:hover { background: var(--yuzey2); filter: none; }
.dugme.kucuk { min-height: 32px; padding: 0 10px; font-size: 13px; }
.dugme.tehlike { background: var(--kart); color: var(--kirmizi); border-color: var(--cizgi); font-weight: 500; }
.dugme[disabled] { opacity: .5; cursor: default; }

/* ---- kart ve tablo ---- */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge); padding: 20px 24px; min-width: 0; }
.kart.duz { padding: 0; overflow: hidden; }
.kart-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--cizgi); }
.kart-bas h2 { margin: 0; }
.kart-ic { padding: 16px 24px; }
.tablo-kap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
th { text-align: left; font-weight: 600; font-size: 13px; color: var(--soluk); background: var(--yuzey2); padding: 10px 16px; white-space: nowrap; }
td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--cizgi); vertical-align: middle; }
td.sayi, th.sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.eylem { text-align: right; white-space: nowrap; }
td.eylem form { display: inline; }
td .altsatir { display: block; font-size: 13px; color: var(--soluk); }
tr.vurgu td { background: var(--ana-soluk); }
.toplam td { font-weight: 600; }
.bos { padding: 32px 24px; text-align: center; color: var(--soluk); font-size: 14px; }
.arac { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
.arac input[type=search] { flex: 1 1 200px; min-width: 0; }
.arac select { width: auto; }
.sayfalama { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--cizgi); font-size: 13px; color: var(--soluk); }
.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); overflow-x: auto; }
.sekmeler a { padding: 10px 14px; font-size: 14px; color: var(--soluk); border-bottom: 2px solid transparent; white-space: nowrap; }
.sekmeler a:hover { text-decoration: none; color: var(--yazi); }
.sekmeler a.secili { color: var(--ana); border-bottom-color: var(--ana); font-weight: 600; }

/* ---- durum etiketleri ve bildirimler ---- */
.rozet { display: inline-block; font-size: 12px; line-height: 18px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--yuzey2); color: var(--soluk); }
.rozet.yesil { background: var(--yesil-z); color: var(--yesil); }
.rozet.kirmizi { background: var(--kirmizi-z); color: var(--kirmizi); }
.rozet.sari { background: var(--sari-z); color: var(--sari); }
.rozet.mavi { background: var(--mavi-z); color: var(--mavi); }
.mesaj, .hata, .uyari, .bilgi-kutu { padding: 12px 16px; border-radius: var(--r2); font-size: 14px; line-height: 20px; }
.mesaj { background: var(--yesil-z); color: var(--yesil); }
.hata { background: var(--kirmizi-z); color: var(--kirmizi); }
.uyari { background: var(--sari-z); color: var(--sari); }
.bilgi-kutu { background: var(--mavi-z); color: var(--mavi); }
.uyari a, .hata a, .bilgi-kutu a, .mesaj a { color: inherit; font-weight: 600; text-decoration: underline; }
.sorunlar { display: flex; flex-direction: column; gap: 8px; }
.sorunlar > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; }

/* ---- genel bakış ---- */
.kurulum { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 14px; padding: 12px 24px; }
.kurulum .k-adim { display: inline-flex; gap: 6px; align-items: center; color: var(--yazi); }
.kurulum .k-adim::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--alan); }
.kurulum .k-adim.tamam { color: var(--soluk); }
.kurulum .k-adim.tamam::before { background: var(--yesil); border-color: var(--yesil); }
.ozet-serit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kart); box-shadow: var(--golge); overflow: hidden; }
.ozet-serit a { padding: 16px 24px; border-right: 1px solid var(--cizgi); color: inherit; min-width: 0; }
.ozet-serit a:last-child { border-right: 0; }
.ozet-serit a:hover { background: var(--yuzey2); text-decoration: none; }
.ozet-serit b { display: block; font-family: var(--baslik-yazi); font-size: 28px; line-height: 38px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ozet-serit span { font-size: 13px; color: var(--soluk); }
.iki-sutun { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.iki-sutun > * { min-width: 0; }
.degisiklik { display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 20px; }
.kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px 20px; box-shadow: var(--golge); }
.kutu .etiket { color: var(--soluk); font-size: 13px; }
.kutu .deger { font-family: var(--baslik-yazi); font-size: 28px; line-height: 38px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kutu .deger a { color: inherit; }
.deger.yesil { color: var(--yesil); } .deger.kirmizi { color: var(--kirmizi); } .deger.mavi { color: var(--ana); }

/* ---- form ---- */
form .izgara, .izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=search], input[type=file], select, textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--alan); border-radius: var(--r3); font: inherit; background: var(--kart); color: inherit; }
.arac input, .arac select { min-height: 40px; font-size: 14px; }
textarea { min-height: 80px; }
.ipucu { font-size: 13px; line-height: 20px; color: var(--soluk); margin-top: 4px; }
.form-dikey { display: flex; flex-direction: column; gap: 16px; }
.form-dikey > * { margin: 0; }
.uye-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.uye { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; border: 1px solid var(--alan); border-radius: var(--r3); background: var(--kart); font-weight: 400; font-size: 14px; margin: 0; cursor: pointer; }
.uye input { width: 18px; height: 18px; margin: 0; }
.uye:has(input:checked) { background: var(--ana-soluk); border-color: var(--ana); }
.secim { display: flex; flex-direction: column; gap: 8px; }
.secim label { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 15px; margin: 0; cursor: pointer; }
.anons-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border: 1px solid var(--cizgi); border-radius: var(--r3); padding: 8px 12px; background: var(--yuzey2); font-size: 14px; }
.anons-satir audio, td audio, .dinle audio { height: 36px; max-width: 100%; }
.dinle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.hedef-ayrinti { border-left: 3px solid var(--cizgi); padding-left: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.hedef-ayrinti > * { margin: 0; }
.dar-sayfa { max-width: 860px; display: flex; flex-direction: column; gap: 24px; }
.cubuk { position: fixed; left: 256px; right: 0; bottom: 0; background: var(--kart); border-top: 1px solid var(--cizgi); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; padding: 12px 32px; z-index: 20; }
.cubuk .durum-yazi { margin-right: auto; font-size: 14px; }
.tus-satir { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.tus-no { width: 44px; height: 44px; border-radius: var(--r3); background: var(--ana-soluk); color: var(--mavi); font-size: 18px; font-weight: 600; display: grid; place-items: center; }
.tus-ekle summary { cursor: pointer; color: var(--ana); font-weight: 600; padding: 4px 0; }
.tus-ekle .tus-satir { margin-top: 10px; }
dl.bilgi { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; margin: 0; }
dl.bilgi dt { color: var(--soluk); }
dl.bilgi dd { margin: 0; }
.uclu { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; align-items: start; }
.uclu form { margin: 0; }

/* ---- yan form (çekmece) ---- */
.perde { position: fixed; inset: 0; background: rgba(2, 6, 23, .5); z-index: 40; }
.cekmece { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100%; background: var(--kart); z-index: 41; display: flex; flex-direction: column; border-left: 1px solid var(--cizgi); }
.cekmece > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--cizgi); }
.cekmece > header h2 { margin: 0; }
.cekmece .c-govde { padding: 24px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.cekmece .c-govde > * { margin: 0; }
.cekmece .c-alt { padding: 12px 24px; border-top: 1px solid var(--cizgi); display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.kapat { font-size: 24px; line-height: 1; width: 36px; height: 36px; border-radius: var(--r3); display: grid; place-items: center; color: var(--yazi); border: 0; background: none; cursor: pointer; }
.kapat:hover { background: var(--yuzey2); text-decoration: none; }

/* ---- "Şimdi arasam ne olur?" ---- */
ol.yol { list-style: none; margin: 0; padding: 0; counter-reset: a; }
ol.yol li { counter-increment: a; position: relative; padding: 0 0 18px 40px; font-size: 15px; }
ol.yol li::before { content: counter(a); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ana-soluk); color: var(--mavi); font-size: 13px; font-weight: 600; display: grid; place-items: center; }
ol.yol li::after { content: ""; position: absolute; left: 12px; top: 30px; bottom: 2px; width: 2px; background: var(--cizgi); }
ol.yol li:last-child::after { display: none; }
ol.yol li.son::before { background: var(--yesil-z); color: var(--yesil); }
ol.yol .ayr { display: block; font-size: 13px; color: var(--soluk); }
ol.yol .secenekler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---- canlı durum ---- */
.canli-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.canli-kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r3); padding: 10px 12px; min-height: 84px; font-size: 14px; }
.canli-kutu .ust-satir { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.canli-kutu .no { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.canli-kutu .durum { font-size: 12px; line-height: 18px; font-weight: 500; padding: 2px 8px; border-radius: var(--r3); background: var(--yuzey2); color: var(--soluk); }
.canli-kutu.bos .durum { background: var(--yesil-z); color: var(--yesil); }
.canli-kutu.gorusme .durum { background: var(--mavi-z); color: var(--mavi); }
.canli-kutu.caliyor .durum { background: var(--sari-z); color: var(--sari); }
.canli-kutu .detay { color: var(--soluk); font-size: 13px; }
.aciklama-satir { display: none; }
.nokta { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--alan); margin-right: 8px; }
.nokta.yesil { background: var(--yesil); }
.dahili-satir { display: flex; align-items: center; gap: 4px; padding: 9px 0; border-top: 1px solid var(--cizgi); font-size: 14px; }
.dahili-satir .no { font-weight: 600; width: 44px; } .dahili-satir .ad { flex-grow: 1; } .dahili-satir .durum { color: var(--soluk); font-size: 13px; }
.yon-gelen { color: var(--yesil); font-weight: 500; } .yon-giden { color: var(--ana); font-weight: 500; } .yon-cevapsiz { color: var(--kirmizi); font-weight: 500; } .yon-dahili { color: var(--soluk); font-weight: 500; }

/* ---- giriş ve sihirbaz ---- */
.giris-duzen { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.giris-tanitim { background: var(--menu); color: #C9D6E4; padding: 48px clamp(24px, 6vw, 80px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.giris-tanitim .logo { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--baslik-yazi); font-weight: 600; font-size: 20px; }
.giris-tanitim .logo:hover { text-decoration: none; }
.giris-tanitim .logo i { width: 40px; height: 40px; border-radius: 11px; background: #1667B0; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 15px; color: #fff; }
.giris-tanitim .logo small { display: block; font-family: var(--govde-yazi); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: #9DB0C4; line-height: 14px; }
.giris-tanitim h1 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; margin: 0 0 16px; max-width: 14ch; }
.giris-tanitim p { font-size: 17px; line-height: 28px; max-width: 40ch; margin: 0; }
.giris-tanitim a.geri { color: #fff; font-weight: 600; }
.giris-form { display: grid; place-items: center; padding: 40px 24px; }
.giris-form .ic { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.giris-form .ic > * { margin: 0; }
.giris-form form { display: flex; flex-direction: column; gap: 16px; }
.giris-form form > * { margin: 0; }
.giris-form .dugme { width: 100%; }
.sifre-alan { position: relative; display: block; }
.sifre-alan input { padding-right: 84px; }
.sifre-alan button { position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--yuzey2); color: var(--ana); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (max-width: 820px) { .giris-duzen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .giris-tanitim { padding: 28px 24px; gap: 20px; } .giris-tanitim p, .giris-tanitim a.geri { display: none; } .giris-tanitim h1 { font-size: 24px; margin: 0; max-width: none; } }
.adimlar { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.adimlar li { background: var(--yuzey2); color: var(--soluk); border-radius: var(--r3); padding: 5px 12px; font-size: 13.5px; }
.adimlar li a { color: inherit; }
.adimlar li.bitti { background: var(--yesil-z); color: var(--yesil); }
.adimlar li.simdi { background: var(--ana); color: var(--ana-yazi); font-weight: 600; }
.adimlar li.yakinda { background: transparent; border: 1px dashed var(--alan); }
.adimlar li.yakinda span { font-size: 11.5px; }

@media (max-width: 899px) {
  .duzen { grid-template-columns: minmax(0, 1fr); }
  .yan { position: fixed; inset: 0 auto 0 0; height: auto; width: 264px; max-width: 86%; z-index: 50; transform: translateX(-100%); overflow: auto; }
  .yan.acik { transform: none; box-shadow: 0 0 0 100vmax rgba(2, 6, 23, .5); }
  .menu-ac { display: grid; }
  .ust, .govde { padding-left: 16px; padding-right: 16px; }
  .iki-sutun { grid-template-columns: minmax(0, 1fr); }
  .ozet-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ozet-serit a:nth-child(2) { border-right: 0; }
  .ozet-serit a:nth-child(-n+2) { border-bottom: 1px solid var(--cizgi); }
  .cubuk { left: 0; padding-left: 16px; padding-right: 16px; }
  .kart { padding: 16px; } .kart.duz { padding: 0; } .kart-bas, .kart-ic { padding: 16px; }
  .gizle-dar { display: none; }
  dl.bilgi { grid-template-columns: 1fr; } dl.bilgi dt { margin-top: 6px; }
}
@media (prefers-reduced-motion: no-preference) { .yan { transition: transform .18s ease; } }

/* Yönetim (hizmet sağlayıcı) ekranları */
.kart.sistem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 10px 24px; font-size: 14px; }
.sistem .son { margin-left: auto; }
.nokta.kirmizi { background: var(--kirmizi); }
.ozet-serit.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iki-sutun.esit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hata-yazi { color: var(--kirmizi) !important; max-width: 60ch; }
.ust .yol-kok { color: var(--soluk); font-weight: 400; }
.ust .yol-ayrac { color: var(--alan); margin: 0 8px; font-weight: 400; }
.ust .baglam { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; }
.ust .baglam select { width: auto; min-height: 32px; height: 32px; padding: 0 28px 0 10px; font-size: 13px; }
.arac select[data-git] { margin-left: auto; }
.cekmece h3 { margin: 0 0 8px; font-size: 14px; }
@media (max-width: 900px) { .ozet-serit.uc, .iki-sutun.esit { grid-template-columns: 1fr; } .sistem .son { margin-left: 0; } }
#canli { display: flex; flex-direction: column; gap: 24px; }
.gosterge-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.gosterge { padding: 16px 24px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); min-width: 0; }
.gosterge .etiket { display: block; font-size: 13px; color: var(--soluk); }
.gosterge b { font-size: 22px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 8px; }
.gosterge .altsatir { display: block; font-size: 13px; color: var(--soluk); margin-top: 2px; }
.servis-satir { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 14px 24px; font-size: 14px; }
.kirmizi-yazi { color: var(--kirmizi); }

/* ---- yönetim özeti: sayı kutuları, tablo ve sağ sütun ---- */
.sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sayi-kutu { display: flex; flex-direction: column; gap: 2px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge); padding: 18px 20px; color: inherit; min-width: 0; }
.sayi-kutu:hover { border-color: var(--ana); text-decoration: none; }
.sayi-kutu .etiket { font-size: 13px; color: var(--soluk); }
.sayi-kutu b { font-family: var(--baslik-yazi); font-size: 30px; line-height: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sayi-kutu .alt { font-size: 12px; color: var(--soluk); }
.sayi-kutu.kirmizi b { color: var(--kirmizi); }
.ozet-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.ozet-ana, .ozet-yan { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ozet-yan .kart { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ozet-yan .kart > * { margin: 0; }
.ozet-yan .baslik-satir { align-items: center; }
.alarmlar { display: flex; flex-direction: column; gap: 8px; }
.alarm { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: var(--r2); font-size: 14px; line-height: 20px; }
.alarm:hover { text-decoration: none; filter: brightness(.98); }
.alarm.kirmizi { background: var(--kirmizi-z); color: var(--kirmizi); }
.alarm.sari { background: var(--sari-z); color: var(--sari); }
.alarm i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; color: var(--kart); }
.alarm.kirmizi i { background: var(--kirmizi); } .alarm.sari i { background: var(--sari); }
.alarm strong { display: block; font-weight: 600; color: var(--yazi); }
.alarm .kimde { display: block; font-size: 13px; }
.yan-ozet { font-weight: 600; font-size: 14px; }
.yesil-yazi { color: var(--yesil); }
dl.olcum { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; font-size: 14px; }
dl.olcum dt { color: var(--soluk); font-size: 13px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
dl.olcum dt:first-child { border-top: 0; padding-top: 0; }
dl.olcum dd { margin: 2px 0 10px; }
dl.olcum dd .altsatir { display: block; font-size: 13px; color: var(--soluk); margin-top: 2px; }
.servisler { gap: 6px; }
a.rozet:hover { text-decoration: none; filter: brightness(.97); }
@media (max-width: 1180px) { .ozet-duzen { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) { .sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hazır anons metinleri */
.sablon { padding: 16px 24px; border-top: 1px solid var(--cizgi); }
.sablon-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.sablon textarea { min-height: 72px; line-height: 22px; resize: vertical; }