/* Resmî sayfalar ve 404: çuha başlık bandı + kareli kâğıtta metin. Renk ve yazılar site.css ile aynı aile. */
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/young-serif.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/figtree-wght.woff2) format("woff2"); }
@font-face { font-family: "Patrick Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/patrick-hand.woff2) format("woff2"); }

:root {
  --felt: #1F4031; --felt-2: #2E5A46; --paper: #F4F6F2; --paper-2: #FCFDFA; --grid: #CED6C8;
  --ink: #161A15; --ink-2: #5C6459; --ivory: #F4EEDD; --ivory-2: #B9CCBF; --edge: #D2C6A6;
  --red: #B8352A; --blue: #1D5C94; --yellow: #C58B12; --black: #2A2622; --gold: #E9C46A;
  --pad: clamp(16px, 4vw, 56px);
  --display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --hand: "Patrick Hand", "Chalkboard SE", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 17px/1.65 var(--body); font-weight: 450; color: var(--ink);
  background: var(--felt) radial-gradient(1000px 600px at 75% -10%, #2f5d48, transparent 65%) no-repeat;
}
a { color: var(--felt-2); text-underline-offset: 3px; }

/* Dil seçimi: betik html[data-lang]'i koyar; yoksa iki dil birlikte görünür */
html[data-lang="tr"] [data-only="en"], html[data-lang="en"] [data-only="tr"] { display: none !important; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(14px, env(safe-area-inset-top)) var(--pad) 14px; color: var(--ivory); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ivory); font: 400 21px var(--display); }
.brand img { border-radius: 22%; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-links { display: flex; gap: 18px; font-size: 14.5px; font-weight: 650; }
.nav-links a { color: var(--ivory-2); text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ivory); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.lang { display: flex; background: #00000026; border-radius: 99px; padding: 3px; }
.lang button { border: 0; background: none; font: 650 12px/1 var(--body); padding: 8px 10px; border-radius: 99px; color: var(--ivory-2); cursor: pointer; min-width: 36px; min-height: 30px; }
.lang button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }

.head { padding: clamp(36px, 8vh, 90px) var(--pad) clamp(40px, 7vh, 80px); color: var(--ivory); max-width: 1100px; margin: 0 auto; }
.head .eyebrow { font: 700 12px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.head h1 { font: 400 clamp(38px, 6vw, 76px)/1.04 var(--display); letter-spacing: -0.015em; margin: 0 0 14px; }
.head .date { margin: 0; font: 400 20px var(--hand); color: var(--ivory-2); }

.sheet {
  background-color: var(--paper);
  background-image: linear-gradient(#ced6c87a 1px, transparent 1px), linear-gradient(90deg, #ced6c87a 1px, transparent 1px);
  background-size: 22px 22px;
  margin: 0 clamp(0px, 2.2vw, 36px); border-radius: 6px; box-shadow: 0 40px 90px -30px #000d;
  padding: clamp(36px, 7vh, 80px) var(--pad) clamp(48px, 10vh, 110px);
}
.doc { max-width: 760px; margin: 0 auto; }
.summary {
  background: var(--paper-2); border-radius: 12px; padding: 22px 24px; margin: 0 0 40px;
  box-shadow: 0 0 0 1px var(--grid), 0 18px 30px -26px #1f403166; border-left: 5px solid var(--felt-2);
}
.summary p { margin: 0; }
.doc h2 { font: 400 clamp(23px, 2.4vw, 28px)/1.25 var(--display); margin: 44px 0 12px; display: flex; align-items: baseline; gap: 12px; }
.doc h2 .n { font: 400 24px/1 var(--hand); color: var(--red); min-width: 1.6em; }
.doc p, .doc li { color: #2b3129; }
.doc ul { padding-left: 1.2em; }
.doc table { width: 100%; border-collapse: collapse; background: var(--paper-2); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--grid); margin: 8px 0 16px; font-size: 15.5px; }
.doc th, .doc td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #e3e8df; vertical-align: top; }
.doc th { font: 700 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: #e8ece3; }
.doc tr:last-child td { border-bottom: 0; }
.lang-sep { border: 0; border-top: 2px dashed var(--grid); margin: 72px 0; }
html[data-lang] .lang-sep { display: none; }

/* Destek: iletişim kartı ve SSS */
.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--felt); color: var(--ivory); border-radius: 14px; padding: 24px 26px; margin: 0 0 18px; }
.contact p { margin: 0; color: var(--ivory-2); max-width: 30em; }
.contact strong { display: block; font: 400 22px/1.3 var(--display); color: var(--ivory); margin-bottom: 4px; }
.mail-btn {
  display: inline-block; text-decoration: none; color: var(--ink); font-weight: 750; padding: 12px 18px; border-radius: 10px;
  background: linear-gradient(175deg, #fbf7ec, #ebe2ca); box-shadow: 0 4px 0 var(--edge), inset 0 1px 0 #fff;
}
.mail-btn:hover { transform: translateY(-1px); }
.tip { color: var(--ink-2); font-size: 15.5px; margin: 0 0 30px; }
.faq details { border-bottom: 1px solid var(--grid); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 650; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 30px/1 var(--hand); color: var(--red); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: -4px 0 18px; }

.footer { padding: 34px var(--pad) max(34px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 14px 40px; flex-wrap: wrap; font-size: 14px; color: var(--ivory-2); }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer a { color: var(--ivory); text-decoration: none; font-weight: 650; }
.footer a:hover { text-decoration: underline; }
.footer p { margin: 0; }

/* 404: üç taş */
.lost { min-height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 32px var(--pad); color: var(--ivory); }
.lost .tiles { display: flex; gap: 10px; margin-bottom: 34px; }
.lost .tiles i {
  display: grid; place-items: center; font: 800 46px/1 var(--body); font-style: normal; width: 74px; height: 104px; border-radius: 10px; position: relative;
  background: linear-gradient(170deg, #fbf7ec, #ece3cc); box-shadow: 0 6px 0 var(--edge), 0 18px 30px -10px #000a, inset 0 1px 0 #fff;
}
.lost .tiles i:nth-child(1) { color: var(--red); transform: rotate(-6deg); }
.lost .tiles i:nth-child(2) { color: #2A6A49; transform: translateY(-8px); }
.lost .tiles i:nth-child(3) { color: var(--blue); transform: rotate(5deg); }
.lost .tiles i::after { content: ""; position: absolute; bottom: 14px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: currentColor; }
.lost .tiles i:nth-child(2)::after { display: none; }
.lost h1 { font: 400 clamp(32px, 6vw, 56px)/1.1 var(--display); margin: 0 0 10px; }
.lost p { margin: 0 0 30px; color: var(--ivory-2); }
.lost a { display: inline-block; text-decoration: none; color: var(--ink); font-weight: 750; padding: 13px 22px; border-radius: 10px; background: linear-gradient(175deg, #fbf7ec, #ebe2ca); box-shadow: 0 4px 0 var(--edge); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { flex-wrap: wrap; }
  .brand span { display: none; }
  .nav-links { gap: 14px; font-size: 14px; }
  .sheet { margin: 0 8px; }
  .doc table { font-size: 14.5px; }
  .doc th, .doc td { padding: 9px 10px; }
  .footer { flex-direction: column; }
}
/* Betik yoksa kısa etiketler "Destek / Support" biçiminde yan yana */
html:not([data-lang]) span[data-only="en"]::before { content: " / "; }