/* TOYKAM — tek stil dosyası. Renkler logodan ölçüldü (bkz. CLAUDE.md › Marka). */

:root {
  --lacivert: #15062F;
  --lacivert-2: #1E0B3E;
  --lacivert-3: #2B1754;
  --kirmizi: #FF1200;
  --kirmizi-koyu: #8C0900;
  --kirmizi-yumusak: #FF4B3A;
  --gradyan: linear-gradient(120deg, #FF1200 0%, #C50D00 55%, #8C0900 100%);
  --kagit: #F6F4F9;
  --beyaz: #FFFFFF;
  --metin: #15062F;
  --metin-soluk: #5A5370;
  --cizgi: #E4E0EC;
  --koyu-metin: rgba(255, 255, 255, .74);
  --koyu-cizgi: rgba(255, 255, 255, .12);

  --font-baslik: 'Archivo', system-ui, sans-serif;
  --font-govde: 'Inter', system-ui, sans-serif;

  --kap: 1240px;
  --yaricap: 18px;
  --golge: 0 24px 60px -24px rgba(21, 6, 47, .35);
  --gecis: 220ms cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--beyaz); color: var(--metin);
  font: 400 17px/1.65 var(--font-govde);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-baslik); line-height: 1.08; margin: 0; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--kirmizi); outline-offset: 3px; border-radius: 4px; }
.kap { width: min(100% - 32px, var(--kap)); margin-inline: auto; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--kirmizi); color: #fff; padding: 10px 16px; border-radius: 8px; }
.atla:focus { top: 12px; }

