/* Etkinlik — etkinlikapp.com tanıtım sitesi ve hukuki belgelerin ortak biçimi.
   Derleme aracı yok: bu dosya doğrudan sunuluyor (express.static).
   AGENTS.md tasarım dili bağlayıcı: sıcak, sakin, editorial. Gradient minimumda,
   yeşil yalnızca doğrulama/onay durumunda. */

:root {
  --zemin: #FAF6F0;
  --kart: #FFFDFA;
  --cizgi: #EDE5D8;
  --cizgi-koyu: #DFD2BC;
  --bronz: #A8814F;          /* dekoratif: çizgi, rakam, çerçeve */
  --bronz-koyu: #8A6839;     /* YAZI ve düğme zemini burada — beyaz #A8814F üstünde okunmuyor */
  --sampanya: #EFE3CE;
  --sampanya-acik: #F7EFE2;
  --murekkep: #211F1B;
  /* AGENTS.md ikincil rengi #7A7266; zemin üstünde kontrastı 4.4 çıkıyor,
     yani AA sınırının altında. Gövde metni için bir tık koyultuldu (5.4). */
  --ikincil: #6B6459;
  --solgun: #8A8272;
  --onay: #2E6B4F;           /* YALNIZCA doğrulanmış/onaylı durumu */
  --sar: 1140px;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font: 400 17px/1.65 var(--sans);
  overflow-x: hidden;              /* yatay kaydırma olmasın */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--bronz-koyu); }
a:hover { color: var(--murekkep); }

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

/* ——— Yerleşim ——— */
.sar { max-width: var(--sar); margin: 0 auto; padding: 0 24px; }
.bolum { padding: 76px 0; }
.bolum-sampanya { background: var(--sampanya-acik); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }

/* ——— Tipografi ——— */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--murekkep); }
h1 { font-size: clamp(34px, 5.6vw, 58px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 18px; }
h2 { font-size: clamp(27px, 3.6vw, 38px); line-height: 1.16; letter-spacing: -.01em; margin: 0 0 14px; }
h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 1.35; margin: 0 0 8px; letter-spacing: -.005em; }
h4 { font-family: var(--sans); font-weight: 600; font-size: 15px; margin: 0 0 6px; }
p { margin: 0 0 16px; }
.ikincil, p.ikincil { color: var(--ikincil); }

.ust {
  font: 600 12px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bronz-koyu); margin: 0 0 14px;
}
.giris-yazi { font-size: clamp(17px, 2vw, 19px); color: var(--ikincil); max-width: 62ch; }
.dar { max-width: 720px; }

