/* ===================================================================
   SMS Haberal — Public (kayit / iptal / anasayfa)
   Mobil oncelikli, tek tema, marka: mor + cyan
   =================================================================== */
:root {
    --marka-1:      #7c3aed;   /* mor */
    --marka-2:      #4c1d95;   /* koyu mor */
    --marka-3:      #06b6d4;   /* cyan vurgu */
    --birincil:     #7c3aed;
    --birincil-koyu:#6d28d9;
    --basari:       #059669;
    --tehlike:      #dc2626;
    --metin:        #111827;
    --metin-2:      #6b7280;
    --metin-3:      #9ca3af;
    --cizgi:        #e5e7eb;
    --zemin-2:      #f9fafb;
    --beyaz:        #ffffff;
    --golge:        0 20px 50px -12px rgba(30, 12, 60, .35);
    --golge-sm:     0 2px 8px rgba(17, 24, 39, .08);
    --r:            18px;
    --r-sm:         12px;
}

* { box-sizing: border-box; }
/* hidden attribute'u HER ZAMAN gizler (display:flex/grid kurallarina karsi guvence) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--metin);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 12px;
    -webkit-font-smoothing: antialiased;
}

.marka-zemin {
    position: relative;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(124,58,237,.55), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(6,182,212,.30), transparent 55%),
        linear-gradient(160deg, #2e1065 0%, #4c1d95 45%, #5b21b6 100%);
    background-attachment: fixed;
}

/* ---------- Kart ---------- */
.kart {
    background: var(--beyaz);
    width: 100%;
    max-width: 430px;
    border-radius: var(--r);
    padding: 26px 22px 24px;
    box-shadow: var(--golge);
    margin: auto 0;
    animation: yukari .35s ease both;
    position: relative;
}

/* Sol ust kose: SMSHABERAL ajans logosu */
.ajans-logo {
    position: absolute;
    top: 10px; left: 10px;
    width: 86px; height: auto;
    border-radius: 10px;
    box-shadow: var(--golge-sm);
}
@keyframes yukari { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Marka logosu (uste tasan) ---------- */
.logo-cerceve {
    width: 92px; height: 92px;
    margin: -70px auto 14px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(30, 12, 60, .28);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 4px solid #fff;
}
.logo-cerceve img { width: 100%; height: 100%; object-fit: cover; }

.rozet-satiri {
    display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.mini-rozet {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f3effe; color: #6d28d9;
    font-size: 12px; font-weight: 700;
    padding: 5px 10px; border-radius: 999px;
}
.mini-rozet svg { width: 13px; height: 13px; }

.baslik { font-size: 23px; font-weight: 800; margin: 0 0 6px; text-align: center; letter-spacing: -.01em; }
.aciklama { color: var(--metin-2); text-align: center; margin: 0 0 22px; font-size: 15px; }

/* ---------- Form ---------- */
.alan { margin-bottom: 16px; }
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; color: #374151; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

input[type="text"], input[type="tel"], input[type="password"], input[type="email"] {
    width: 100%;
    height: 52px;
    padding: 0 15px;
    font-size: 16px;
    border: 1.5px solid var(--cizgi);
    border-radius: var(--r-sm);
    color: var(--metin);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--metin-3); }
input:focus { outline: none; border-color: var(--birincil); box-shadow: 0 0 0 4px rgba(124,58,237,.14); }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--marka-3); outline-offset: 2px; }

.yardim { font-size: 13px; color: var(--metin-2); margin: 7px 0 0; }
.ortala { text-align: center; }

/* ---------- Onay kutusu ---------- */
.onay-kutusu {
    background: var(--zemin-2);
    border: 1.5px solid var(--cizgi);
    border-radius: var(--r-sm);
    padding: 14px;
    margin-bottom: 14px;
    transition: border-color .15s, background .15s;
}
.onay-kutusu:focus-within { border-color: var(--birincil); }
.onay-satiri { display: flex; gap: 11px; align-items: flex-start; font-weight: 500; font-size: 14px; cursor: pointer; color: #374151; margin: 0; }
.onay-satiri input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--birincil); margin-top: 1px; cursor: pointer; }