/* ── Butonlar ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px;
  border-radius: 999px; font: 700 15px/1 var(--font-govde); text-decoration: none;
  border: 2px solid transparent; cursor: pointer; transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis), color var(--gecis);
}
.btn svg { width: 18px; height: 18px; transition: transform var(--gecis); }
.btn:hover svg { transform: translateX(3px); }
.btn-ana { background: var(--gradyan); color: #fff; box-shadow: 0 12px 30px -10px rgba(255, 18, 0, .65); }
.btn-ana:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(255, 18, 0, .8); }
.btn-cizgi { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-cizgi:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-koyu { background: var(--lacivert); color: #fff; }
.btn-koyu:hover { background: var(--lacivert-3); }

.ust-baslik {
  display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--font-govde);
  letter-spacing: .14em; text-transform: uppercase; color: var(--kirmizi); margin-bottom: 18px;
}
.ust-baslik::before { content: ''; width: 28px; height: 3px; border-radius: 2px; background: var(--gradyan); }
.koyu .ust-baslik { color: var(--kirmizi-yumusak); }

/* ── Üst bar ──────────────────────────────────────────────── */
.ust {
  position: fixed; inset: 0 0 auto; z-index: 50; transition: background var(--gecis), box-shadow var(--gecis), padding var(--gecis);
  padding: 20px 0;
}
.ust.dolu, .ust.acik { background: rgba(21, 6, 47, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); padding: 12px 0; }
.ust .kap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { height: 34px; width: auto; }
.menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu > li > a {
  display: block; padding: 10px 14px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  border-radius: 10px; transition: background var(--gecis);
}
.menu > li > a:hover, .menu > li > a[aria-current] { background: rgba(255, 255, 255, .09); }
.menu .acilir {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 6px; min-width: 300px;
  background: #fff; border-radius: 16px; padding: 10px; box-shadow: var(--golge); list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transition: opacity var(--gecis), translate var(--gecis), visibility var(--gecis);
}
.menu li:hover > .acilir, .menu li:focus-within > .acilir { opacity: 1; visibility: visible; translate: -50% 0; }
.acilir a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--metin); font-size: 14.5px; font-weight: 600; }
.acilir a:hover { background: var(--kagit); color: var(--kirmizi-koyu); }
.acilir svg { width: 20px; height: 20px; color: var(--kirmizi); flex: none; }
.ust-cta { padding: 11px 20px; font-size: 14px; }
.menu-dugme { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.menu-dugme svg { width: 28px; height: 28px; }

@media (max-width: 1020px) {
  .menu-dugme { display: block; }
  .ust nav { position: fixed; inset: 64px 0 0; background: var(--lacivert); padding: 16px 16px 40px; overflow-y: auto; display: none; }
  .ust.acik nav { display: block; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > li > a { padding: 16px 8px; font-size: 18px; border-bottom: 1px solid var(--koyu-cizgi); border-radius: 0; }
  .menu .acilir { position: static; translate: none; opacity: 1; visibility: visible; background: transparent; box-shadow: none; padding: 4px 0 12px 8px; min-width: 0; }
  .acilir a { color: var(--koyu-metin); font-weight: 500; }
  .acilir a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .ust-cta { display: none; }
}

/* ── Kahraman (ana sayfa) ─────────────────────────────────── */
.kahraman {
  position: relative; min-height: min(100svh, 920px); display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--lacivert); color: #fff; overflow: hidden; isolation: isolate; padding: 140px 0 0;
}
.kahraman-gorsel { position: absolute; inset: 0; z-index: -2; }
.kahraman-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; opacity: .9; }
.kahraman::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(255, 18, 0, .22), transparent 60%),
    linear-gradient(90deg, rgba(21, 6, 47, .97) 0%, rgba(21, 6, 47, .86) 42%, rgba(21, 6, 47, .35) 100%),
    linear-gradient(0deg, rgba(21, 6, 47, 1) 0%, rgba(21, 6, 47, 0) 40%);
}
.kahraman h1 { font-size: clamp(44px, 7.4vw, 104px); font-weight: 900; letter-spacing: -.035em; max-width: 12ch; }
.kahraman h1 .vurgu { background: var(--gradyan); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kahraman .giris { font-size: clamp(17px, 1.6vw, 21px); color: var(--koyu-metin); max-width: 56ch; margin: 28px 0 36px; }
.kahraman .dugmeler { display: flex; flex-wrap: wrap; gap: 14px; }
.rakamlar {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--koyu-cizgi);
}
.rakam { padding: 28px 24px 32px 0; }
.rakam + .rakam { padding-left: 24px; border-left: 1px solid var(--koyu-cizgi); }
.rakam b { display: block; font: 800 clamp(30px, 3.4vw, 46px)/1 var(--font-baslik); letter-spacing: -.03em; }
.rakam span { display: block; margin-top: 10px; color: var(--koyu-metin); font-size: 14.5px; line-height: 1.4; }
@media (max-width: 760px) {
  .rakamlar { grid-template-columns: 1fr 1fr; }
  .rakam:nth-child(3) { padding-left: 0; border-left: 0; }
  .rakam:nth-child(n+3) { border-top: 1px solid var(--koyu-cizgi); }
}