/* ——— Üst bar ——— */
.ustbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 246, 240, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--cizgi);
}
.ustbar-ic { display: flex; align-items: center; gap: 16px; height: 68px; }
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--murekkep); }
.marka img { width: 34px; height: 34px; border-radius: 9px; }
.marka span { font-family: var(--serif); font-size: 23px; letter-spacing: -.01em; }
.ustbar nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ustbar nav a {
  text-decoration: none; color: var(--ikincil); font-size: 15px; font-weight: 500;
  padding: 8px 12px; border-radius: 999px;
}
.ustbar nav a:hover { color: var(--murekkep); background: var(--sampanya-acik); }
.ustbar nav a[aria-current="page"] { color: var(--murekkep); background: var(--sampanya); }
.ustbar nav a.dugme { color: #fff; }
.menu-dugme { display: none; margin-left: auto; background: none; border: 1px solid var(--cizgi-koyu);
  border-radius: 10px; padding: 9px 11px; cursor: pointer; color: var(--murekkep); }

/* ——— Düğmeler ——— */
.dugme {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--sans); text-decoration: none;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dugme-birincil { background: var(--bronz-koyu); color: #fff; }
.dugme-birincil:hover { background: #6F5329; color: #fff; }
.dugme-ikincil { background: transparent; color: var(--bronz-koyu); border-color: var(--cizgi-koyu); }
.dugme-ikincil:hover { background: var(--sampanya-acik); color: var(--murekkep); }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ——— Kapak ——— */
.kapak { padding: 64px 0 72px; }
.kapak-ic { display: grid; grid-template-columns: 1.05fr .85fr; gap: 60px; align-items: center; }
.kapak-gorsel { position: relative; }
.kapak-gorsel img { border-radius: 20px; width: 100%; height: auto; }
.kapak-gorsel::after {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid var(--bronz); border-radius: 20px; z-index: -1;
}
.kapak-genis img { border-radius: 20px; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }

/* ——— Kartlar ——— */
.kutu {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 16px; padding: 22px 24px; margin: 24px 0;
}
.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 18px; padding: 26px 26px 28px; height: 100%;
}
.izgara { display: grid; gap: 22px; }
.izgara-2 { grid-template-columns: repeat(2, 1fr); }
.izgara-3 { grid-template-columns: repeat(3, 1fr); }
.izgara-4 { grid-template-columns: repeat(4, 1fr); }

/* Kitle kartı (ana sayfadaki iki büyük yol ayrımı) */
.yol-kart {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 20px; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.yol-kart:hover { border-color: var(--bronz); transform: translateY(-2px); color: inherit; }
.yol-kart img { width: 100%; height: 220px; object-fit: cover; }
.yol-kart-ic { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.yol-kart-ic p { color: var(--ikincil); font-size: 16px; }
.yol-bag { margin-top: auto; color: var(--bronz-koyu); font-weight: 600; font-size: 15px; }
.yol-bag::after { content: " →"; }

/* Numaralı adımlar */
.adimlar { display: grid; gap: 26px; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0; }
.adimlar li { border-top: 2px solid var(--sampanya); padding-top: 18px; }
.adimlar .no { font-family: var(--serif); font-size: 30px; color: var(--bronz); line-height: 1; display: block; margin-bottom: 10px; }
.adimlar p { color: var(--ikincil); font-size: 15.5px; margin: 0; }

/* Sihirbaz şeridi (5 adım) */
.serit { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.serit li { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 18px 16px; }
.serit .no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--sampanya); color: var(--bronz-koyu);
  font: 600 13px/1 var(--sans); margin-bottom: 10px; }
.serit strong { display: block; font-size: 15px; margin-bottom: 4px; }
.serit p { color: var(--ikincil); font-size: 14px; margin: 0; }

/* Görsel kart ızgaraları (tür / kategori) */
.gorsel-kart { border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; background: var(--kart); }
.gorsel-kart img { width: 100%; height: 150px; object-fit: cover; }
.gorsel-kart span { display: block; padding: 12px 14px 14px; font-size: 14.5px; font-weight: 500; }
.gorsel-kart.bos { display: flex; align-items: center; justify-content: center; min-height: 150px;
  background: var(--sampanya-acik); border-style: dashed; }
.gorsel-kart.bos span { padding: 0; color: var(--ikincil); text-align: center; }

/* Madde listeleri */
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.liste li { display: flex; gap: 12px; align-items: flex-start; color: var(--ikincil); font-size: 16px; }
.liste li strong { color: var(--murekkep); font-weight: 600; }
.im { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.im-var { color: var(--bronz-koyu); }
.im-yok { color: var(--solgun); }
.im-onay { color: var(--onay); }   /* yalnızca doğrulama bağlamında */

/* Sınır tablosu: platform ne yapar / ne yapmaz */
.sinir { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sinir .kart h3 { margin-bottom: 16px; }

/* Alıntı / vurgu bloğu */
.vurgu {
  border-left: 3px solid var(--bronz); background: var(--sampanya-acik);
  padding: 20px 24px; border-radius: 0 14px 14px 0; margin: 26px 0;
}
.vurgu p:last-child { margin-bottom: 0; }
.vurgu strong { color: var(--murekkep); }

/* İki sütunlu metin + görsel */
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ikili img { border-radius: 18px; width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.ikili-ters .metin { order: 2; }

/* Rozet */
.rozet {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--kart); border: 1px solid var(--cizgi-koyu); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 500; color: var(--ikincil);
}
.rozet-onay { color: var(--onay); border-color: #BFD8CA; background: #F2F8F4; }

/* Kapanış çağrısı */
.cagri { background: var(--sampanya); border-radius: 24px; padding: 54px 44px; text-align: center; }
.cagri h2 { margin-bottom: 12px; }
.cagri p { color: var(--ikincil); max-width: 60ch; margin-left: auto; margin-right: auto; }
.cagri .dugmeler { justify-content: center; }

/* ——— Alt bilgi ——— */
.altbilgi { border-top: 1px solid var(--cizgi); padding: 48px 0 60px; margin-top: 20px; }
.altbilgi-ic { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.altbilgi h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--bronz-koyu); margin-bottom: 12px; }
.altbilgi ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.altbilgi a { text-decoration: none; color: var(--ikincil); font-size: 15px; }
.altbilgi a:hover { color: var(--murekkep); text-decoration: underline; }
.altbilgi .kucuk { font-size: 14px; color: var(--solgun); }
.altbilgi-son { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--cizgi);
  font-size: 13.5px; color: var(--solgun); }

/* ——— Hukuki belge sayfaları (gizlilik / kosullar) ——— */
/* Bu sınıflar App Store'un baktığı sayfalarda kullanılıyor; adları değişmedi. */
.kap { max-width: 760px; margin: 0 auto; padding: 56px 24px 84px; }
.kap h1 { font-size: clamp(30px, 4.4vw, 42px); }
.kap h2 { font-family: var(--serif); font-size: 24px; margin: 40px 0 12px; }
.kap h3 { font-size: 16px; margin: 24px 0 6px; }
.kap p, .kap li { color: var(--ikincil); font-size: 16.5px; }
.kap ul { padding-left: 20px; }
.kap li { margin-bottom: 6px; }
.kap strong, .kap em { color: var(--murekkep); }
.tarih { font-size: 14px; color: var(--solgun); margin: 0 0 30px; }
.kap footer { margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--cizgi);
  font-size: 14px; color: var(--solgun); }

/* ——— Duyarlı ——— */
@media (max-width: 960px) {
  .kapak-ic, .ikili { grid-template-columns: 1fr; gap: 34px; }
  .ikili-ters .metin { order: 0; }
  .izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .izgara-3 { grid-template-columns: repeat(2, 1fr); }
  .adimlar { grid-template-columns: repeat(2, 1fr); }
  .serit { grid-template-columns: repeat(2, 1fr); }
  .altbilgi-ic { grid-template-columns: 1fr 1fr; }
  .kapak-gorsel::after { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .bolum { padding: 54px 0; }
  .sar { padding: 0 20px; }
  .menu-dugme { display: inline-flex; }
  .ustbar nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--kart); border-bottom: 1px solid var(--cizgi);
    padding: 12px 20px 18px;
  }
  .ustbar nav.acik { display: flex; }
  .ustbar nav a { padding: 12px 14px; border-radius: 10px; font-size: 16px; }
  .ustbar nav a.dugme { justify-content: center; margin-top: 8px; }
  .sinir, .izgara-2 { grid-template-columns: 1fr; }
  .yol-kart img { height: 180px; }
  .cagri { padding: 38px 24px; border-radius: 20px; }
  .kart { padding: 22px; }
  .altbilgi-ic { grid-template-columns: 1fr; gap: 28px; }
  .kap { padding: 40px 20px 64px; }
}

@media (max-width: 420px) {
  .izgara-4, .izgara-3, .adimlar, .serit { grid-template-columns: 1fr; }
  .gorsel-kart img { height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ——— App Store çağrısı ———
   Uygulama 18 Eylül 2026'da yayına girdi; site o güne kadar yalnızca iki
   açıklama sayfasına yönlendiriyordu. Reklam trafiği buraya düşeceği için
   birincil eylem artık indirme.

   Apple'ın resmî rozet görselini TAŞIMIYORUZ: Identity Guidelines rozetin
   birebir kullanılmasını ister, benzerinin üretilmesini yasaklar. Bu yüzden
   rozete benzemeyen, sitenin kendi dilinde bir bağlantı düğmesi yapıldı —
   Apple logosu + düz metin, izin verilen biçim. */
.dugme-store {
  background: var(--murekkep); color: #fff; gap: 10px;
  padding: 15px 26px;
}
.dugme-store:hover { background: #000; color: #fff; }
.dugme-store svg { flex: none; }
.dugme-store b { font-weight: 600; display: block; font-size: 15px; line-height: 1.15; }
.dugme-store span { display: block; font-size: 11.5px; line-height: 1.2; opacity: .72; font-weight: 400; }
.store-yazi { text-align: left; }

/* Mağaza satırı: düğme + küçük güven notu */
.store-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.store-not { font-size: 13.5px; color: var(--ikincil); }

@media (max-width: 720px) {
  .store-satir { gap: 10px; }
  .dugme-store { width: 100%; justify-content: center; }
  .store-yazi { text-align: left; }
}

/* ——— Firma çağrı şeridi ———
   Ana sayfada arz tarafına ayrılmış tek blok. Müşteri akışından görsel
   olarak ayrılsın diye mürekkep zemin: sayfada başka koyu bölüm yok,
   göz doğrudan buraya düşüyor. */
.bolum-firma { background: var(--murekkep); color: #fff; }
.bolum-firma .ust { color: var(--bronz); }
.bolum-firma h2 { color: #fff; }
.bolum-firma .giris-yazi { color: rgba(255,255,255,0.80); }
.bolum-firma .kucuk { color: rgba(255,255,255,0.62); }
.bolum-firma .kucuk a { color: var(--bronz); }
.bolum-firma .dugme-birincil { background: var(--bronz); color: var(--murekkep); }
.bolum-firma .dugme-birincil:hover { background: #C29A63; color: var(--murekkep); }
.bolum-firma .dugme-ikincil { color: #fff; border-color: rgba(255,255,255,0.32); }
.bolum-firma .dugme-ikincil:hover { background: rgba(255,255,255,0.08); color: #fff; }

.firma-serit { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.firma-serit-eylem { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

@media (max-width: 860px) {
  .firma-serit { grid-template-columns: 1fr; gap: 26px; }
  .firma-serit-eylem { align-self: stretch; }
  .firma-serit-eylem .dugme { width: 100%; justify-content: center; }
}