:root {
  --zemin: #efece4;
  --kart: #ffffff;
  --murekkep: #15171c;
  --soluk: #5d6170;
  --cizgi: #d9d4c7;
  --kirmizi: #d32f2f;
  --sari: #ffd23f;
  --yesil: #1c8a4a;
  --lacivert: #16233f;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 9px);
  color: var(--murekkep);
  font: 16px/1.5 "Archivo", system-ui, sans-serif;
}
button, input, textarea { font: inherit; color: inherit; }
.sayfa { max-width: 1120px; margin: 0 auto; padding: 0 16px 40px; }

/* Baş */
.bas { padding: 22px 0 8px; }
.serit {
  display: inline-block; margin: 0 0 10px; padding: 4px 10px;
  background: var(--sari); color: var(--murekkep);
  font: 13px/1.2 "Anton", sans-serif; letter-spacing: .12em;
  border: 2px solid var(--murekkep);
}
h1 { margin: 0; font: 46px/1 "Anton", sans-serif; letter-spacing: .01em; text-transform: uppercase; }
h1 span { color: var(--kirmizi); }
.giris { margin: 10px 0 6px; font-size: 17px; max-width: 640px; }
.guven { margin: 0; font-size: 14px; color: var(--soluk); }

.duzen { display: grid; gap: 18px; margin-top: 16px; }
@media (min-width: 900px) {
  .duzen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .onizleme { position: sticky; top: 12px; }
  h1 { font-size: 64px; }
}

/* Form */
.form { display: grid; gap: 14px; }
.kart {
  background: var(--kart); border: 2px solid var(--murekkep); border-radius: 14px;
  padding: 16px; box-shadow: 4px 4px 0 var(--murekkep);
}
.kart h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.kart h2 i {
  font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--murekkep); color: #fff; font: 15px "Anton", sans-serif;
}
.alan { display: grid; gap: 4px; margin-bottom: 12px; }
.alan > span { font-weight: 600; font-size: 14px; }
input:not([type=checkbox]):not([type=range]):not([type=file]), textarea {
  width: 100%; padding: 11px 12px; border: 2px solid var(--cizgi); border-radius: 10px; background: #fbfaf7;
  font-size: 16px; outline: none;
}
input:focus, textarea:focus { border-color: var(--murekkep); }
textarea { resize: vertical; }
.iki { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.foto-sec {
  display: grid; gap: 4px; place-items: center; text-align: center; cursor: pointer;
  padding: 22px 12px; border: 2px dashed var(--murekkep); border-radius: 12px; background: #fff8dd;
}
.foto-sec input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.foto-sec span { font-weight: 800; font-size: 18px; }
.foto-sec small { color: var(--soluk); }
.foto-sec:focus-within { outline: 3px solid var(--sari); }
.foto-ayar { display: grid; gap: 6px; margin-top: 12px; font-size: 14px; }
.foto-ayar label { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; }
input[type=range] { width: 100%; accent-color: var(--murekkep); }

.secim { display: flex; flex-wrap: wrap; gap: 8px; }
.secim button {
  flex: 1 1 auto; padding: 10px 12px; border: 2px solid var(--murekkep); border-radius: 10px; background: #fff;
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.secim button[aria-pressed=true] { background: var(--murekkep); color: #fff; }
.secim.dikey { flex-direction: column; margin-bottom: 12px; }
.secim.dikey button { flex-direction: column; align-items: flex-start; text-align: left; gap: 0; }
.secim.dikey small { font-weight: 400; opacity: .8; }
.ornek { width: 16px; height: 16px; border-radius: 4px; border: 2px solid currentColor; }
.ornek.k { background: var(--kirmizi); } .ornek.s { background: var(--sari); } .ornek.l { background: var(--lacivert); }

.cipler { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.cipler button {
  padding: 5px 10px; border-radius: 999px; border: 1.5px solid var(--cizgi); background: #f6f4ee;
  font-size: 13px; cursor: pointer;
}
.cipler button:active { background: var(--sari); }

.uyari {
  background: #fff4d6; border-left: 5px solid var(--sari); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px;
}
.uyari ul { margin: 6px 0 0; padding-left: 18px; }
.uyari li { margin-bottom: 4px; }
.kutu { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.kutu input { width: 20px; height: 20px; accent-color: var(--murekkep); }

.bulundu-anahtar {
  display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 12px;
  border: 2px solid var(--yesil); background: #eaf6ee; cursor: pointer;
}
.bulundu-anahtar input { position: absolute; opacity: 0; }
.bulundu-anahtar small { display: block; font-size: 13px; color: var(--soluk); }
.anahtar { flex: none; width: 48px; height: 28px; border-radius: 999px; background: #b9c4bd; position: relative; transition: background .2s; }
.anahtar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.bulundu-anahtar input:checked + .anahtar { background: var(--yesil); }
.bulundu-anahtar input:checked + .anahtar::after { transform: translateX(20px); }
.bulundu-anahtar input:focus-visible + .anahtar { outline: 3px solid var(--sari); }

/* Önizleme */
.onizleme { background: var(--murekkep); border-radius: 16px; padding: 14px; color: #fff; }
.sekme { display: flex; gap: 6px; margin-bottom: 12px; }
.sekme button {
  flex: 1; padding: 10px; border-radius: 10px; border: 2px solid #3a3e4a; background: transparent; color: #fff; font-weight: 600; cursor: pointer;
}
.sekme button[aria-selected=true] { background: var(--sari); color: var(--murekkep); border-color: var(--sari); }
.cerceve { display: grid; place-items: center; background: #2a2d36; border-radius: 10px; padding: 12px; }
.cerceve canvas { width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; box-shadow: 0 6px 24px rgba(0,0,0,.45); background: #fff; }
.cerceve canvas#cHikaye { width: auto; max-width: 100%; }
.dugmeler { display: grid; gap: 8px; margin-top: 12px; }
.buyuk, .ikinci {
  padding: 13px 14px; border-radius: 12px; font-weight: 800; font-size: 16px; cursor: pointer; border: 2px solid var(--sari);
}
.buyuk { background: var(--sari); color: var(--murekkep); }
.ikinci { background: transparent; color: #fff; border-color: #4a4e5a; font-weight: 600; }
.ipucu { font-size: 13px; color: #c8cad2; margin: 12px 0 4px; }
.temizle { background: none; border: 0; color: #9da1ad; text-decoration: underline; cursor: pointer; padding: 4px 0; font-size: 13px; }

.bilgi { margin-top: 28px; background: var(--kart); border: 2px solid var(--murekkep); border-radius: 14px; padding: 16px 18px; }
.bilgi h2 { margin: 0 0 8px; font: 24px "Anton", sans-serif; text-transform: uppercase; }
.bilgi ol { margin: 0; padding-left: 20px; }
.bilgi li { margin-bottom: 8px; }

.alt { text-align: center; color: var(--soluk); font-size: 14px; margin-top: 24px; }
.alt a { color: var(--murekkep); font-weight: 700; }

.bildirim {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9;
  background: var(--murekkep); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600;
  box-shadow: 0 4px 18px rgba(0,0,0,.3); max-width: calc(100% - 32px);
}

/* Yazdırma: yalnız A4 afiş resmi */
#baski { display: none; }
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .sayfa, .bildirim { display: none !important; }
  #baski { display: block; }
  #baski img { display: block; width: 210mm; height: 297mm; }
}