/* Tasnif tanıtım sitesi — "Mürekkep" (Faruk 4.11.2026 seçti: taslak B). Koyu mürekkep + krem kâğıt bölümler, tek altın
   vurgu; yazı tipleri Mac uygulamasınınkiler (Lora + IBM Plex, site/fontlar). Gölge, degrade, kart yığını yok. */
@import url("fontlar/fontlar.css?v=1");
:root {
  --murekkep: #0E1424; --cizgi: #2A3247; --soluk: #9AA0AE; --krem: #ECE6D8; --kagit: #F6F2EA;
  --metin: #141A2A; --gri: #5C6270; --kagit-cizgi: #D8D1C1; --lacivert: #1E3A8A; --altin: #C9A55A; --altin-koyu: #A8842F; --hata: #B91C1C;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--murekkep); color: var(--kagit); font: 17px/1.65 "Plex Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
.kap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.etiket { font: 500 12px "Plex Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--altin); }
.kagit .etiket { color: var(--altin-koyu); }
h2 { font: 500 clamp(30px, 4vw, 44px)/1.12 "Lora", Georgia, serif; letter-spacing: -.01em; margin: 12px 0 0; }

/* üst çubuk */
header { display: flex; align-items: center; gap: 26px; padding: 26px 0; }
header .logo img { height: 40px; display: block; }
header nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
header nav a { color: var(--soluk); text-decoration: none; font-size: 14.5px; }
header nav a:hover { color: var(--kagit); }
header nav a.uye { color: var(--murekkep); background: var(--kagit); padding: 8px 16px; font-weight: 500; }
header nav a.uye:hover { background: var(--altin); color: var(--murekkep); }
@media (max-width: 640px) { header nav a.gizle { display: none; } }

/* giriş */
.giris { padding: 64px 0 104px; }
.dev { font: 500 clamp(64px, 14vw, 168px)/.95 "Lora", Georgia, serif; letter-spacing: -.03em; margin: 22px 0 0; font-variant-numeric: lining-nums; }
.alti { height: 2px; width: 120px; background: var(--altin); margin: 34px 0 30px; }
.giris p { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.5; max-width: 34em; color: var(--krem); margin: 0 0 38px; }
.giris p b { color: var(--kagit); font-weight: 500; }
.ara { display: flex; max-width: 640px; background: var(--kagit); color: var(--metin); }
.ara span { flex: 1; padding: 17px 22px; font-size: 17px; white-space: nowrap; overflow: hidden; }
.ara span::after { content: ""; display: inline-block; width: 2px; height: 20px; background: var(--lacivert); vertical-align: -4px; margin-left: 2px; animation: imlec 1s steps(1) infinite; }
@keyframes imlec { 50% { opacity: 0; } }
.ara b { background: var(--lacivert); color: var(--kagit); padding: 17px 26px; font-weight: 500; }
.eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.dugme { display: inline-block; background: var(--altin); color: var(--murekkep); font-weight: 500; padding: 14px 26px; text-decoration: none; border: 0; font-size: 16px; font-family: inherit; cursor: pointer; }
.dugme:hover { background: var(--kagit); }
.dugme:disabled { opacity: .5; cursor: default; }
.eylem small { color: var(--soluk); font-size: 14px; }

/* kâğıt bölüm: arşiv */
.kagit { background: var(--kagit); color: var(--metin); padding: 96px 0; }
.kagit h2 { margin-bottom: 46px; max-width: 18em; }
.dort { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--metin); }
@media (max-width: 760px) { .dort { grid-template-columns: repeat(2, 1fr); } }
.dort div { padding: 22px 18px 24px 0; border-bottom: 1px solid var(--kagit-cizgi); }
.dort .n { font: 500 clamp(26px, 3.4vw, 40px)/1 "Lora", serif; font-variant-numeric: tabular-nums; }
.dort .a { font-size: 14px; color: var(--gri); margin-top: 8px; }
.grafik { margin-top: 64px; }
.grafik svg { width: 100%; display: block; overflow: visible; }
.grafik text { font: 12px "Plex Mono", monospace; fill: var(--gri); }
.grafik .ac { font-size: 13px; color: var(--gri); margin-top: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* koyu bölüm: nasıl üye olunur */
.adimlar { padding: 96px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
@media (max-width: 760px) { .adimlar { grid-template-columns: 1fr; gap: 36px; } }
.adimlar ol { list-style: none; margin: 0; padding: 0; counter-reset: a; }
.adimlar li { counter-increment: a; display: grid; grid-template-columns: 56px 1fr; padding: 20px 0 22px; border-top: 1px solid var(--cizgi); }
.adimlar li::before { content: counter(a); font: 500 34px/1 "Lora", serif; color: var(--altin); }
.adimlar li b { font: 500 19px "Lora", serif; display: block; margin-bottom: 4px; }
.adimlar li span { color: var(--soluk); }

/* başvuru formu (kâğıt) */
.form { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; }
@media (max-width: 860px) { .form { grid-template-columns: 1fr; gap: 32px; } }
.form .yan p { color: var(--gri); margin: 18px 0 0; max-width: 26em; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; position: relative; }
@media (max-width: 560px) { form { grid-template-columns: 1fr; } }
label { display: block; font-size: 13px; color: var(--gri); }
.tam { grid-column: 1 / -1; }
input[type=text], input[type=email] { width: 100%; margin-top: 6px; padding: 12px 0 10px; font: 17px "Plex Sans", sans-serif; color: var(--metin);
  background: transparent; border: 0; border-bottom: 1px solid var(--metin); border-radius: 0; outline: none; }
input[type=text]:focus, input[type=email]:focus { border-bottom: 2px solid var(--lacivert); padding-bottom: 9px; }
.onay { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--gri); line-height: 1.5; }
.onay input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--lacivert); flex: none; }
.onay a { color: var(--lacivert); }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kagit .dugme { background: var(--metin); color: var(--kagit); justify-self: start; }
.kagit .dugme:hover { background: var(--lacivert); }
.durum { grid-column: 1 / -1; font-size: 14.5px; min-height: 1.4em; margin: 0; }
.durum.hata { color: var(--hata); }
.tamam { border-top: 2px solid var(--altin-koyu); padding-top: 22px; }
.tamam b { font: 500 26px "Lora", serif; display: block; margin-bottom: 8px; }
.tamam p { color: var(--gri); margin: 0 0 6px; }

