/* ==========================================================================
   lister paneli -- tek CSS dosyasi.

   HARICI HICBIR SEY YOK: CDN yok, web font yok, ikon kutuphanesi yok.
   Panel calisirken internet olmayabilir ve olsa bile ucuncu bir tarafa
   her sayfa aciliminda haber vermenin gerekcesi yok.  Ikonlar satir ici
   SVG ya da metin.

   Renk: beyaz zemin, koyu metin, ACCENT olarak dingin bir yesil.  Yesil
   yalnizca vurgu tasiyan yerlerde (birincil dugme, ilerleme, basari);
   her yeri yesile boyamak vurguyu yok eder.  Durum renkleri ayri bir
   eksen: kirmizi hata, amber uyari, gri bekleyen.
   ========================================================================== */

:root {
    /* --- accent: dingin, koyu yesil.  Neon degil --- */
    --yesil-900: #14532d;
    --yesil-700: #1f6b3f;
    --yesil-600: #24794a;
    --yesil-500: #2f9160;
    --yesil-100: #dcf0e4;
    --yesil-50:  #f2f9f5;

    /* --- notr --- */
    --zemin:     #ffffff;
    --zemin-alt: #f7f8f7;   /* kirik beyaz: sayfa arka plani */
    --metin:     #16201a;
    --metin-2:   #5b6660;   /* ikincil metin */
    --sessiz:    #8b948f;
    --cizgi:     #e3e7e4;
    --cizgi-2:   #cfd6d1;

    /* --- durum: accent'ten AYRI eksen --- */
    --hata:      #b42318;
    --hata-zemin:#fef3f2;
    --uyari:     #b54708;
    --uyari-zemin:#fffaeb;
    --bekleyen:  #667085;
    --bekleyen-zemin:#f2f4f7;
    --bilgi:     #175cd3;
    --bilgi-zemin:#eff6ff;

    /* --- bosluk olcegi: 4'un katlari, baska deger kullanilmiyor --- */
    --b1: 4px;
    --b2: 8px;
    --b3: 12px;
    --b4: 16px;
    --b5: 24px;
    --b6: 32px;
    --b7: 48px;

    --yuvarlak:   8px;
    --yuvarlak-s: 6px;
    --golge:     0 1px 2px rgba(16, 32, 24, .05);
    --golge-2:   0 2px 8px rgba(16, 32, 24, .08);

    /* Sistem font yigini: indirilecek bir sey yok, her platformda
       yerel arayuz fontu.  Rakamlar icin ayri yigin -- para sutunlari
       tek genislikte olsun ki alt alta karsilastirilabilsin. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--zemin-alt);
    color: var(--metin);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    /* Rakamlar her zaman esit genislikte: fiyat sutunlari kayarsa
       goz karsilastiramaz. */
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- yerlesim */

nav {
    display: flex;
    align-items: center;
    gap: var(--b1);
    padding: 0 var(--b5);
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
    position: sticky;
    top: 0;
    z-index: 20;
}

nav a {
    padding: var(--b3) var(--b3);
    color: var(--metin-2);
    text-decoration: none;
    font-size: 13.5px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
nav a:hover { color: var(--metin); }
nav a.secili {
    color: var(--yesil-700);
    border-bottom-color: var(--yesil-600);
    font-weight: 600;
}

nav .marka {
    font-weight: 700;
    font-size: 15px;
    color: var(--yesil-700);
    letter-spacing: -.01em;
    padding-right: var(--b4);
}
nav .marka:hover { color: var(--yesil-900); }

nav .sag { margin-left: auto; }

nav .rozet-sayi {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: var(--b1);
    border-radius: 9px;
    background: var(--hata);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

main {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--b5) var(--b5) var(--b7);
}

/* ------------------------------------------------------------------ baslik */

h1 {
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.015em;
    margin: 0 0 var(--b5);
}

h2 {
    font-size: 15px;
    font-weight: 650;
    margin: 0 0 var(--b3);
    letter-spacing: -.005em;
}

h3 {
    font-size: 13px;
    font-weight: 650;
    margin: 0 0 var(--b2);
    color: var(--metin-2);
}

p { margin: 0 0 var(--b3); }
p:last-child { margin-bottom: 0; }

a { color: var(--yesil-700); }
a:hover { color: var(--yesil-900); }

.sessiz { color: var(--sessiz); font-size: 13px; }
.ikincil { color: var(--metin-2); }
.eksi { color: var(--hata); }
.arti { color: var(--yesil-700); }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    background: var(--zemin-alt);
    border: 1px solid var(--cizgi);
    border-radius: 4px;
    padding: 1px 5px;
}

/* -------------------------------------------------------------------- kart */
/* Her mantiksal blok kendi kartinda: ince kenarlik, tutarli ic bosluk,
   hafif golge.  Kartsiz duz yigin her seyi ayni duzleme koyup neyin
   neyle ilgili oldugunu belirsiz birakiyordu. */

.kart {
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
    padding: var(--b4);
    margin-bottom: var(--b4);
}

.kart > h2:first-child,
.kart > h3:first-child { margin-top: 0; }

.kart-basi {
    display: flex;
    align-items: center;
    gap: var(--b3);
    margin: calc(var(--b4) * -1) calc(var(--b4) * -1) var(--b4);
    padding: var(--b3) var(--b4);
    border-bottom: 1px solid var(--cizgi);
    background: var(--zemin-alt);
    border-radius: var(--yuvarlak) var(--yuvarlak) 0 0;
}
.kart-basi h2, .kart-basi h3 { margin: 0; }
.kart-basi .sag { margin-left: auto; }

.kart.vurgu  { border-color: var(--yesil-500); box-shadow: 0 0 0 3px var(--yesil-50); }
.kart.hatali { border-color: #f0b4ae; box-shadow: 0 0 0 3px var(--hata-zemin); }
.kart.uyarili{ border-color: #f0c98a; box-shadow: 0 0 0 3px var(--uyari-zemin); }

/* Yan yana kart izgarasi */
.izgara {
    display: grid;
    gap: var(--b4);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-bottom: var(--b4);
}
.izgara .kart { margin-bottom: 0; }

/* Sayac karti */
.sayac .sayi {
    font-size: 30px;
    font-weight: 660;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.sayac .etiket { color: var(--metin-2); font-size: 13px; }
.sayac .etiket a { color: inherit; text-decoration: none; }
.sayac .etiket a:hover { color: var(--yesil-700); text-decoration: underline; }
.sayac.iyi .sayi   { color: var(--yesil-700); }
.sayac.uyari .sayi { color: var(--uyari); }
.sayac.hata .sayi  { color: var(--hata); }

/* ------------------------------------------------------------------- rozet */

.rozet {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: .01em;
    white-space: nowrap;
    background: var(--bekleyen-zemin);
    color: var(--bekleyen);
    border: 1px solid transparent;
}

/* Basari/ilerleme: accent yesil */
.rozet.done, .rozet.listed, .rozet.ok, .rozet.tam, .rozet.resume, .rozet.active {
    background: var(--yesil-100); color: var(--yesil-900);
}
/* Sureci suren, notr-bilgi */
.rozet.running, .rozet.drafted, .rozet.priced, .rozet.reprice {
    background: var(--bilgi-zemin); color: var(--bilgi);
}
/* Uyari */
.rozet.paused, .rozet.inactive, .rozet.uyari, .rozet.resumable,
.rozet.pause, .rozet.environmental, .rozet.kargo_bekliyor {
    background: var(--uyari-zemin); color: var(--uyari);
}
/* Hata */
.rozet.rejected, .rozet.error, .rozet.failed, .rozet.stopped,
.rozet.deactivate, .rozet.config, .rozet.hata {
    background: var(--hata-zemin); color: var(--hata);
}
/* Bekleyen */
.rozet.pending, .rozet.bekliyor, .rozet.item {
    background: var(--bekleyen-zemin); color: var(--bekleyen);
}

/* ------------------------------------------------------------ ilerleme */

.cubuk {
    height: 8px;
    background: var(--cizgi);
    border-radius: 999px;
    overflow: hidden;
}

.cubuk .dolu {
    height: 100%;
    width: 0;
    background: var(--yesil-600);
    border-radius: 999px;
    /* Yuzde ziplamasin: iki turlu okuma arasindaki fark yumusak gecsin. */
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* Calisan is: dolu kismin uzerinden akan seritte hareket olsun.  Sadece
   yuzde artisi yetmiyor -- SEO adimi 30 saniye surdugunde cubuk hic
   kimildamiyor ve ekran donmus gibi gorunuyor. */
.cubuk.calisiyor .dolu {
    background-image: linear-gradient(
        100deg,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,0) 80%);
    background-size: 200% 100%;
    animation: akis 1.4s linear infinite;
}
@keyframes akis {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

.cubuk.bitti .dolu  { background: var(--yesil-600); }
.cubuk.hatali .dolu { background: var(--hata); }

/* Nabiz: "su an calisiyor" isareti */
.nabiz {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--yesil-600);
    animation: nabiz 1.3s ease-in-out infinite;
    flex: none;
}
@keyframes nabiz {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}

/* Hareketi azalt tercihi: animasyonlar sussun ama bilgi kaybolmasin. */
@media (prefers-reduced-motion: reduce) {
    .cubuk .dolu { transition: none; }
    .cubuk.calisiyor .dolu { animation: none; }
    .nabiz { animation: none; }
}

/* --------------------------------------------------------- asama gostergesi */
/* cekiliyor -> fiyatlaniyor -> SEO -> draft */

.asamalar {
    display: flex;
    align-items: center;
    gap: var(--b1);
    flex-wrap: wrap;
    margin-top: var(--b3);
}

.asama {
    display: flex;
    align-items: center;
    gap: var(--b2);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--sessiz);
    background: var(--zemin-alt);
    border: 1px solid var(--cizgi);
    white-space: nowrap;
}
.asama.gecildi {
    color: var(--yesil-900);
    background: var(--yesil-50);
    border-color: var(--yesil-100);
}
.asama.aktif {
    color: var(--yesil-900);
    background: var(--yesil-100);
    border-color: var(--yesil-500);
    font-weight: 600;
}
.asama .ok { color: var(--cizgi-2); }

.asamalar .ayirac {
    color: var(--cizgi-2);
    font-size: 12px;
    user-select: none;
}

/* ------------------------------------------------------------------ tablo */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

th {
    text-align: left;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sessiz);
    padding: var(--b2) var(--b3);
    border-bottom: 1px solid var(--cizgi-2);
    white-space: nowrap;
}

td {
    padding: var(--b3);
    border-bottom: 1px solid var(--cizgi);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--yesil-50); }

/* Para ve sayi sutunlari saga yasli, tek genislikli rakam.  Alt alta
   duran tutarlarin basamaklari hizalanmazsa buyuk-kucuk karsilastirmasi
   goz karariyla yapilamiyor. */
td.sayi, th.sayi {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Kart icinde tam genislik tablo */
.kart > table:only-child,
.kart > .kaydir > table { margin: 0; }

.kaydir { overflow-x: auto; }

/* ------------------------------------------------------------------ dugme */

button, .dugme {
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    padding: 7px 14px;
    border-radius: var(--yuvarlak-s);
    border: 1px solid var(--cizgi-2);
    background: var(--zemin);
    color: var(--metin);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
}
button:hover, .dugme:hover { background: var(--zemin-alt); border-color: var(--sessiz); }
button:active { transform: translateY(1px); }
button:disabled, .dugme.pasif {
    opacity: .5; cursor: not-allowed; transform: none;
}
button:disabled:hover { background: var(--zemin); border-color: var(--cizgi-2); }

/* Birincil eylem -- sayfada tek tane olmali */
button.birincil, .dugme.birincil {
    background: var(--yesil-600);
    border-color: var(--yesil-600);
    color: #fff;
}
button.birincil:hover, .dugme.birincil:hover {
    background: var(--yesil-700); border-color: var(--yesil-700);
}

button.tehlike {
    background: var(--zemin);
    border-color: #f0b4ae;
    color: var(--hata);
}
button.tehlike:hover { background: var(--hata-zemin); border-color: var(--hata); }

button.baglanti {
    border: none; background: none; padding: var(--b3) var(--b2);
    color: var(--metin-2); font-size: 13.5px; font-weight: 400;
}
button.baglanti:hover { color: var(--metin); background: none; }

button.kucuk, .dugme.kucuk { padding: 4px 10px; font-size: 12.5px; }

.dugmeler { display: flex; gap: var(--b2); align-items: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------- form */

label { display: block; font-size: 13px; font-weight: 550; margin-bottom: var(--b1); }

input[type=text], input[type=password], input[type=number], select, textarea {
    font: inherit;
    font-size: 13.5px;
    padding: 7px 10px;
    border: 1px solid var(--cizgi-2);
    border-radius: var(--yuvarlak-s);
    background: var(--zemin);
    color: var(--metin);
    width: 100%;
    max-width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--yesil-500);
    box-shadow: 0 0 0 3px var(--yesil-50);
}
textarea { min-height: 130px; font-family: var(--font-mono); font-size: 12.5px; }

input.dar, select.dar { max-width: 190px; }

.satir { display: flex; gap: var(--b2); align-items: center; flex-wrap: wrap; }
.satir input { width: auto; }

/* -------------------------------------------------------------- ayar satiri */

.ayar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: var(--b4);
    align-items: start;
    padding: var(--b3) 0;
    border-bottom: 1px solid var(--cizgi);
}
.ayar:last-child { border-bottom: none; padding-bottom: 0; }
.ayar:first-of-type { padding-top: 0; }

.ayar .ad {
    display: flex;
    align-items: center;
    gap: var(--b2);
    font-weight: 550;
    font-size: 13.5px;
}
.ayar .anahtar {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--sessiz);
    font-weight: 400;
}
.ayar .deger { text-align: right; }
.ayar .deger input, .ayar .deger select { width: 100%; }

