:root {
  --lacivert: #13233f; --lacivert2: #1d3560; --turuncu: #c24a17; --turuncu2: #e8622c; --amber: #f2a51a;
  --krem: #fbf4e4; --kraft: #ead9b6; --kraft2: #d4bd8f; --yesil: #1a7f45;
  --slab: "Alfa Slab One", Georgia, serif; --el: "Caveat", cursive; --yazi: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--kraft); background-image: radial-gradient(rgba(19,35,63,.1) 2px, transparent 2px); background-size: 30px 30px; color: var(--lacivert); font: 400 16px/1.5 var(--yazi); }
a { color: inherit; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.cilt { background: var(--lacivert); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px); color: var(--krem); text-align: center; padding: 26px 16px 22px; border-bottom: 8px double var(--amber); }
.cilt h1, .cilt .marka { font: 400 clamp(32px, 9.5vw, 52px)/1.05 var(--slab); color: var(--amber); margin: 0; text-decoration: none; display: block; }
.cilt.kucuk { padding: 16px 16px 12px; }
.cilt.kucuk .marka { font-size: 26px; }
.cilt .alt { font: 700 26px/1.1 var(--el); margin: 6px 0 0; }
.cilt.kucuk .alt { font-size: 21px; margin-top: 2px; }
.ara { display: block; max-width: 560px; margin: 16px auto 0; }
.ara input { width: 100%; font: 600 16px var(--yazi); padding: 13px 16px; border-radius: 12px; border: 3px solid var(--amber); background: var(--krem); color: var(--lacivert); }
.ara input::placeholder { color: #6c6a63; font-weight: 400; }

main { max-width: 620px; margin: 0 auto; padding: 16px; }

.sekmeler { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 18px; }
.sekme { font: 800 14px var(--yazi); padding: 8px 12px; min-height: 40px; border-radius: 10px 10px 4px 4px; border: 2px solid var(--lacivert); background: var(--krem); color: var(--lacivert); cursor: pointer; }
.sekme[aria-pressed="true"] { background: var(--lacivert); color: var(--amber); }

.kart { position: relative; background: var(--krem); border: 3px solid var(--lacivert); border-radius: 8px 18px 18px 8px; padding: 16px 18px 16px 30px; margin-right: 12px; box-shadow: 4px 4px 0 #fffaf0, 5px 5px 0 var(--kraft2), 8px 8px 0 #fffaf0, 9px 9px 0 var(--kraft2), 12px 12px 0 var(--lacivert); min-height: 300px; display: flex; flex-direction: column; cursor: pointer; }
.kart::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--turuncu2); opacity: .55; }
.kart.cevir { animation: cevir .32s ease-out; transform-origin: 0 50%; }
@keyframes cevir { from { transform: perspective(1200px) rotateY(-55deg); opacity: .2; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kart.cevir { animation: none; } .anlam { animation: none !important; } }
.kart-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 800 13px var(--yazi); }
.kat { background: var(--amber); padding: 3px 10px; border-radius: 6px; }
.okur { font-weight: 600; font-style: italic; }
.sira { font-weight: 600; font-variant-numeric: tabular-nums; }
.cumle { font: 400 clamp(29px, 8.4vw, 40px)/1.14 var(--slab); margin: 20px 0 14px; overflow-wrap: anywhere; flex: 0 0 auto; }
.ac { align-self: flex-start; font: 800 18px var(--yazi); color: var(--krem); background: var(--lacivert); border: 0; border-radius: 12px; padding: 13px 18px; cursor: pointer; display: flex; align-items: baseline; gap: 8px; margin-top: auto; margin-bottom: auto; }
.ac small { font: 700 21px var(--el); color: var(--amber); }
.anlam { background: var(--amber); border-radius: 10px; padding: 8px 16px 12px; animation: ac .28s ease-out; transform: rotate(-.6deg); margin: auto 0; }
.anlam.gizli { display: none; }
@keyframes ac { from { transform: scale(.85) rotate(-3deg); opacity: 0; } to { transform: rotate(-.6deg); opacity: 1; } }
.anlam .etiket { font: 700 24px/1 var(--el); }
.anlam p { font: 800 21px/1.28 var(--yazi); margin: 2px 0 0; overflow-wrap: anywhere; }

