:root {
  --lacivert: #13233f;
  --lacivert2: #1d3560;
  --turuncu: #e8622c;
  --amber: #f2a51a;
  --kraft: #ead9b6;
  --kraft2: #d4bd8f;
  --krem: #fbf4e4;
  --yesil: #2f7d4f;
  --yazi: #13233f;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--yazi);
  background-color: var(--kraft);
  background-image: radial-gradient(rgba(19,35,63,.07) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  line-height: 1.45;
}
.tente {
  height: 54px;
  background: repeating-linear-gradient(90deg, var(--lacivert) 0 46px, var(--amber) 46px 92px);
  -webkit-mask: radial-gradient(23px at 23px 100%, transparent 98%, #000) 0 0/46px 100%;
  mask: radial-gradient(23px at 23px 100%, transparent 98%, #000) 0 0/46px 100%;
}
main { max-width: 560px; margin: 0 auto; padding: 8px 16px 40px; }
h1 {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 12vw, 58px);
  line-height: 1.05;
  margin: 14px 0 6px;
  color: var(--lacivert);
  letter-spacing: .5px;
}
.soz { font-family: Caveat, cursive; font-size: 28px; margin: 0 0 18px; color: var(--turuncu); line-height: 1.1; }
h2 { font-family: "Alfa Slab One", Georgia, serif; font-weight: 400; font-size: 24px; margin: 0 0 6px; }
h3 { font-size: 17px; margin: 16px 0 4px; }
.kart {
  background: var(--krem);
  border: 3px solid var(--lacivert);
  border-radius: 18px;
  padding: 18px 16px 20px;
  margin: 0 0 18px;
  box-shadow: 0 6px 0 var(--lacivert);
}
label { display: block; font-weight: 800; margin: 14px 0 6px; font-size: 16px; }
label:first-child { margin-top: 0; }
select, input:not([type=checkbox]) {
  width: 100%;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--yazi);
  background: #fff;
  border: 2.5px solid var(--lacivert);
  border-radius: 12px;
  padding: 12px 12px;
  min-height: 52px;
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--lacivert) 50%), linear-gradient(135deg, var(--lacivert) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 15px) 52%;
  background-size: 7px 7px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
select:focus, input:focus { outline: 3px solid var(--amber); outline-offset: 1px; }
.ipucu { font-size: 14px; margin: 6px 0 0; opacity: .8; }
.hata { background: #fde4d8; border-left: 5px solid var(--turuncu); padding: 10px 12px; border-radius: 8px; margin: 14px 0 0; font-weight: 600; }
.tamam { background: #dff0e3; border-left: 5px solid var(--yesil); padding: 10px 12px; border-radius: 8px; margin: 14px 0 0; font-weight: 600; }
.dugme {
  display: block; width: 100%;
  margin-top: 18px;
  font: inherit; font-weight: 800; font-size: 20px;
  min-height: 56px;
  border: 3px solid var(--lacivert);
  border-radius: 14px;
  background: #fff; color: var(--lacivert);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--lacivert);
  text-decoration: none; text-align: center; line-height: 50px;
}
.dugme:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lacivert); }
.dugme.vurgu { background: var(--turuncu); color: #fff; font-family: "Alfa Slab One", Georgia, serif; font-weight: 400; font-size: 24px; letter-spacing: .5px; }
.dugme.wp { background: #1f8f4e; color: #fff; }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ikili .dugme { font-size: 17px; }
.onay { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15px; margin-top: 16px; }
.onay input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--turuncu); }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Sonuç: fiyat etiketi */
#sonuc { margin: 4px 0 22px; }
.etiket-ip { display: flex; justify-content: center; height: 34px; }
.etiket-ip span { width: 3px; height: 34px; background: var(--lacivert); transform: rotate(-8deg); transform-origin: bottom; }
.etiket {
  position: relative;
  background: var(--krem);
  border: 3px solid var(--lacivert);
  border-radius: 22px 22px 18px 18px;
  padding: 34px 18px 20px;
  box-shadow: 0 8px 0 var(--lacivert);
  transform: rotate(-1deg);
  overflow: hidden;
}
.etiket::before {
  content: ""; position: absolute; top: 12px; left: 50%; margin-left: -10px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--kraft); border: 3px solid var(--lacivert);
}
.etiket .ust { text-align: center; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; opacity: .75; margin-top: 6px; }
.etiket .tutar { text-align: center; font-family: "Alfa Slab One", Georgia, serif; font-size: clamp(38px, 12vw, 54px); line-height: 1.1; margin: 4px 0 2px; }
.etiket .birim { text-align: center; font-size: 15px; font-weight: 600; opacity: .8; }
.damga {
  display: block; width: max-content; max-width: 100%;
  margin: 16px auto 8px;
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: clamp(40px, 13vw, 64px);
  line-height: 1;
  padding: 8px 22px 10px;
  border: 6px solid currentColor;
  border-radius: 14px;
  transform: rotate(-7deg);
  animation: damga .45s cubic-bezier(.3,1.6,.5,1) both .1s;
}
@keyframes damga { from { transform: rotate(-7deg) scale(2.4); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .damga { animation: none; } }
.k-kazik { color: #c8361a; }
.k-tuzlu { color: var(--turuncu); font-size: clamp(26px, 8vw, 46px); }
.k-normal { color: var(--yesil); }
.k-ucuz { color: #1d5fa0; }
.k-yok { color: var(--lacivert); }
.damga { white-space: nowrap; }
.espri { font-family: Caveat, cursive; font-size: 30px; line-height: 1.1; text-align: center; margin: 10px 4px 14px; }
.cetvel { margin: 16px 2px 6px; }
.cetvel .serit { position: relative; height: 22px; border-radius: 11px; background: linear-gradient(90deg, #8fb7dd 0 20%, #9fd0ad 20% 55%, var(--amber) 55% 75%, #e9714a 75% 100%); border: 2.5px solid var(--lacivert); }
.cetvel .ok { position: absolute; top: -14px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid var(--lacivert); transform: translateX(-10px); }
.cetvel .yazilar { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-top: 4px; }
.bilgi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 4px; }
.bilgi div { background: #fff; border: 2px solid var(--lacivert); border-radius: 12px; padding: 8px 10px; }
.bilgi b { display: block; font-size: 20px; }
.bilgi span { font-size: 13px; opacity: .8; }
.not { font-size: 14px; margin: 12px 0 0; }
.kaynak { background: #fff; border: 2px dashed var(--lacivert); border-radius: 12px; padding: 10px 12px; margin-top: 12px; font-size: 15px; }
.kaynak a { color: var(--lacivert); font-weight: 700; word-break: break-word; }
.paylas { margin-top: 18px; }

.sonlar { list-style: none; padding: 0; margin: 8px 0 0; }
.sonlar li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1.5px dashed rgba(19,35,63,.3); font-size: 15px; }
.sonlar li b { white-space: nowrap; }
.sonlar li.bos { display: block; opacity: .75; }
.yontem summary { font-weight: 800; cursor: pointer; font-size: 18px; }
.yontem ul { padding-left: 20px; }
.yontem li { margin: 6px 0; }
footer { text-align: center; font-size: 14px; opacity: .8; }
footer a { color: inherit; }