/*
   Untillo karşılama sayfası — A yönünün paleti, yazısı ve sesi.

   Uygulamadaki tasarım sistemiyle AYNI kaynaktan: renkler `Palet.kt`
   içindeki `acikTema`/`koyuTema` değerleri, yazı ailesi `Yazi.kt`
   içindeki Barlow Semi Condensed (levha) + Barlow (gövde) + Instrument
   Serif (mektup sesi).

   Çerçeve yok ve olmayacak: sayfa üç dosya (html, css, bir küçük js) ve
   bir yazı tipi bağlantısından ibaret. Karşılama sayfasının işi bir şey
   anlatmak; bir uygulama olmak değil.
*/

:root {
    --zemin: #F1F4F1;
    --yuzey: #FFFFFF;
    --kenar: #CFD8D3;
    --metin: #121C18;
    --ikincil: #4E5E57;
    --vurgu: #8F5100;
    --vurgu-ustu: #FFFFFF;
    --mektup-zemini: #F5F1EA;
    --olcek: 8px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --zemin: #0F1513;
        --yuzey: #1A2320;
        --kenar: #2E3B36;
        --metin: #EEF2EF;
        --ikincil: #9DACA5;
        --vurgu: #FFB020;
        --vurgu-ustu: #141A18;
        --mektup-zemini: #15120F;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.5;
}

body { padding: calc(var(--olcek) * 3) calc(var(--olcek) * 2) calc(var(--olcek) * 8); }

main { max-width: 34rem; margin: 0 auto; }

h1, h2, h3 {
    font-family: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin: 0 0 calc(var(--olcek) * 2);
}

h1 { font-size: 2.9rem; }
h2 { font-size: 1.7rem; margin-top: calc(var(--olcek) * 5); }
h3 { font-size: 1.2rem; margin-top: calc(var(--olcek) * 4); }

p { margin: 0 0 calc(var(--olcek) * 2); }

.etiket {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ikincil);
    margin-bottom: var(--olcek);
}

.ikincil { color: var(--ikincil); font-size: 0.93rem; }

.mektup {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.3;
    background: var(--mektup-zemini);
    border: 1px solid var(--kenar);
    border-radius: calc(var(--olcek) * 1.5);
    padding: calc(var(--olcek) * 3);
    margin: calc(var(--olcek) * 3) 0;
}

.panel {
    background: var(--yuzey);
    border: 1px solid var(--kenar);
    border-radius: calc(var(--olcek) * 1.5);
    padding: calc(var(--olcek) * 3);
    margin: calc(var(--olcek) * 2) 0;
}

a { color: var(--vurgu); text-underline-offset: 3px; }

.dugme, button {
    display: inline-block;
    font-family: inherit;
    font-weight: 600;
    font-size: 1.05rem;
    padding: calc(var(--olcek) * 1.5) calc(var(--olcek) * 3);
    border-radius: calc(var(--olcek) * 1.25);
    border: 1px solid var(--vurgu);
    background: var(--vurgu);
    color: var(--vurgu-ustu);
    text-decoration: none;
    cursor: pointer;
    min-height: 48px;
}

.dugme.ikincil-dugme, button.ikincil-dugme {
    background: transparent;
    color: var(--metin);
    border-color: var(--kenar);
}

.dugme[aria-disabled="true"], button[disabled] { opacity: 0.5; cursor: default; }

input[type="email"] {
    width: 100%;
    font-family: inherit;
    font-size: 1.05rem;
    padding: calc(var(--olcek) * 1.5);
    border-radius: calc(var(--olcek) * 1.25);
    border: 1px solid var(--kenar);
    background: var(--yuzey);
    color: var(--metin);
    min-height: 48px;
}

label { display: block; margin-bottom: var(--olcek); font-weight: 600; }

ul { padding-left: calc(var(--olcek) * 3); }
li { margin-bottom: var(--olcek); }

footer {
    max-width: 34rem;
    margin: calc(var(--olcek) * 8) auto 0;
    padding-top: calc(var(--olcek) * 3);
    border-top: 1px solid var(--kenar);
    color: var(--ikincil);
    font-size: 0.9rem;
}

footer a { color: var(--ikincil); }

.sonuc { margin-top: calc(var(--olcek) * 2); }
.sonuc:empty { display: none; }

@media (max-width: 26rem) {
    h1 { font-size: 2.2rem; }
    body { padding-left: var(--olcek); padding-right: var(--olcek); }
}