footer { border-top: 1px solid var(--cizgi); padding: 30px 0 46px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--soluk); font-size: 13.5px; }
footer a { color: var(--soluk); }
footer i { font: italic 500 17px "Lora", serif; color: var(--altin); }

/* belge (gizlilik): kâğıt üzerinde okunur metin */
.belge { background: var(--kagit); color: var(--metin); padding: 72px 0 96px; font-family: "Plex Serif", Georgia, serif; }
.belge .ic { max-width: 760px; }
.belge h1 { font: 500 clamp(34px, 5vw, 48px)/1.1 "Lora", serif; margin: 14px 0 8px; letter-spacing: -.01em; }
.belge h2 { font: 500 22px "Lora", serif; margin: 38px 0 8px; }
.belge .tarih { color: var(--gri); font: 13px "Plex Mono", monospace; }
.belge li { margin: 5px 0; }
.belge table { border-collapse: collapse; width: 100%; font: 14.5px "Plex Sans", sans-serif; margin: 10px 0; }
.belge td, .belge th { border-bottom: 1px solid var(--kagit-cizgi); padding: 10px 12px 10px 0; text-align: left; vertical-align: top; }
.belge th { font: 500 12px "Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--gri); border-bottom: 1px solid var(--metin); }
.belge a { color: var(--lacivert); }

.belir { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; }
.belir.gor { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .belir { opacity: 1; transform: none; transition: none; } .ara span::after { animation: none; } }