/* ============================================================
   İxirNext — "Kara Tahta" tasarım sistemi
   Palet: gece laciverti (indigo tahta), tebeşir beyazı, parlak amber, mercan kırmızısı, elektrik turkuaz
   Tipografi: Fraunces (başlık/serif) · Manrope (gövde) · Caveat (tebeşir el yazısı)
   ============================================================ */

:root {
  --tahta:       #1c2444;   /* kara tahta yeşili */
  --tahta-koyu:  #121831;
  --tebesir:     #f3eee1;   /* tebeşir beyazı */
  --tebesir-sol: rgba(243, 238, 225, 0.55);
  --kagit:       #f8f5ee;   /* defter kâğıdı */
  --kagit-cizgi: #e4ddcd;
  --murekkep:    #262c42;   /* mürekkep yeşil-siyahı */
  --sari:        #ffb52e;   /* güneş sarısı */
  --sari-koyu:   #e8990a;
  --kirmizi:     #ff5d55;   /* kalp kırmızısı */
  --turkuaz:     #22c9b8;   /* ixir turkuazı */
  --ahsap:       #7a5230;   /* tahta çerçevesi */
  --ahsap-koyu:  #5c3d22;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--murekkep);
  background: var(--kagit);
  line-height: 1.65;
  font-size: 17px;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.15; }
.tebeşir-el { font-family: 'Caveat', cursive; }