/* ── Sektör şeridi ────────────────────────────────────────── */
.serit { background: var(--gradyan); color: #fff; overflow: hidden; padding: 18px 0; }
.serit-ic { display: flex; gap: 48px; width: max-content; animation: kay 38s linear infinite; }
.serit span { display: inline-flex; align-items: center; gap: 48px; font: 800 18px/1 var(--font-baslik); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.serit span::after { content: ''; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); opacity: .7; }
@keyframes kay { to { transform: translateX(-50%); } }

/* ── Bölümler ─────────────────────────────────────────────── */
.bolum { padding: clamp(80px, 10vw, 136px) 0; }
.bolum.kagit { background: var(--kagit); }
.bolum.koyu { background: var(--lacivert); color: #fff; }
.bolum-bas { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); flex-wrap: wrap; }
.bolum-bas h2 { font-size: clamp(34px, 4.6vw, 62px); font-weight: 800; max-width: 16ch; }
.bolum-bas p { max-width: 46ch; color: var(--metin-soluk); margin: 0; font-size: 18px; }
.koyu .bolum-bas p { color: var(--koyu-metin); }

/* ── Hizmet kartları ──────────────────────────────────────
   Görseller kırmızı-beyaz yapboz illüstrasyonları (eski sitenin dili). Kare görsel üstte,
   metin altta: illüstrasyon kırpılmasın ve üstüne koyu geçiş binip renkleri bulandırmasın. */
.hizmet-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hkart {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  overflow: hidden; text-decoration: none; position: relative;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
a.hkart:hover { transform: translateY(-6px); box-shadow: var(--golge); border-color: transparent; }
.hkart::after { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--gradyan); transition: width 500ms cubic-bezier(.2, .7, .2, 1); }
a.hkart:hover::after, a.hkart:focus-visible::after { width: 100%; }
.hkart-gorsel { display: block; aspect-ratio: 1; overflow: hidden; background: var(--kirmizi); }
.hkart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
a.hkart:hover .hkart-gorsel img { transform: scale(1.06); }
.hkart-govde { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; flex: 1; }
.hkart .no { font: 800 13px/1 var(--font-baslik); letter-spacing: .12em; color: var(--kirmizi); }
.hkart h3 { font-size: 20px; font-weight: 800; }
.hkart p { margin: 0; color: var(--metin-soluk); font-size: 15px; line-height: 1.5; }
.hkart .devam { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 14px; color: var(--kirmizi-koyu); display: inline-flex; gap: 6px; align-items: center; }
.hkart .devam svg { width: 16px; height: 16px; transition: transform var(--gecis); }
a.hkart:hover .devam svg { transform: translateX(4px); }
@media (max-width: 1020px) { .hizmet-izgara { grid-template-columns: 1fr 1fr; } }
/* Telefonda dikey kartlar sayfayı çok uzatıyor: görsel solda küçük kare, metin sağda */
@media (max-width: 560px) {
  .hizmet-izgara { grid-template-columns: 1fr; gap: 12px; }
  .hkart { flex-direction: row; }
  .hkart-gorsel { width: 116px; flex: none; aspect-ratio: auto; }
  .hkart-govde { padding: 16px; gap: 6px; }
  .hkart h3 { font-size: 17px; }
  .hkart p { font-size: 14px; }
  .hkart .devam { display: none; }
}

/* ── Yaklaşım adımları ────────────────────────────────────── */
.adimlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: adim; }
.adim { position: relative; padding: 40px 36px 8px 0; border-top: 1px solid var(--koyu-cizgi); }
.adim + .adim { padding-left: 36px; border-left: 1px solid var(--koyu-cizgi); }
.adim::before {
  counter-increment: adim; content: '0' counter(adim); display: block; font: 900 64px/1 var(--font-baslik);
  background: var(--gradyan); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 22px;
}
.adim h3 { font-size: 30px; font-weight: 800; margin-bottom: 14px; }
.adim p { color: var(--koyu-metin); }
@media (max-width: 860px) { .adimlar { grid-template-columns: 1fr; } .adim + .adim { padding-left: 0; border-left: 0; } }

/* ── Eğitim kartları ──────────────────────────────────────── */
.egitimler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.egitim {
  display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; border-radius: var(--yaricap);
  text-decoration: none; border: 1px solid var(--cizgi); transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.egitim:hover { transform: translateY(-4px); box-shadow: var(--golge); border-color: transparent; }
.egitim .ikon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 18, 0, .08); color: var(--kirmizi); transition: background var(--gecis), color var(--gecis); }
.egitim:hover .ikon { background: var(--gradyan); color: #fff; }
.egitim .ikon svg { width: 26px; height: 26px; }
.egitim h3 { font-size: 19px; font-weight: 800; }
.egitim p { margin: 0; color: var(--metin-soluk); font-size: 15px; line-height: 1.5; }
.egitim .devam { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--kirmizi-koyu); display: inline-flex; gap: 6px; align-items: center; }
.egitim .devam svg { width: 16px; height: 16px; }
@media (max-width: 1020px) { .egitimler { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .egitimler { grid-template-columns: 1fr; } }

/* ── Bölünmüş vurgu (metin + görsel) ──────────────────────── */
.bolunmus { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.bolunmus h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 800; margin-bottom: 22px; }
.bolunmus .metin p { color: var(--metin-soluk); font-size: 18px; }
.koyu .bolunmus .metin p { color: var(--koyu-metin); }
.cerceve { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--golge); }
.cerceve img { width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; }
.cerceve .rozet {
  position: absolute; left: 20px; bottom: 20px; right: 20px; background: rgba(21, 6, 47, .82); backdrop-filter: blur(10px);
  color: #fff; border-radius: 14px; padding: 16px 20px; font-weight: 600; font-size: 15px; border-left: 4px solid var(--kirmizi);
}
@media (max-width: 900px) { .bolunmus { grid-template-columns: 1fr; } }