.kvkk { margin-bottom: 18px; font-size: 13px; }
.kvkk summary { color: var(--birincil); font-weight: 600; cursor: pointer; padding: 6px 0; list-style-position: inside; }
.kvkk-metin { color: var(--metin-2); background: var(--zemin-2); border-radius: 10px; padding: 12px 14px; margin-top: 8px; line-height: 1.6; }
.kvkk-metin p { margin: 0 0 8px; }
.kvkk-metin p:last-child { margin: 0; }

.cf-turnstile { margin-bottom: 16px; display: flex; justify-content: center; }

/* ---------- Butonlar ---------- */
.buton {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 14px;
    font-size: 16px; font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border: 0; border-radius: var(--r-sm);
    cursor: pointer; text-decoration: none;
    box-shadow: 0 8px 20px -6px rgba(124,58,237,.5);
    transition: transform .12s, box-shadow .15s, opacity .15s;
    touch-action: manipulation;
}
.buton:hover { box-shadow: 0 10px 26px -6px rgba(124,58,237,.6); }
.buton:active { transform: scale(.98); }
.buton:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.buton-ikincil { background: #fff; color: var(--birincil-koyu); border: 1.5px solid var(--cizgi); box-shadow: none; margin-top: 10px; }
.buton-ikincil:hover { background: var(--zemin-2); }
.buton-tehlike { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 8px 20px -6px rgba(220,38,38,.5); }

.spinner { width: 19px; height: 19px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: don .7s linear infinite; }
.buton-ikincil .spinner { border-color: rgba(124,58,237,.3); border-top-color: var(--birincil); }
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- Hata mesaji ---------- */
.hata-mesaj {
    display: flex; gap: 8px; align-items: flex-start;
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 10px; padding: 11px 13px; font-size: 14px; margin: 0 0 14px;
    animation: silkele .3s;
}
@keyframes silkele { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ---------- Kod girisi ---------- */
.kod-girisi {
    text-align: center;
    font-size: 30px; font-weight: 700;
    letter-spacing: .5em; text-indent: .5em;
    font-variant-numeric: tabular-nums;
    height: 62px;
}
.sayac { text-align: center; color: var(--metin-2); font-size: 14px; margin: 14px 0; }
.sayac strong { font-variant-numeric: tabular-nums; color: var(--metin); }
.ikincil-satir { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.baglanti-buton {
    background: none; border: 0; color: var(--birincil);
    font-size: 14px; font-weight: 600; cursor: pointer;
    padding: 11px 4px; min-height: 44px; touch-action: manipulation;
}
.baglanti-buton:disabled { color: var(--metin-3); cursor: not-allowed; }

/* ---------- Basari ---------- */
.basari-ikon { display: flex; justify-content: center; margin-bottom: 14px; }
.basari-ikon svg { animation: pop .4s ease both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------- Anasayfa marka karti ---------- */
.kart-marka { text-align: center; }
.marka-logo { width: 100%; max-width: 340px; height: auto; border-radius: 14px; box-shadow: var(--golge-sm); }
.marka-aciklama { color: #374151; margin: 20px 0 10px; font-size: 16px; }
.marka-alt { color: var(--metin-2); font-size: 14px; margin: 0; }
.marka-ozellikler { display: grid; gap: 10px; margin: 20px 0 6px; text-align: left; }
.marka-ozellik { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #374151; }
.marka-ozellik svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--basari); }

/* ---------- Alt bilgi ---------- */
.alt-bilgi { margin-top: 22px; color: rgba(255,255,255,.8); font-size: 13px; text-align: center; }
.alt-bilgi a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (min-width: 480px) {
    .kart { padding: 32px 30px 28px; }
}