.eylemler { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 6px; margin-top: 16px; }
.eylem { font: 800 13px var(--yazi); min-height: 44px; padding: 6px 8px; border: 2px solid var(--lacivert); background: #fff; color: var(--lacivert); border-radius: 10px; cursor: pointer; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.eylem.begen { padding: 6px 12px; font-size: 15px; }
.eylem.begen[aria-pressed="true"] { background: var(--turuncu); color: #fff; border-color: var(--turuncu); }
.eylem.wp { background: var(--yesil); border-color: var(--yesil); color: #fff; }

.gezi { display: grid; grid-template-columns: 48px 1fr 1fr 1.1fr; gap: 6px; margin-top: 26px; }
.dugme { font: 800 14px var(--yazi); min-height: 48px; padding: 8px 10px; border: 2px solid var(--lacivert); background: var(--krem); color: var(--lacivert); border-radius: 12px; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center; }
.dugme.ana { background: var(--lacivert); color: var(--amber); }
.dugme[aria-pressed="true"] { background: var(--amber); }
.dugme.genis { width: 100%; font-size: 17px; margin-top: 14px; }
.dugme:focus-visible, .eylem:focus-visible, .sekme:focus-visible, .ac:focus-visible { outline: 3px solid var(--turuncu2); outline-offset: 2px; }

.sonuc-baslik { font-weight: 800; margin: 0 0 10px; }
details.satir { background: var(--krem); border: 2px solid var(--lacivert); border-radius: 10px; margin-bottom: 8px; }
details.satir summary { cursor: pointer; padding: 12px 14px; font: 400 18px/1.25 var(--slab); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; list-style: none; }
details.satir summary::-webkit-details-marker { display: none; }
details.satir summary em { font: 800 12px var(--yazi); white-space: nowrap; }
details.satir .ic { padding: 0 14px 12px; }
details.satir .ic p { font-weight: 800; margin: 0 0 6px; background: var(--amber); padding: 8px 10px; border-radius: 8px; }
details.satir .ic a { font-weight: 800; font-size: 14px; }

.oner { background: var(--lacivert); color: var(--krem); border-radius: 16px; padding: 20px 18px; margin-top: 34px; scroll-margin-top: 12px; }
.oner h2 { font: 400 25px/1.15 var(--slab); color: var(--amber); margin: 0 0 6px; }
.oner p { margin: 0 0 10px; }
.oner label { display: block; font-weight: 800; margin: 12px 0 4px; }
.oner input, .oner textarea, .oner select { width: 100%; font: 400 16px var(--yazi); padding: 11px 12px; border-radius: 10px; border: 2px solid var(--amber); background: var(--krem); color: var(--lacivert); }
.oner .dugme.ana { background: var(--amber); color: var(--lacivert); border-color: var(--amber); }
.tuzak { position: absolute; left: -9999px; }
.mesaj { font-weight: 800; margin: 10px 0 0 !important; min-height: 1.4em; }
.mesaj.hata { color: var(--amber); }

.tek-gezi { display: grid; gap: 8px; margin-top: 30px; }
.alt-bilgi { text-align: center; padding: 8px 16px 28px; font-size: 14px; }
.tost { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 90px); background: var(--lacivert); color: var(--amber); font-weight: 800; padding: 11px 18px; border-radius: 12px; transition: transform .2s; z-index: 9; max-width: calc(100vw - 32px); text-align: center; }
.tost.goster { transform: translate(-50%, 0); }

/* Yönetici */
.yonet { max-width: 760px; }
.yonet .kutu { background: var(--krem); border: 2px solid var(--lacivert); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.yonet label { display: block; font-weight: 800; font-size: 13px; margin: 8px 0 3px; }
.yonet input, .yonet textarea, .yonet select { width: 100%; font: 400 16px var(--yazi); padding: 9px 10px; border: 2px solid var(--kraft2); border-radius: 8px; background: #fff; color: var(--lacivert); }
.yonet h2 { font: 400 24px var(--slab); margin: 20px 0 10px; }
.yonet .sira-dugme { display: flex; gap: 8px; margin-top: 10px; }
.yonet .sira-dugme .dugme { flex: 1; }
.yonet .ret { background: #fff; color: #a3321a; border-color: #a3321a; }
.yonet .kucuk-yazi { font-size: 13px; color: #55524a; }
.yonet .cizgi { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.yonet .cizgi .dugme { min-height: 38px; font-size: 13px; }