@media (max-width: 640px) {
    .ayar { grid-template-columns: 1fr; gap: var(--b2); }
    .ayar .deger { text-align: left; }
}

/* --------------------------------------------------------------- ipucu (i) */
/* Ustune gelince aciklama.  JS yok: :hover ve :focus-within yetiyor,
   ve klavyeyle de acilabilmesi icin dugme odaklanabilir. */

.ipucu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1px solid var(--cizgi-2);
    background: var(--zemin);
    color: var(--sessiz);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    cursor: help;
    flex: none;
    padding: 0;
    line-height: 1;
}
.ipucu:hover { border-color: var(--yesil-500); color: var(--yesil-700); background: var(--yesil-50); }

.ipucu .balon {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    width: 290px;
    max-width: 78vw;
    padding: var(--b3);
    background: #1c2b22;
    color: #eef4f0;
    border-radius: var(--yuvarlak-s);
    box-shadow: var(--golge-2);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 30;
    pointer-events: none;
}
.ipucu .balon::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #1c2b22;
}
.ipucu:hover .balon,
.ipucu:focus .balon,
.ipucu:focus-visible .balon {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Sol/sag kenara tasmasin */
.ipucu.sol .balon  { left: 0; transform: translateX(0) translateY(3px); }
.ipucu.sol:hover .balon, .ipucu.sol:focus .balon { transform: translateX(0) translateY(0); }
.ipucu.sol .balon::after { left: 12px; }

/* ---------------------------------------------------------------- bildirim */

.bildirim {
    padding: var(--b3) var(--b4);
    border-radius: var(--yuvarlak);
    margin-bottom: var(--b4);
    font-size: 13.5px;
    border: 1px solid;
}
.bildirim.ok, .bildirim.basari {
    background: var(--yesil-50); border-color: var(--yesil-100); color: var(--yesil-900);
}
.bildirim.hata {
    background: var(--hata-zemin); border-color: #f0b4ae; color: var(--hata);
}
.bildirim.uyari {
    background: var(--uyari-zemin); border-color: #f0c98a; color: var(--uyari);
}
.bildirim.bilgi, .bildirim.mesaj {
    background: var(--bilgi-zemin); border-color: #b2ccf4; color: var(--bilgi);
}

/* ---------------------------------------------------------------- filtreler */

.filtre { font-size: 13px; color: var(--metin-2); margin: 0 0 var(--b3); }

.filtreler { display: flex; gap: var(--b2); flex-wrap: wrap; margin-bottom: var(--b4); }
.filtreler a {
    padding: 5px 12px;
    border: 1px solid var(--cizgi-2);
    border-radius: 999px;
    text-decoration: none;
    background: var(--zemin);
    color: var(--metin-2);
    font-size: 13px;
}
.filtreler a:hover { border-color: var(--sessiz); color: var(--metin); }
.filtreler a.secili {
    background: var(--yesil-600);
    color: #fff;
    border-color: var(--yesil-600);
    font-weight: 550;
}

/* ------------------------------------------------------------------ detay */

details summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--metin-2);
    padding: var(--b2) 0;
    user-select: none;
}
details summary:hover { color: var(--metin); }
details[open] summary { margin-bottom: var(--b2); }

/* ------------------------------------------------------------------ giris */

.giris {
    max-width: 340px;
    margin: 14vh auto 0;
}
.giris .marka {
    font-size: 19px;
    font-weight: 700;
    color: var(--yesil-700);
    text-align: center;
    display: block;
    margin-bottom: var(--b5);
    letter-spacing: -.015em;
}

/* ------------------------------------------------------------------- cesitli */

.bos {
    text-align: center;
    padding: var(--b6) var(--b4);
    color: var(--sessiz);
    font-size: 13.5px;
}

hr { border: none; border-top: 1px solid var(--cizgi); margin: var(--b4) 0; }

.olcu { display: flex; gap: var(--b5); flex-wrap: wrap; }
.olcu > div { min-width: 90px; }
.olcu .etiket { font-size: 11.5px; color: var(--sessiz); text-transform: uppercase; letter-spacing: .04em; }
.olcu .deger  { font-size: 17px; font-weight: 600; }