:root {
    --marka: #0b5ea8;          /* İmicryl ana rengi — kurumsal renginizle değiştirin */
    --marka-koyu: #08467e;
    --vurgu: #f5a623;          /* pedodonti / sıcak vurgu */
    --zemin: #f3f6fa;
    --kart: #ffffff;
    --yazi: #1d2733;
    --soluk: #5d6b7a;
    --cizgi: #dde4ec;
    --yesil: #1a9a5a;
    --kirmizi: #d23b3b;
    --turuncu: #e08a00;
    --radius: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--yazi);
    background: var(--zemin);
}
a { color: var(--marka); }
code { font-family: ui-monospace, Consolas, monospace; }

/* ---------- Üst bant / logolar ---------- */
.ust {
    background: #fff;
    border-bottom: 1px solid var(--cizgi);
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
}
.logolar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 640px;
    margin: 0 auto;
}
.logo { max-height: 56px; max-width: 42%; width: auto; height: auto; object-fit: contain; }
.logo-yedek {
    font-weight: 700; color: var(--marka); font-size: 15px; text-align: center; line-height: 1.2;
}
.logo-ayrac { width: 1px; align-self: stretch; background: var(--cizgi); }

/* ---------- Yerleşim ---------- */
.kap { max-width: 560px; margin: 0 auto; padding: 16px; }
.kap.dar { max-width: 400px; padding-top: 10vh; }
.kap.genis { max-width: 1200px; }

.giris { text-align: center; padding: 12px 0 4px; }
.etkinlik {
    display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 99px;
    background: #e6effa; color: var(--marka-koyu); font-size: 13px; font-weight: 600;
}
.giris h1 { margin: 0; font-size: clamp(24px, 6.4vw, 32px); line-height: 1.2; }
.giris h1 span { color: var(--marka); }

.adimlar {
    list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin: 18px 0; padding: 0;
}
.adimlar li {
    background: #fff; border: 1px solid var(--cizgi); border-radius: 12px;
    padding: 10px 8px; text-align: center; font-size: 13px; line-height: 1.3; color: var(--soluk);
}
.adimlar b {
    display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 6px;
    border-radius: 50%; background: var(--vurgu); color: #fff; font-size: 14px;
}

.kart {
    background: var(--kart); border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 40, 70, .06), 0 8px 24px rgba(16, 40, 70, .06);
    padding: 20px;
    margin-bottom: 16px;
}

/* ---------- Form ---------- */
.form label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
.form label em { font-weight: 400; color: var(--soluk); font-style: normal; }
.form input, .form select, .form textarea, .filtre input, .filtre select, .kod-form input {
    display: block; width: 100%; margin-top: 6px;
    padding: 12px 14px; font: inherit; font-size: 16px; /* iOS yakınlaştırmasını engeller */
    color: var(--yazi); background: #fff;
    border: 1.5px solid var(--cizgi); border-radius: 10px;
    -webkit-appearance: none; appearance: none;
}
.form select {
    background-image: linear-gradient(45deg, transparent 50%, var(--soluk) 50%), linear-gradient(135deg, var(--soluk) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px;
}
.form textarea { resize: vertical; min-height: 84px; }
.form input:focus, .form select:focus, .form textarea:focus, .filtre input:focus, .kod-form input:focus {
    outline: none; border-color: var(--marka); box-shadow: 0 0 0 3px rgba(11, 94, 168, .15);
}
.form .hatali input, .form .hatali select, .form .hatali textarea { border-color: var(--kirmizi); }
.alan-hata { display: block; color: var(--kirmizi); font-weight: 500; margin-top: 4px; font-size: 13px; }
.ipucu { display: block; color: var(--soluk); font-weight: 400; margin-top: 4px; font-size: 13px; }

.satir2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .satir2 { grid-template-columns: 1fr; gap: 0; } }

.form .onay {
    display: flex; gap: 10px; align-items: flex-start;
    font-weight: 400; font-size: 13.5px; color: var(--soluk); margin-bottom: 10px;
}
.form .onay input {
    -webkit-appearance: auto; appearance: auto;
    width: 22px; height: 22px; flex: 0 0 22px; margin: 0; padding: 0; accent-color: var(--marka);
}
.form .onay.hatali span { color: var(--kirmizi); }
.form .onay + .alan-hata { margin: -6px 0 10px 32px; }

