/* HETASIST Kurulum Paneli — bağımsız stil (dış bağımlılık yok) */

:root {
    --arka: #f4f6f8;
    --kart: #ffffff;
    --kenar: #dfe4ea;
    --metin: #1f2933;
    --soluk: #6b7785;
    --vurgu: #1f6feb;
    --vurgu-koyu: #1856b8;
    --yesil: #1a7f45;
    --yesil-arka: #e6f4ec;
    --kirmizi: #c0392b;
    --kirmizi-arka: #fdecea;
    --sari: #9a6700;
    --sari-arka: #fff8e1;
    --mavi-arka: #e8f1fd;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--arka);
    color: var(--metin);
}

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Üst çubuk ─────────────────────────────────────────────────────────── */
.ust {
    background: #12263f;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.ust-ic {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 56px;
    flex-wrap: wrap;
}
.marka { color: #fff; font-weight: 700; letter-spacing: .3px; }
.marka span { font-weight: 400; opacity: .65; margin-left: 6px; font-size: 13px; }
.marka:hover { text-decoration: none; }

.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu a {
    color: rgba(255,255,255,.78);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
}
.menu a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.menu a.etkin { background: rgba(255,255,255,.16); color: #fff; }

.kullanici { font-size: 13px; color: rgba(255,255,255,.7); display: flex; gap: 12px; align-items: center; }
.kullanici a { color: rgba(255,255,255,.9); }

/* ── Gövde ─────────────────────────────────────────────────────────────── */
.govde { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 26px 0 12px; }
.aciklama { color: var(--soluk); margin: 0 0 22px; font-size: 14px; }

.kart {
    background: var(--kart);
    border: 1px solid var(--kenar);
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 20px;
}
.kart > h2:first-child { margin-top: 0; }

/* ── Tablo ─────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--kenar); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--soluk); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td.sag, th.sag { text-align: right; }
.tablo-sarmal { overflow-x: auto; }

/* ── Rozetler ──────────────────────────────────────────────────────────── */
.rozet {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.rozet-aktif     { background: var(--yesil-arka); color: var(--yesil); }
.rozet-pasif     { background: #eceff1; color: #607d8b; }
.rozet-kuruluyor { background: var(--mavi-arka); color: var(--vurgu); }
.rozet-hatali    { background: var(--kirmizi-arka); color: var(--kirmizi); }
.rozet-taslak    { background: #f0f0f0; color: #757575; }
.rozet-tamam     { background: var(--yesil-arka); color: var(--yesil); }
.rozet-bekliyor  { background: #f0f0f0; color: #757575; }
.rozet-calisiyor { background: var(--mavi-arka); color: var(--vurgu); }
.rozet-hata      { background: var(--kirmizi-arka); color: var(--kirmizi); }
.rozet-uyari     { background: var(--sari-arka); color: var(--sari); }
.rozet-atlandi   { background: #eceff1; color: #607d8b; }
.rozet-iptal     { background: #eceff1; color: #607d8b; }

/* ── Form ──────────────────────────────────────────────────────────────── */
.alan { margin-bottom: 16px; }
.alan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.alan .ipucu { font-size: 12px; color: var(--soluk); margin-top: 4px; }

input[type=text], input[type=password], input[type=email], textarea, select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--kenar);
    border-radius: 7px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--metin);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--vurgu);
    box-shadow: 0 0 0 3px rgba(31,111,235,.12);
}
textarea { min-height: 70px; resize: vertical; }

.izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
@media (max-width: 720px) { .izgara { grid-template-columns: 1fr; } }

.dugme {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--vurgu);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.dugme:hover { background: var(--vurgu-koyu); text-decoration: none; color: #fff; }
.dugme:disabled { opacity: .5; cursor: not-allowed; }
.dugme-ikincil { background: #fff; color: var(--metin); border-color: var(--kenar); }
.dugme-ikincil:hover { background: #f7f8f9; color: var(--metin); }
.dugme-tehlike { background: var(--kirmizi); }
.dugme-tehlike:hover { background: #a13023; }
.dugme-kucuk { padding: 5px 12px; font-size: 13px; }

/* ── Uyarı kutuları ────────────────────────────────────────────────────── */
.uyari {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid transparent;
}
.uyari-basari { background: var(--yesil-arka); color: var(--yesil); border-color: #b6ddc6; }
.uyari-hata   { background: var(--kirmizi-arka); color: var(--kirmizi); border-color: #f5c6c2; }
.uyari-bilgi  { background: var(--mavi-arka); color: var(--vurgu-koyu); border-color: #bcd6f7; }
.uyari-dikkat { background: var(--sari-arka); color: var(--sari); border-color: #f0dca0; }

/* ── Giriş ekranı ──────────────────────────────────────────────────────── */
.giris-sarmal { max-width: 380px; margin: 9vh auto; }
.giris-sarmal h1 { text-align: center; margin-bottom: 6px; }
.giris-sarmal .aciklama { text-align: center; }

/* ── Adım listesi (kurulum ilerlemesi) ─────────────────────────────────── */
.adimlar { list-style: none; margin: 0; padding: 0; }
.adim {
    border: 1px solid var(--kenar);
    border-radius: 9px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}
.adim-bas {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    cursor: pointer;
}
.adim-no {
    width: 25px; height: 25px;
    border-radius: 50%;
    background: #eceff1;
    color: var(--soluk);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.adim.d-tamam   .adim-no { background: var(--yesil-arka); color: var(--yesil); }
.adim.d-hata    .adim-no { background: var(--kirmizi-arka); color: var(--kirmizi); }
.adim.d-uyari   .adim-no { background: var(--sari-arka); color: var(--sari); }
.adim.d-calisiyor .adim-no { background: var(--mavi-arka); color: var(--vurgu); }
.adim-baslik { flex: 1; font-size: 14px; font-weight: 500; }
.adim-sure { font-size: 12px; color: var(--soluk); }
.adim-cikti {
    display: none;
    margin: 0;
    padding: 12px 15px;
    background: #1b2430;
    color: #d7e0ea;
    font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    border-top: 1px solid var(--kenar);
}
.adim.acik .adim-cikti { display: block; }

/* ── Çeşitli ───────────────────────────────────────────────────────────── */
.kod {
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #eef1f4;
    padding: 1px 6px;
    border-radius: 4px;
}
.blok-kod {
    font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #1b2430;
    color: #d7e0ea;
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre;
}
.soluk { color: var(--soluk); }
.kucuk { font-size: 13px; }
.arac-cubugu { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.arac-cubugu .bosluk { flex: 1; }

.alt {
    text-align: center;
    color: var(--soluk);
    font-size: 12px;
    padding: 20px;
    border-top: 1px solid var(--kenar);
}

dl.ozet { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
dl.ozet dt { color: var(--soluk); }
dl.ozet dd { margin: 0; word-break: break-all; }
@media (max-width: 620px) { dl.ozet { grid-template-columns: 1fr; gap: 2px 0; } dl.ozet dd { margin-bottom: 10px; } }