:root {
  --zemin: #faf8f5; --kart: #ffffff; --metin: #23201c; --soluk: #6b645b; --vurgu: #7a4bd1; --vurgu-koyu: #5b33a6;
  --cizgi: #e7e1d8; --tamam: #1d7a52; --hata: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root { --zemin: #17151a; --kart: #211f25; --metin: #efeae3; --soluk: #b1a9a0; --vurgu: #a888ea; --vurgu-koyu: #c4adf2; --cizgi: #34303a; --tamam: #5fcf9c; --hata: #f2958d; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--metin); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main, .ust, .alt-bilgi { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.ust { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.logo { font-weight: 700; letter-spacing: .02em; }
.rozet { font-size: 13px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--cizgi); color: var(--soluk); }
.giris { padding: 48px 0 24px; }
h1 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; }
h2 { font-size: 22px; margin: 0 0 12px; }
.alt { color: var(--soluk); font-size: 19px; margin: 0 0 24px; }
.kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 20px; margin: 16px 0; }
.liste, .adimlar { margin: 0; padding-left: 20px; }
.liste li, .adimlar li { margin: 6px 0; }
.kucuk { font-size: 14px; color: var(--soluk); margin: 4px 0 12px; }
.ornek-kart { border-left: 3px solid var(--vurgu); padding: 4px 0 4px 14px; }
.etiket { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); margin: 12px 0 2px; }
.ornek-kart p { margin: 0 0 6px; }
.tutar { font-size: 20px; margin: 0; }
.dugme { display: inline-block; font: inherit; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kart); color: var(--metin); cursor: pointer; text-decoration: none; }
.dugme.ana { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.dugme.ana:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
.dugme:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; }
form label { display: block; margin: 10px 0 4px; }
input[type=email], input[type=text] { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--zemin); color: var(--metin); }
.onay { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.onay input { margin-top: 5px; }
form .dugme { margin-top: 14px; }
.bal { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mesaj { min-height: 1.6em; margin: 10px 0 0; }
.mesaj.tamam { color: var(--tamam); } .mesaj.hata { color: var(--hata); }
a { color: var(--vurgu); }
.alt-bilgi { padding: 24px 16px 96px; font-size: 14px; color: var(--soluk); }
.cerez { position: fixed; left: 12px; right: 12px; bottom: 12px; max-width: 560px; margin: 0 auto; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.cerez p { margin: 0 0 8px; font-size: 15px; }
.cerez-dugmeler { display: flex; gap: 10px; }
.cerez-dugmeler .dugme { flex: 1; }
.gizli { display: none; }
.metin-sayfasi { padding: 24px 0 48px; }
.taslak-uyari { background: #fff4d6; color: #5a4200; border: 1px solid #f0d27a; border-radius: 10px; padding: 10px 14px; }
@media (prefers-color-scheme: dark) { .taslak-uyari { background: #3a2f10; color: #f3dc9a; border-color: #6b5620; } }
@media (max-width: 480px) { h1 { font-size: 28px; } .giris { padding-top: 32px; } }