.tik-liste { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
.tik-liste li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.tik-liste li::before {
  content: ''; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--gradyan)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ── SSS ──────────────────────────────────────────────────── */
.sss { max-width: 880px; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.koyu .sss details { border-color: var(--koyu-cizgi); }
.sss summary {
  list-style: none; cursor: pointer; padding: 26px 56px 26px 0; position: relative;
  font: 700 clamp(18px, 1.7vw, 21px)/1.35 var(--font-baslik); letter-spacing: -.01em;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 34px; height: 34px; translate: 0 -50%; border-radius: 50%;
  background: var(--kagit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF1200' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform var(--gecis);
}
.sss details[open] summary::after { transform: rotate(45deg); }
.sss details p { color: var(--metin-soluk); padding-bottom: 26px; margin: 0; max-width: 72ch; }

/* ── İletişim ─────────────────────────────────────────────── */
.iletisim { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.iletisim h2 { font-size: clamp(36px, 4.6vw, 62px); font-weight: 800; margin-bottom: 22px; }
.iletisim .metin > p { color: var(--koyu-metin); font-size: 18px; max-width: 44ch; }
.kanallar { display: grid; gap: 14px; margin-top: 36px; }
.kanal {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--koyu-cizgi); transition: border-color var(--gecis), background var(--gecis);
}
.kanal:hover { border-color: rgba(255, 18, 0, .6); background: rgba(255, 255, 255, .04); }
.kanal .ikon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--gradyan); flex: none; }
.kanal .ikon svg { width: 22px; height: 22px; }
.kanal small { display: block; color: var(--koyu-metin); font-size: 13px; }
.kanal b { font-size: 18px; }
@media (max-width: 900px) { .iletisim { grid-template-columns: 1fr; } }

.form { background: #fff; color: var(--metin); border-radius: 24px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.form h3 { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.form > p { color: var(--metin-soluk); font-size: 15px; }
.alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.alan { display: grid; gap: 7px; }
.alan.genis { grid-column: 1 / -1; }
.alan label { font-weight: 600; font-size: 14px; }
.alan label .zorunlu { color: var(--kirmizi); }
.alan input, .alan select, .alan textarea {
  width: 100%; font: 400 16px/1.4 var(--font-govde); color: var(--metin); padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--cizgi); background: var(--kagit); transition: border-color var(--gecis), background var(--gecis);
}
.alan textarea { min-height: 130px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--kirmizi); background: #fff; }
.onay { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--metin-soluk); grid-column: 1 / -1; }
.onay input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--kirmizi); flex: none; }
.bal { position: absolute; left: -9999px; }
.form .btn { margin-top: 22px; width: 100%; justify-content: center; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form-durum { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-weight: 600; font-size: 15px; display: none; }
.form-durum.ok { display: block; background: #E8F7EE; color: #0E6B34; }
.form-durum.hata { display: block; background: #FFEDEB; color: var(--kirmizi-koyu); }
.cf-turnstile { margin-top: 18px; }
@media (max-width: 560px) { .alanlar { grid-template-columns: 1fr; } }

/* ── Alt sayfa başlığı ────────────────────────────────────── */
.sayfa-bas { position: relative; background: var(--lacivert); color: #fff; padding: 168px 0 clamp(64px, 8vw, 104px); overflow: hidden; isolation: isolate; }
.sayfa-bas .arka { position: absolute; inset: 0; z-index: -2; }
.sayfa-bas .arka img { width: 100%; height: 100%; object-fit: cover; }
.sayfa-bas::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 80% at 90% 10%, rgba(255, 18, 0, .25), transparent 60%), linear-gradient(90deg, rgba(21, 6, 47, .97) 0%, rgba(21, 6, 47, .82) 55%, rgba(21, 6, 47, .45) 100%);
}
.yol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--koyu-metin); margin-bottom: 28px; list-style: none; padding: 0; }
.yol a { text-decoration: none; }
.yol a:hover { color: #fff; }
.yol li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.sayfa-bas h1 { font-size: clamp(38px, 5.6vw, 76px); font-weight: 900; max-width: 17ch; letter-spacing: -.03em; }
.sayfa-bas .giris { font-size: clamp(17px, 1.5vw, 20px); color: var(--koyu-metin); max-width: 60ch; margin-top: 24px; }

/* Yapbozlu başlık: illüstrasyon karartılmadan sağda durur */
.yapboz-bas::before { background: radial-gradient(55% 90% at 82% 45%, rgba(255, 18, 0, .26), transparent 65%), var(--lacivert); }
.bas-izgara { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.bas-gorsel img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75); }
@media (max-width: 900px) {
  .bas-izgara { grid-template-columns: 1fr; }
  .bas-gorsel { max-width: 520px; }
}

