/* Kurulum sihirbazı (v1.12.0) — bağımsız düzen; yalnız resources/views/kurulum/* kullanır. */
:root {
    --kr-zemin: #f4f6fb;
    --kr-kart: #ffffff;
    --kr-metin: #101828;
    --kr-soluk: #5b6477;
    --kr-cizgi: #e4e7ef;
    --kr-ana: #4f46e5;
    --kr-ana-koyu: #4338ca;
    --kr-ana-acik: #eef0ff;
    --kr-basari: #059669;
    --kr-basari-acik: #e7f8f1;
    --kr-uyari: #b45309;
    --kr-uyari-acik: #fff6e5;
    --kr-hata: #dc2626;
    --kr-hata-acik: #fdecec;
    --kr-yaricap: 16px;
}

.kr-govde {
    margin: 0;
    min-height: 100vh;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--kr-metin);
    background:
        radial-gradient(1200px 600px at 110% -10%, rgba(79, 70, 229, .10), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(14, 165, 233, .08), transparent 60%),
        var(--kr-zemin);
}

.kr-sahne {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 100vh;
}

/* Sol adım paneli */
.kr-yan {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px;
    color: #c7cbe0;
    background: linear-gradient(180deg, #151a3a 0%, #1d2350 100%);
}

.kr-marka { display: flex; align-items: center; gap: 12px; }
.kr-marka strong { display: block; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.kr-marka small { color: #8d93b8; font-size: 12px; }
.kr-marka-ikon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(135deg, #6366f1, #0ea5e9);
    box-shadow: 0 8px 24px rgba(99, 102, 241, .35);
}

.kr-adimlar { position: relative; margin: 0; padding: 0; list-style: none; }
.kr-adim { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: 14px; font-weight: 500; }
.kr-adim:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 41px;
    width: 2px;
    height: calc(100% - 32px);
    border-radius: 2px;
    background: rgba(255, 255, 255, .10);
}
.kr-adim-nokta {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, .16);
    color: #8d93b8;
}
.kr-adim--aktif { color: #fff; }
.kr-adim--aktif .kr-adim-nokta { color: #fff; border-color: #818cf8; background: var(--kr-ana); box-shadow: 0 0 0 5px rgba(99, 102, 241, .25); }
.kr-adim--tamam { color: #e2e5f5; }
.kr-adim--tamam .kr-adim-nokta { color: #0b3b2c; border-color: #34d399; background: #34d399; }
.kr-adim--tamam:not(:last-child)::after { background: rgba(52, 211, 153, .5); }

.kr-yan-alt { margin-top: auto; display: grid; gap: 8px; font-size: 12px; color: #8d93b8; }
.kr-yan-alt i { margin-right: 6px; color: #a5b4fc; }

/* İçerik */
.kr-ana { display: flex; flex-direction: column; align-items: center; padding: 48px 32px 24px; }
.kr-kart {
    width: 100%;
    max-width: 760px;
    padding: 40px;
    border: 1px solid var(--kr-cizgi);
    border-radius: 24px;
    background: var(--kr-kart);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 24px 48px -12px rgba(16, 24, 40, .10);
}
.kr-telif { margin: 20px 0 0; font-size: 12px; color: var(--kr-soluk); }

.kr-baslik { margin-bottom: 28px; }
.kr-baslik h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.kr-baslik p { margin: 0; color: var(--kr-soluk); font-size: 15px; line-height: 1.6; }
.kr-baslik--basari { text-align: center; }
.kr-baslik--basari h1 { justify-content: center; }
.kr-basari-ikon {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 50%;
    color: var(--kr-basari);
    font-size: 38px;
    background: var(--kr-basari-acik);
    box-shadow: 0 0 0 10px rgba(5, 150, 105, .06);
}

.kr-rozet, .kr-etiket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--kr-ana-koyu);
    background: var(--kr-ana-acik);
}
.kr-rozet { margin-bottom: 14px; }
.kr-etiket { color: var(--kr-soluk); background: #f1f3f8; }

.kr-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kr-bilgi-kutu { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--kr-cizgi); border-radius: var(--kr-yaricap); background: #fbfcfe; }
.kr-bilgi-kutu strong { display: block; margin-bottom: 4px; font-size: 14px; }
.kr-bilgi-kutu small { display: block; color: var(--kr-soluk); font-size: 13px; line-height: 1.5; }
.kr-bilgi-ikon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--kr-ana); font-size: 19px; background: var(--kr-ana-acik); }

/* Kontrol listesi */
.kr-grup + .kr-grup { margin-top: 24px; }
.kr-grup h2 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kr-soluk); }
.kr-grup h2 span { margin-left: 6px; font-weight: 600; letter-spacing: 0; color: #98a1b3; }
.kr-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kr-cipler li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d5efe4; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--kr-basari-acik); }
.kr-cipler i { color: var(--kr-basari); }
.kr-cipler small { color: var(--kr-soluk); font-size: 12px; }
.kr-cipler + .kr-kontrol { margin-top: 10px; }
.kr-kontrol { margin: 0; padding: 0; list-style: none; border: 1px solid var(--kr-cizgi); border-radius: var(--kr-yaricap); overflow: hidden; }
.kr-kontrol-madde { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; }
.kr-kontrol-madde + .kr-kontrol-madde { border-top: 1px solid var(--kr-cizgi); }
.kr-kontrol-madde strong { font-weight: 600; }
.kr-kontrol-madde small { display: block; margin-top: 2px; color: var(--kr-soluk); font-size: 12.5px; line-height: 1.5; }
.kr-kontrol-ikon { font-size: 18px; }
.kr-kontrol-deger { font-size: 13px; color: var(--kr-soluk); font-variant-numeric: tabular-nums; text-align: right; }
.kr-kontrol-madde--tamam .kr-kontrol-ikon { color: var(--kr-basari); }
.kr-kontrol-madde--uyari { background: var(--kr-uyari-acik); }
.kr-kontrol-madde--uyari .kr-kontrol-ikon { color: #d97706; }
.kr-kontrol-madde--hata { background: var(--kr-hata-acik); }
.kr-kontrol-madde--hata .kr-kontrol-ikon { color: var(--kr-hata); }

/* Form */
.kr-form { display: grid; gap: 18px; }
.kr-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kr-ikili--dar { gap: 12px; }
.kr-alan label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.kr-alan label span { color: var(--kr-hata); }
.kr-alan small { display: block; margin-top: 6px; color: var(--kr-soluk); font-size: 12.5px; }
.kr-alan .form-control, .kr-alan .form-select {
    min-height: 46px;
    border-color: #d6dae5;
    border-radius: 12px;
    font-size: 15px;
}
.kr-alan .form-control:focus, .kr-alan .form-select:focus { border-color: var(--kr-ana); box-shadow: 0 0 0 4px rgba(79, 70, 229, .14); }
.kr-ipucu { margin: 0; color: var(--kr-soluk); font-size: 13px; line-height: 1.55; }
.kr-ipucu i { color: var(--kr-ana); }
.kr-ipucu + .kr-kod, .kr-kod + .kr-ipucu { margin-top: 10px; }

/* Seçenek kartları */
.kr-secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kr-secenek { position: relative; display: flex; gap: 12px; padding: 16px; border: 1.5px solid var(--kr-cizgi); border-radius: var(--kr-yaricap); cursor: pointer; transition: border-color .15s, background .15s; }
.kr-secenek input { position: absolute; opacity: 0; pointer-events: none; }
.kr-secenek strong { display: block; font-size: 14px; }
.kr-secenek small { display: block; margin-top: 3px; color: var(--kr-soluk); font-size: 12.5px; line-height: 1.5; }
.kr-secenek-kutu { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid #c3c8d6; border-radius: 7px; color: transparent; font-size: 14px; }
.kr-secenek:has(input:checked) { border-color: var(--kr-ana); background: var(--kr-ana-acik); }
.kr-secenek:has(input:checked) .kr-secenek-kutu { color: #fff; border-color: var(--kr-ana); background: var(--kr-ana); }
.kr-secenek:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(79, 70, 229, .2); }

/* Özet */
.kr-ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }
.kr-ozet > div { padding: 14px 16px; border: 1px solid var(--kr-cizgi); border-radius: var(--kr-yaricap); background: #fbfcfe; }
.kr-ozet dt { margin-bottom: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--kr-soluk); }
.kr-ozet dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.kr-ozet dd small { display: block; font-weight: 400; color: var(--kr-soluk); }

/* İlerleme */
.kr-cubuk { height: 6px; border-radius: 999px; background: #e6e8f0; overflow: hidden; }
.kr-cubuk span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #0ea5e9); transition: width .3s ease; }
.kr-cubuk--buyuk { height: 10px; }
.kr-kurulum { margin-top: 20px; padding: 20px; border: 1px solid var(--kr-cizgi); border-radius: var(--kr-yaricap); }
.kr-kurulum-ust { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.kr-kurulum-ust span { font-variant-numeric: tabular-nums; color: var(--kr-soluk); }
.kr-kurulum-adim { margin: 10px 0 0; min-height: 1.4em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--kr-soluk); overflow-wrap: anywhere; }
.kr-kurulum .kr-not { margin: 14px 0 0; }

.kr-mobil-ilerleme { display: none; }

/* Bildirim kutuları */
.kr-not { display: flex; gap: 10px; margin-bottom: 20px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.kr-not i { flex: none; font-size: 17px; line-height: 1.3; }
.kr-not ul { margin: 4px 0 0; padding-left: 18px; }
.kr-not--bilgi { color: #1e3a8a; background: #eaf1ff; }
.kr-not--basari { color: #065f46; background: var(--kr-basari-acik); }
.kr-not--hata { color: #991b1b; background: var(--kr-hata-acik); }
.kr-form .kr-not { margin-bottom: 0; }

/* Kod kutusu */
.kr-kod { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px; background: #0f172a; }
.kr-kod code { flex: 1; min-width: 0; color: #e2e8f0; font-size: 13px; overflow-wrap: anywhere; }

/* Düğmeler */
.kr-eylem { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--kr-cizgi); }
.kr-eylem .kr-btn:first-child:not(.kr-btn--birincil) { margin-right: auto; }
.kr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid #d6dae5;
    border-radius: 12px;
    color: var(--kr-metin);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.kr-btn:hover { color: var(--kr-metin); border-color: #b9bfcf; background: #f7f8fb; }
.kr-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(79, 70, 229, .2); }
.kr-btn--birincil { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 8px 20px -6px rgba(79, 70, 229, .55); }
.kr-btn--birincil:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg, #5b5ef0, #4338ca); }
.kr-btn--kucuk { flex: none; min-height: 34px; padding: 0 12px; font-size: 13px; }
.kr-btn[disabled], .kr-btn.is-bekliyor { opacity: .65; pointer-events: none; }

@media (max-width: 991.98px) {
    .kr-sahne { grid-template-columns: minmax(0, 1fr); }
    .kr-yan { display: none; }
    .kr-ana { padding: 16px 16px 24px; }
    .kr-mobil-ilerleme { display: block; width: 100%; max-width: 760px; margin-bottom: 14px; }
    .kr-mobil-ust { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
    .kr-mobil-ust span { color: var(--kr-soluk); }
}

@media (max-width: 640px) {
    .kr-kart { padding: 22px 18px; border-radius: 18px; }
    .kr-baslik h1 { font-size: 22px; }
    .kr-izgara, .kr-ikili, .kr-secenekler, .kr-ozet { grid-template-columns: minmax(0, 1fr); }
    .kr-ikili--dar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kr-kontrol-madde { grid-template-columns: auto minmax(0, 1fr); }
    .kr-kontrol-deger { grid-column: 2; text-align: left; }
    .kr-eylem { flex-direction: column-reverse; }
    .kr-eylem .kr-btn { width: 100%; }
    .kr-eylem .kr-btn:first-child:not(.kr-btn--birincil) { margin-right: 0; }
    .kr-kod { flex-direction: column; align-items: stretch; }
}