:root {
  --zemin: #0F1420; --yuzey: #182031; --kenar: #263049; --girdi: #33405E; --cizgi: #3A4766;
  --yazi: #F3F4F6; --soluk: #A3ABBD; --etiket: #C9CFDB; --vurgu: #F2A33A; --vurgu-acik: #FFC371;
  --vurgu-yazi: #1A1206; --hata: #F87171;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--zemin); color: var(--yazi);
  font-family: Inter, system-ui, sans-serif; font-size: 15px;
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
}
a { color: var(--vurgu); }
a:hover { color: var(--vurgu-acik); }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
[hidden] { display: none !important; }

.sahne { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; position: relative; overflow: hidden; }

/* Kart (giriş ve kod) */
.kart {
  position: relative; z-index: 1; width: 100%; max-width: 400px; padding: 40px;
  background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 16px;
  display: flex; flex-direction: column; gap: 20px;
}
.kart.orta { max-width: 440px; align-items: center; text-align: center; }
.baslik { display: flex; flex-direction: column; gap: 6px; }
.baslik b { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; }
.kart.orta .baslik b { font-size: 22px; }
.baslik span { font-size: 13px; color: var(--soluk); }
.kart.orta .baslik span { font-size: 14px; }
label.alan { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--etiket); text-align: left; width: 100%; }
input.metin {
  height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--girdi);
  background: var(--zemin); color: var(--yazi); font-size: 15px; font-family: inherit; width: 100%;
}
input.metin:focus { border-color: var(--vurgu); outline: none; }
.dugme {
  height: 48px; border: none; border-radius: 10px; background: var(--vurgu); color: var(--vurgu-yazi);
  font-weight: 600; font-size: 15px; font-family: inherit; cursor: pointer; width: 100%;
}
.dugme:hover { background: var(--vurgu-acik); }
.dugme:disabled { opacity: .6; cursor: progress; }
.not { margin: 0; font-size: 12px; color: var(--soluk); text-align: center; }
.hata { margin: 0; font-size: 13px; color: var(--hata); min-height: 0; }
.hata:empty { display: none; }
.bag { background: none; border: none; padding: 0; color: var(--vurgu); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.bag:hover { color: var(--vurgu-acik); }

/* 6 haneli kod */
.haneler { display: flex; gap: 8px; width: 100%; justify-content: center; }
.haneler input {
  flex: 1 1 0; min-width: 0; max-width: 48px; height: 56px; text-align: center; font-size: 24px;
  font-family: 'Space Grotesk', sans-serif; border-radius: 10px; border: 1px solid var(--girdi);
  background: var(--zemin); color: var(--yazi); padding: 0;
}
.haneler input:focus { border: 2px solid var(--vurgu); outline: none; }

/* Ana ekran */
.ana { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 56px; width: 100%; }
.ana-ust { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ana-ust span { font-size: 14px; color: var(--soluk); }
.ana-ust h1 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 40px; }
.raf { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; max-width: 1000px; }
.raf a { width: 160px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: var(--yazi); text-decoration: none; border-radius: 16px; }
.raf a:hover { color: #FFFFFF; }
.raf .daire {
  width: 128px; height: 128px; border-radius: 50%; background: var(--yuzey); border: 3px solid;
  display: flex; align-items: center; justify-content: center; transition: transform .2s ease, box-shadow .2s ease;
}
.raf a:hover .daire, .raf a:focus-visible .daire { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.raf .ad { font-weight: 600; font-size: 16px; line-height: 1.3; }
.raf .alt { font-size: 13px; color: var(--soluk); margin-top: -8px; }
.raf-bos { color: var(--soluk); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ana-alt { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hap {
  height: 44px; padding: 0 20px; border-radius: 22px; border: 1px solid var(--cizgi); background: transparent;
  color: var(--yazi); font-family: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none;
}
.hap:hover { background: var(--yuzey); color: var(--yazi); }

/* Güneş ışığı */
.gunes {
  position: absolute; left: 50%; bottom: -720px; width: 1000px; height: 1000px; margin-left: -500px; border-radius: 50%;
  background: radial-gradient(circle, var(--vurgu) 0%, rgba(242,163,58,.6) 35%, rgba(242,163,58,0) 70%);
  opacity: 0; pointer-events: none; z-index: 0;
}
.gunes.dogdu { opacity: .08; }

/* Pencere (yedek kodlar) */
dialog.pencere {
  width: min(440px, calc(100vw - 32px)); padding: 32px; border-radius: 16px; border: 1px solid var(--kenar);
  background: var(--yuzey); color: var(--yazi);
}
dialog.pencere::backdrop { background: rgba(5,8,14,.7); }
dialog.pencere form, .pencere-ic { display: flex; flex-direction: column; gap: 16px; }
.kodlar { margin: 0; padding: 16px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; background: var(--zemin); border-radius: 10px; font-family: 'Space Grotesk', ui-monospace, monospace; font-size: 17px; text-align: center; }
.satir { display: flex; gap: 12px; }
.satir > * { flex: 1; }
.dugme.ikincil { background: transparent; color: var(--yazi); border: 1px solid var(--cizgi); }
.dugme.ikincil:hover { background: var(--zemin); }

/* Kurulum */
.karekod { background: #FFFFFF; border-radius: 12px; padding: 12px; width: 220px; max-width: 100%; }
.karekod svg { display: block; width: 100%; height: auto; }
.sir { font-family: ui-monospace, monospace; font-size: 13px; color: var(--etiket); word-break: break-all; }

@media (max-width: 560px) {
  .kart { padding: 28px 20px; }
  .ana { gap: 40px; }
  .ana-ust h1 { font-size: 30px; }
  .raf { gap: 28px 16px; }
  .raf a { width: 140px; }
  .raf .daire { width: 108px; height: 108px; }
  .raf .daire svg { width: 46px; height: 46px; }
}