/* ── Alt sayfa gövdesi ────────────────────────────────────── */
.govde { display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.govde .metin p { font-size: 18.5px; color: #2D2541; line-height: 1.75; }
.yan-kart { position: sticky; top: 100px; background: var(--lacivert); color: #fff; border-radius: 20px; padding: 30px; overflow: hidden; isolation: isolate; }
.yan-kart::before { content: ''; position: absolute; inset: auto -40% -60% auto; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 18, 0, .45), transparent 65%); z-index: -1; }
.yan-kart h3 { font-size: 23px; font-weight: 800; margin-bottom: 10px; }
.yan-kart p { color: var(--koyu-metin); font-size: 15px; }
.yan-kart .btn { width: 100%; justify-content: center; margin-top: 8px; }
.yan-kart .tel { display: block; text-align: center; margin-top: 14px; color: var(--koyu-metin); text-decoration: none; font-weight: 600; font-size: 15px; }
.yan-kart .tel:hover { color: #fff; }
@media (max-width: 900px) { .govde { grid-template-columns: 1fr; } .yan-kart { position: static; } }

.blok { margin-top: clamp(56px, 7vw, 96px); }
.blok > h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; margin-bottom: 32px; }
.ozellikler { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ozellik { padding: 28px; border-radius: var(--yaricap); background: var(--kagit); border: 1px solid transparent; transition: border-color var(--gecis), background var(--gecis), transform var(--gecis); }
.ozellik:hover { background: #fff; border-color: var(--cizgi); transform: translateY(-3px); }
.ozellik .ikon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--gradyan); color: #fff; margin-bottom: 18px; }
.ozellik .ikon svg { width: 24px; height: 24px; }
.ozellik h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.ozellik p { margin: 0; color: var(--metin-soluk); font-size: 15.5px; line-height: 1.55; }
.ozellik ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ozellik ul li { font-size: 14.5px; font-weight: 600; padding-left: 18px; position: relative; }
.ozellik ul li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--kirmizi); transform: rotate(45deg); }