.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Butonlar ---------- */
.btn {
    display: block; width: 100%; margin-top: 8px;
    padding: 15px 18px; border: 0; border-radius: 12px;
    background: var(--marka); color: #fff; font: inherit; font-size: 17px; font-weight: 700;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: background .15s;
}
.btn:hover { background: var(--marka-koyu); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-ikincil { background: #e8eef5; color: var(--marka-koyu); }
.btn-ikincil:hover { background: #dbe4ee; }
.btn-yesil { background: var(--yesil); }
.btn-yesil:hover { background: #147a47; }
.btn-buyuk { padding: 20px; font-size: 18px; letter-spacing: .3px; }
.btn-kucuk { display: inline-block; width: auto; margin: 0; padding: 9px 14px; font-size: 14px; border-radius: 9px; }
.btn-link {
    background: none; border: 0; padding: 0; font: inherit; color: var(--marka);
    text-decoration: underline; cursor: pointer;
}
.btn-sil { color: var(--kirmizi); font-size: 13px; }

/* ---------- Uyarılar ---------- */
.uyari { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14.5px; }
.uyari-hata { background: #fdecec; color: #9b2222; }
.uyari-basari { background: #e5f6ed; color: #12663d; }
.uyari-bilgi { background: #fff5e0; color: #7a4d00; }

/* ---------- Sonuç ekranı ---------- */
.sonuc { text-align: center; }
.sonuc h2 { margin: 6px 0 10px; }
.sonuc p { margin: 8px 0; }
.tik {
    width: 64px; height: 64px; margin: 4px auto 8px; border-radius: 50%;
    display: grid; place-items: center; font-size: 34px; color: #fff; background: var(--yesil);
}
.vurgu { background: #f1f6fc; border-radius: 10px; padding: 12px; }
.test-kod { margin: 12px 0; padding: 10px; border: 2px dashed var(--turuncu); border-radius: 10px; color: #7a4d00; }
.test-kod strong { font-size: 22px; letter-spacing: 3px; }
.tekrar { margin: 14px 0 6px; font-size: 14px; color: var(--soluk); }
.sonuc .btn-ikincil { margin-top: 16px; }

/* ---------- KVKK metni ---------- */
.metin h1 { font-size: 22px; line-height: 1.3; margin-top: 0; }
.metin h2 { font-size: 17px; margin-top: 22px; }
.metin p, .metin li { font-size: 14.5px; }
.metin .kucuk { color: var(--soluk); font-size: 13px; }

.alt { text-align: center; color: var(--soluk); font-size: 13px; padding: 8px 16px 28px; }
.alt a { color: inherit; }

/* =================== YÖNETİM PANELİ =================== */
.ust-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ust-panel .logolar { margin: 0; justify-content: flex-start; }
.ust-panel .logo { max-height: 40px; }
.ust-panel .logo-yedek { font-size: 13px; }
.ust-sag { display: flex; gap: 12px; align-items: center; font-size: 14px; white-space: nowrap; }

.istatistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.istatistik > * {
    background: #fff; border-radius: 12px; padding: 14px; text-decoration: none; color: inherit;
    border-left: 4px solid var(--marka);
}
.istatistik b { display: block; font-size: 28px; line-height: 1.1; }
.istatistik span { color: var(--soluk); font-size: 13px; }
.istatistik .yesil { border-color: var(--yesil); }
.istatistik .turuncu { border-color: var(--turuncu); }
.istatistik .kirmizi { border-color: var(--kirmizi); }

.kod-sorgu { max-width: 560px; }
.kod-form label { font-weight: 700; font-size: 14px; color: var(--soluk); text-transform: uppercase; letter-spacing: .5px; }
.kod-satir { display: flex; gap: 10px; margin-top: 6px; }
.kod-form input {
    margin: 0; font-size: 28px; font-weight: 700; letter-spacing: 6px; text-align: center;
    font-family: ui-monospace, Consolas, monospace; padding: 10px;
}
.kod-satir .btn { width: auto; margin: 0; padding: 0 22px; }

.sonuc-kart { margin-top: 16px; border-radius: 12px; padding: 16px; }
.sonuc-gecerli { background: #e5f6ed; border: 2px solid var(--yesil); }
.sonuc-kullanildi { background: #fdecec; border: 2px solid var(--kirmizi); }
.sonuc-yok { background: #fff5e0; border: 2px solid var(--turuncu); }
.sonuc-baslik { font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.sonuc-gecerli .sonuc-baslik { color: var(--yesil); }
.sonuc-kullanildi .sonuc-baslik { color: var(--kirmizi); }
.sonuc-kart p { margin: 0 0 8px; }
.kisi { display: flex; flex-direction: column; margin-bottom: 12px; }
.kisi b { font-size: 20px; }
.kisi span { color: var(--soluk); }

.filtre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtre input { flex: 1 1 220px; margin: 0; padding: 9px 12px; }
.filtre select { width: auto; margin: 0; padding: 9px 12px; }
.liste-bilgi { color: var(--soluk); font-size: 13px; margin: 12px 0 6px; }

.tablo-kap { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--soluk); padding: 8px; border-bottom: 2px solid var(--cizgi); }
.tablo td { padding: 10px 8px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo small { color: var(--soluk); }
.tablo details summary { cursor: pointer; color: var(--marka); font-size: 12px; margin-top: 4px; }
.satir-teslim { background: #f6fbf8; }
.kod { font-size: 15px; font-weight: 700; letter-spacing: 1.5px; background: #f1f4f8; padding: 2px 6px; border-radius: 6px; }
.blok { display: block; margin: 2px 0 4px; }
.bos { text-align: center; color: var(--soluk); padding: 24px; }
.islemler { white-space: nowrap; }
.islemler form { display: inline-block; margin: 0 4px 4px 0; }

.rozet { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; margin: 0 2px 2px 0; }
.rozet-ok { background: #e5f6ed; color: #12663d; }
.rozet-bekle { background: #fff5e0; color: #7a4d00; }
.rozet-hata { background: #fdecec; color: #9b2222; }
.rozet-gri { background: #eef1f4; color: var(--soluk); }

.sayfalama { display: flex; justify-content: center; gap: 16px; margin-top: 14px; font-size: 14px; }

/* Mobil: tablo → kart */
@media (max-width: 760px) {
    .tablo thead { display: none; }
    .tablo, .tablo tbody, .tablo tr, .tablo td { display: block; width: 100%; }
    .tablo tr { border: 1px solid var(--cizgi); border-radius: 12px; margin-bottom: 10px; padding: 6px 4px; }
    .tablo td { border: 0; padding: 6px 10px; }
    .tablo td[data-l]::before {
        content: attr(data-l); display: block; font-size: 11px; text-transform: uppercase; color: var(--soluk); font-weight: 600;
    }
    .islemler { white-space: normal; }
    .ust-panel .logo { max-height: 30px; }
    .ust-sag span { display: none; }
}