.icerik { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.icerik.dar { max-width: 860px; }

:focus-visible { outline: 3px solid var(--sari); outline-offset: 3px; border-radius: 4px; }

/* ---------- Kara tahta zemini ---------- */
.tahta {
  position: relative;
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(160deg, #232c55 0%, var(--tahta) 45%, #161d3a 100%);
  color: var(--tebesir);
}
.tahta::before { /* tebeşir tozu dokusu */
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(243,238,225,0.045) 1px, transparent 1.4px),
    radial-gradient(rgba(243,238,225,0.03) 1px, transparent 1.6px);
  background-size: 130px 130px, 210px 210px;
  background-position: 0 0, 60px 90px;
}
.tahta > * { position: relative; }

/* ---------- Üst menü ---------- */
.ust-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(18, 24, 49, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(243,238,225,0.12);
}
.marka { display: flex; align-items: baseline; gap: 2px; text-decoration: none; }
.marka-logo { height: 26px; width: auto; }
.marka-next {
  font-family: 'Caveat', cursive; font-size: 1.7rem; font-weight: 700;
  color: var(--sari); transform: translateY(3px);
}
.marka-next .nokta { color: var(--kirmizi); }
.menu { display: flex; gap: 26px; }
.menu a {
  color: var(--tebesir); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.menu a:hover { color: var(--sari); border-bottom-color: var(--sari); }
.menu-dugme { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.menu-dugme span { display: block; width: 24px; height: 2px; background: var(--tebesir); margin: 5px 0; border-radius: 2px; }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 0; }
.tahta-cerceve {
  max-width: 1060px;
  margin: 30px auto 0;
  padding: clamp(40px, 7vw, 90px) clamp(24px, 6vw, 80px) clamp(50px, 7vw, 90px);
  border: 14px solid var(--ahsap);
  border-image: linear-gradient(135deg, #8a5e38, var(--ahsap) 40%, var(--ahsap-koyu)) 1;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.45),
    0 18px 40px rgba(0,0,0,0.35);
  position: relative;
  text-align: center;
}
.hero-ust { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--tebesir-sol); letter-spacing: 0.5px; }
.hero-ust em { color: var(--sari); font-style: normal; }

.hero-baslik {
  margin: 18px 0 26px;
  font-weight: 600;
  color: var(--tebesir);
  display: grid; gap: 2px; justify-items: center;
}
.hero-baslik .satir-1 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 400; opacity: 0.9; }
.hero-baslik .satir-2 {
  position: relative;
  font-size: clamp(3.4rem, 9.5vw, 7rem);
  font-weight: 700; color: var(--sari);
  line-height: 1;
  padding: 0 10px;
  text-shadow: 0 0 24px rgba(240,176,46,0.25);
}
.hero-baslik .satir-3 {
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  font-weight: 700; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 10px;
}
.cizgi { position: absolute; left: 0; right: 0; bottom: -14px; width: 100%; height: 22px; }
.cizgi path { fill: none; stroke: var(--kirmizi); stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400; animation: ciz 1.1s 0.5s ease forwards; }
.kalp-nokta svg { width: clamp(30px, 4.5vw, 46px); height: auto; }
.kalp-cizim { fill: none; stroke: var(--kirmizi); stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 160; stroke-dashoffset: 160; animation: ciz 1s 1.3s ease forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }

.hero-metin { max-width: 640px; margin: 0 auto 34px; color: var(--tebesir-sol); font-size: 1.02rem; }
.hero-metin strong { color: var(--tebesir); }
.hero-not { display: block; margin-top: 12px; font-size: 1.5rem; color: var(--sari); }

.hero-butonlar { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Tebeşir karalamaları */
.karalama { position: absolute; opacity: 0.5; pointer-events: none; }
.karalama path { stroke: var(--tebesir); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.karalama-ucak  { width: 120px; top: 40px; right: 5%; transform: rotate(8deg); }
.karalama-yildiz{ width: 38px;  top: 24%;  left: 6%;  transform: rotate(-12deg); }
.karalama-kalp2 { width: 34px;  bottom: 12%; right: 8%; transform: rotate(10deg); }
.karalama-kalp2 path { stroke: var(--kirmizi); }

/* Tahta rafı */
.tahta-raf {
  max-width: 1120px; margin: 0 auto;
  height: 22px;
  background: linear-gradient(#8a5e38, var(--ahsap-koyu));
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
  position: relative;
}
.tebesir { position: absolute; top: -8px; height: 8px; width: 58px; border-radius: 4px; transform: rotate(-2deg); }
.tebesir-beyaz { left: 12%; background: var(--tebesir); }
.tebesir-sari  { left: 12%; margin-left: 74px; background: var(--sari); transform: rotate(3deg); }
.silgi { position: absolute; right: 10%; top: -16px; width: 74px; height: 16px;
  background: linear-gradient(#474d66 55%, #343950 55%); border-radius: 3px; transform: rotate(-1deg); }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 800; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  border: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: 'Manrope', sans-serif;
}
.btn:hover { transform: translateY(-2px) rotate(-0.4deg); }
.btn-sari { background: var(--sari); color: var(--tahta-koyu); box-shadow: 0 6px 0 var(--sari-koyu); }
.btn-sari:hover { box-shadow: 0 8px 0 var(--sari-koyu); }
.btn-yesil { background: var(--turkuaz); color: #06343a; box-shadow: 0 6px 0 #17a094; }
.btn-yesil:hover { box-shadow: 0 8px 0 #17a094; }
.btn-cizgi {
  background: transparent; color: var(--tebesir);
  border: 2px dashed rgba(243,238,225,0.6);
}
.btn-cizgi:hover { border-style: solid; border-color: var(--sari); color: var(--sari); }
.btn-buyuk { padding: 18px 42px; font-size: 1.1rem; }

/* ---------- Flash mesajlar ---------- */
.flash-alan { max-width: 860px; margin: 26px auto 0; padding: 0 24px; }
.flash {
  padding: 16px 20px; border-radius: 10px; font-weight: 600; margin-bottom: 10px;
  border: 2px solid transparent;
}
.flash-basari { background: #e5f4e9; color: #1c5e33; border-color: #9bd3ab; }
.flash-hata   { background: #fdecea; color: #8f2318; border-color: #f0b5ae; }

/* ---------- Kâğıt bölümleri ---------- */
.kagit {
  background:
    repeating-linear-gradient(transparent 0 34px, var(--kagit-cizgi) 34px 35px),
    var(--kagit);
  padding: clamp(60px, 9vw, 110px) 0;
}
.bolum-etiket { font-size: 1.5rem; color: var(--kirmizi); margin-bottom: 6px; }
.bolum-etiket.sari { color: var(--sari); }

/* ---------- Manifesto ---------- */
.manifesto-izgara {
  display: grid; grid-template-columns: 320px 1fr; gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
.foto-bant {
  position: relative;
  background: #fff;
  padding: 14px 14px 20px;
  box-shadow: 0 14px 30px rgba(35,49,44,0.22);
  transform: rotate(-2.4deg);
  margin-top: 14px;
}
.foto-bant img { filter: saturate(0.96); }
.foto-bant figcaption { padding-top: 12px; font-size: 0.85rem; line-height: 1.5; color: #4d5366; text-align: center; }
.foto-bant figcaption strong { display: block; font-size: 1rem; color: var(--murekkep); }
.bant {
  position: absolute; width: 90px; height: 26px;
  background: rgba(240,176,46,0.5);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.bant-sol { top: -12px; left: -26px; transform: rotate(-38deg); }
.bant-sag { top: -12px; right: -26px; transform: rotate(38deg); }

.manifesto-yazi h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700; margin: 4px 0 22px;
}
.manifesto-yazi p { margin-bottom: 18px; max-width: 62ch; }
.manifesto-yazi em { color: var(--kirmizi); }
.imza { font-size: 2.3rem; color: var(--murekkep); transform: rotate(-3deg); display: inline-block; }

/* ---------- Destek kartları ---------- */
.destekler { padding: clamp(60px, 9vw, 110px) 0; }
.tahta-baslik { font-size: clamp(2rem, 4.5vw, 3.1rem); color: var(--tebesir); margin-bottom: 12px; }
.tahta-aciklama { color: var(--tebesir-sol); max-width: 56ch; margin-bottom: 44px; }
.kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kart {
  background: var(--kagit);
  color: var(--murekkep);
  border-radius: 6px;
  padding: 28px 24px 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
  transform: rotate(-0.6deg);
  transition: transform 0.2s;
  display: flex; flex-direction: column;
}
.kart:nth-child(even) { transform: rotate(0.7deg); }
.kart:hover { transform: rotate(0deg) translateY(-5px); }
.kart-ikon { font-size: 2rem; margin-bottom: 12px; }
.kart h3 { font-size: 1.25rem; margin-bottom: 10px; }
.kart p { font-size: 0.94rem; flex: 1; }
.kart-link {
  margin-top: 16px; font-weight: 800; text-decoration: none; color: var(--kirmizi);
  font-size: 0.95rem;
}
.kart-link:hover { text-decoration: underline; }
.kart-kalp {
  background: transparent;
  border: 2px dashed rgba(243,238,225,0.4);
  box-shadow: none;
  align-items: center; justify-content: center; text-align: center;
  color: var(--tebesir);
}
.kart-kalp .tebeşir-el { font-size: 1.6rem; color: var(--tebesir); flex: 0; }
.kart-kalp-svg { width: 46px; margin-bottom: 12px; }
.kart-kalp-svg path { fill: var(--kirmizi); }

/* ---------- Sözler ---------- */
.sozler { text-align: center; }
.sozler-izgara {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 4vw, 50px);
  align-items: center;
}
.soz p {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 600; line-height: 1.35;
  margin-bottom: 14px;
}
.soz cite { font-style: normal; font-weight: 700; color: var(--kirmizi); font-size: 0.95rem; }
.soz-ayrac svg { width: 44px; }
.soz-ayrac path { fill: var(--kirmizi); }
.soz-alt {
  max-width: 760px; margin: 56px auto 0; padding: 0 24px;
  font-size: 0.98rem; color: #4d5366;
}

/* ---------- İyilik döngüsü ---------- */
.dongu { padding: clamp(60px, 9vw, 110px) 0; text-align: center; }
.dongu .tahta-baslik { margin-bottom: 40px; }
.dongu-adimlar {
  display: flex; gap: 18px; align-items: stretch; justify-content: center; flex-wrap: wrap;
}
.adim {
  flex: 1 1 240px; max-width: 300px;
  border: 2px dashed rgba(243,238,225,0.35);
  border-radius: 10px;
  padding: 26px 20px;
}
.adim-ikon { font-size: 2rem; display: block; margin-bottom: 10px; }
.adim h3 { font-size: 1.1rem; color: var(--tebesir); margin-bottom: 8px; }
.adim p { font-size: 0.9rem; color: var(--tebesir-sol); }
.adim-ok { align-self: center; font-size: 2.6rem; color: var(--sari); }
.dongu-tesekkur { max-width: 680px; margin: 40px auto 0; color: var(--tebesir-sol); }
.dongu-tesekkur strong { color: var(--tebesir); }
.dongu-tesekkur .tebeşir-el { font-size: 1.5rem; display: block; margin-top: 8px; }
.sari { color: var(--sari); }

/* ---------- Formlar ---------- */
.form-bolum h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 14px; }
.form-aciklama { max-width: 66ch; margin-bottom: 34px; }
.form-bolum-alt { border-top: 3px dashed var(--kagit-cizgi); }

.form {
  background: #fffefa;
  border: 1px solid #e7e1d2;
  border-radius: 12px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 16px 34px rgba(35,49,44,0.1);
}
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-bottom: 18px; }
.form label { display: flex; flex-direction: column; gap: 7px; font-weight: 700; font-size: 0.9rem; }
.form label.tam { margin-bottom: 18px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="date"], .form input[type="number"], .form select, .form textarea {
  font: inherit; font-weight: 500;
  padding: 12px 14px;
  border: 2px solid #ded8c9;
  border-radius: 8px;
  background: #fff;
  color: var(--murekkep);
  transition: border-color 0.15s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--sari);
}
.form textarea { resize: vertical; }
.belgeler { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.form-izgara > label { min-width: 0; }
.form input[type="file"] { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.dosya small { overflow-wrap: anywhere; }
.dosya input[type="file"] {
  font: inherit; font-size: 0.85rem;
  padding: 10px;
  border: 2px dashed #d4cdb9;
  border-radius: 8px; background: #fbf9f2;
}
.dosya small { font-weight: 500; color: #7f8596; }
.onay {
  flex-direction: row !important; align-items: flex-start; gap: 12px !important;
  font-weight: 500 !important; font-size: 0.88rem !important;
  margin: 8px 0 24px;
}
.onay input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--kirmizi); }
.onay a { color: var(--kirmizi); font-weight: 700; }
.gizli-alan { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- İletişim ---------- */
.iletisim { padding: clamp(60px, 9vw, 110px) 0; }
.iletisim-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.iletisim-yazi p { color: var(--tebesir-sol); margin-bottom: 14px; max-width: 46ch; }
.iletisim-mail a {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--sari); text-decoration: none;
  border-bottom: 3px dashed rgba(240,176,46,0.5);
}
.iletisim-mail a:hover { border-bottom-style: solid; }
.iletisim-kucuk { font-size: 0.9rem; }
.iletisim-kucuk a { color: var(--turkuaz); }
.form-koyu { background: rgba(243,238,225,0.06); border-color: rgba(243,238,225,0.18); box-shadow: none; }
.form-koyu label { color: var(--tebesir); margin-bottom: 14px; }
.form-koyu input, .form-koyu textarea {
  background: rgba(18,24,49,0.55); border-color: rgba(243,238,225,0.25); color: var(--tebesir);
}
.form-koyu input:focus, .form-koyu textarea:focus { border-color: var(--sari); }

/* ---------- KVKK ---------- */
.kvkk { padding: 50px 0; }
.kvkk summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; }
.kvkk summary::-webkit-details-marker { display: none; }
.kvkk summary::after { content: '▾'; color: var(--kirmizi); font-size: 1.3rem; }
.kvkk h2 { display: inline; font-size: 1.3rem; }
.kvkk-metin { margin-top: 20px; font-size: 0.92rem; color: #4a5063; }
.kvkk-metin p { margin-bottom: 12px; max-width: 78ch; }
.kvkk-metin a { color: var(--kirmizi); }

/* ---------- Alt ---------- */
.alt { padding: 48px 0; }
.alt-izgara { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.alt-logo { height: 24px; margin-bottom: 8px; }
.alt-slogan { font-size: 1.5rem; color: var(--tebesir); }
.kirmizi { color: var(--kirmizi); }
.alt-metin { font-size: 0.85rem; color: var(--tebesir-sol); text-align: right; }

/* ---------- Görünürlük animasyonu ---------- */
.gorunur-bekle { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.gorunur { opacity: 1; transform: none; }

/* ---------- Duyarlılık ---------- */
@media (max-width: 960px) {
  .kartlar { grid-template-columns: 1fr 1fr; }
  .manifesto-izgara { grid-template-columns: 1fr; }
  .foto-bant { max-width: 320px; margin: 0 auto 10px; }
  .iletisim-izgara { grid-template-columns: 1fr; }
  .sozler-izgara { grid-template-columns: 1fr; }
  .soz-ayrac { display: flex; justify-content: center; }
  .belgeler { grid-template-columns: 1fr; }
  .alt-izgara { flex-direction: column; text-align: center; }
  .alt-metin { text-align: center; }
}
@media (max-width: 760px) {
  .menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(13,33,28,0.98);
    border-bottom: 1px solid rgba(243,238,225,0.12);
  }
  .menu.acik { display: flex; }
  .menu a { padding: 15px 28px; border-bottom: 1px solid rgba(243,238,225,0.08); }
  .menu-dugme { display: block; }
  .form-izgara { grid-template-columns: 1fr; }
  .kartlar { grid-template-columns: 1fr; }
  .tahta-cerceve { border-width: 10px; margin-left: 12px; margin-right: 12px; }
  .karalama-ucak { display: none; }
  .dongu-adimlar { flex-direction: column; align-items: center; }
  .adim-ok { transform: rotate(90deg); }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cizgi path, .kalp-cizim { animation: none; stroke-dashoffset: 0; }
  .gorunur-bekle { opacity: 1; transform: none; transition: none; }
  .btn:hover, .kart:hover { transform: none; }
}