.etiketler { display: flex; flex-wrap: wrap; gap: 10px; }
.etiketler span { padding: 12px 20px; border-radius: 999px; background: var(--lacivert); color: #fff; font-weight: 600; font-size: 15px; }

.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ikili > div { padding: 34px; border-radius: 20px; background: var(--kagit); }
.ikili > div:last-child { background: var(--lacivert); color: #fff; }
.ikili h3 { font-size: 23px; font-weight: 800; margin-bottom: 4px; }
.ikili .tik-liste { margin-bottom: 0; }
@media (max-width: 760px) { .ikili { grid-template-columns: 1fr; } }

.numarali { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.numarali li { counter-increment: s; display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--cizgi); font-weight: 600; font-size: 17px; }
.numarali li::before { content: counter(s, decimal-leading-zero); font: 800 15px/1.6 var(--font-baslik); color: var(--kirmizi); min-width: 26px; }

.alinti {
  position: relative; padding: clamp(36px, 5vw, 56px); border-radius: 24px; background: var(--gradyan); color: #fff;
  font: 800 clamp(24px, 2.8vw, 36px)/1.25 var(--font-baslik); letter-spacing: -.02em; overflow: hidden;
}
.alinti::after { content: '”'; position: absolute; right: 24px; top: -30px; font-size: 220px; opacity: .15; line-height: 1; }

.vurgu-kutu { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding: clamp(32px, 5vw, 56px); border-radius: 24px; background: var(--lacivert); color: #fff; }
.vurgu-kutu h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; margin-bottom: 18px; }
.vurgu-kutu p { color: var(--koyu-metin); }
.vurgu-kutu .not { font-style: italic; color: #fff; border-left: 3px solid var(--kirmizi); padding-left: 16px; margin-top: 8px; }
@media (max-width: 860px) { .vurgu-kutu { grid-template-columns: 1fr; } }

.egitim-detay { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.egitim-detay > div { padding: 34px; border-radius: 20px; border: 1px solid var(--cizgi); }
.egitim-detay > div:last-child { background: var(--kagit); border-color: transparent; }
.egitim-detay h2 { font-size: 26px; font-weight: 800; margin-bottom: 14px; }
.sertifika { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: var(--lacivert); color: #fff; font-weight: 700; }
.sertifika svg { width: 30px; height: 30px; color: var(--kirmizi-yumusak); flex: none; }
@media (max-width: 860px) { .egitim-detay { grid-template-columns: 1fr; } }

/* ── CTA şeridi ───────────────────────────────────────────── */
.cta { padding: 0 0 clamp(80px, 10vw, 120px); }
.cta-ic {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: clamp(36px, 5vw, 64px); border-radius: 28px; background: var(--lacivert); color: #fff; overflow: hidden; isolation: isolate;
}
.cta-ic::before { content: ''; position: absolute; inset: -50% -10% auto auto; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255, 18, 0, .5), transparent 62%); z-index: -1; }
.cta h2 { font-size: clamp(30px, 3.8vw, 52px); font-weight: 800; max-width: 18ch; }
.cta p { color: var(--koyu-metin); margin: 14px 0 0; max-width: 52ch; }

/* ── Alt bilgi ────────────────────────────────────────────── */
.alt { background: #0D031F; color: var(--koyu-metin); padding: 80px 0 32px; font-size: 15px; }
.alt-izgara { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.alt img { height: 34px; width: auto; margin-bottom: 20px; }
.alt h4 { color: #fff; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.alt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.alt a { text-decoration: none; }
.alt a:hover { color: #fff; }
.alt-son { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--koyu-cizgi); margin-top: 56px; padding-top: 28px; font-size: 14px; }
@media (max-width: 860px) { .alt-izgara { grid-template-columns: 1fr 1fr; } .alt-izgara > div:first-child { grid-column: 1 / -1; } }

/* ── Fareyi takip eden ışık ─────────────────────────────────
   Koyu bölümlerde imlecin altında yumuşak bir kırmızı parıltı. Konumu site.js yazar (--mx/--my);
   @property sayesinde değişken animasyonlanır, ışık imleci hafif gecikmeyle izler.
   Dokunmatik cihazlarda ve "hareketi azalt" tercihinde kapalı. */
@property --mx { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --my { syntax: '<length-percentage>'; inherits: false; initial-value: 40%; }
.isikli { position: relative; isolation: isolate; transition: --mx 260ms ease-out, --my 260ms ease-out; }
.isikli::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(160px circle at var(--mx) var(--my), rgba(255, 75, 58, .30), transparent 70%),
    radial-gradient(620px circle at var(--mx) var(--my), rgba(255, 18, 0, .26), transparent 62%);
  opacity: 0; transition: opacity 500ms ease;
}
.isikli.isik-acik::after { opacity: 1; }

/* ── Kaydırınca beliren öğeler ────────────────────────────── */
.js .belir { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(.2, .7, .2, 1), transform 800ms cubic-bezier(.2, .7, .2, 1); }
.js .belir.gorundu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .serit-ic { animation: none; }
  .js .belir { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0ms !important; }
}