/* ===== Tahapi Ajansı - Ana Stil ===== */
:root {
  --bosluk-1: .5rem; --bosluk-2: 1rem; --bosluk-3: 1.5rem;
  --bosluk-4: 2rem; --bosluk-6: 3rem; --bosluk-8: 4rem; --bosluk-12: 6rem;

  --yazi-sm: .9375rem; --yazi-md: 1.0625rem; --yazi-lg: 1.25rem;
  --yazi-xl: clamp(1.5rem, 3vw, 2rem); --yazi-2xl: clamp(2rem, 5vw, 3.25rem);

  --kose-sm: 8px; --kose-md: 14px; --kose-lg: 22px;
  --sure-normal: 220ms; --egri: cubic-bezier(.2,.8,.2,1);
  --kapsayici: 1140px;

  --kat-yapiskan: 100; --kat-acilir: 200; --kat-modal: 300;

  --zemin: #f8fafc;
  --yuzey: #eef2f7;
  --vurgu-zemin: #1e293b;
  --cizgi: #e2e8f0;
  --metin: #1e293b;
  --sonuk: #64748b;
  --vurgu: #2563eb;
  --vurgu-koyu: #1d4ed8;
  --vurgu-acik: #dbeafe;
  --hata: #dc2626;
  --basari: #16a34a;
  --beyaz: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--yazi-md);
  line-height: 1.65;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--vurgu); text-decoration: none; }
a:hover { color: var(--vurgu-koyu); }

.kapsayici {
  max-width: var(--kapsayici);
  margin: 0 auto;
  padding: 0 var(--bosluk-4);
}

.atla {
  position: absolute; left: -9999px; top: 0;
  background: var(--vurgu); color: #fff; padding: var(--bosluk-2);
  z-index: var(--kat-modal);
}
.atla:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}

/* ===== Üst Bar ===== */
.ust {
  position: sticky; top: 0; z-index: var(--kat-yapiskan);
  background: rgba(248, 250, 252, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--sure-normal) var(--egri);
}
.ust--kucuk { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08); }

.ust__ic {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px; gap: var(--bosluk-4);
}

.ust__logo {
  display: flex; align-items: baseline; gap: var(--bosluk-1);
  color: var(--metin); font-weight: 700;
}
.ust__logo-marka { font-size: 1.5rem; letter-spacing: -.02em; }
.ust__logo-alt { font-size: var(--yazi-sm); color: var(--vurgu); font-weight: 600; }

.ust__menu {
  display: flex; align-items: center; gap: var(--bosluk-4);
}

.ust__baglanti {
  color: var(--metin); font-weight: 500; font-size: var(--yazi-sm);
  position: relative; padding: var(--bosluk-1) 0;
}
.ust__baglanti::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--vurgu);
  transition: width var(--sure-normal) var(--egri);
}
.ust__baglanti:hover { color: var(--vurgu); }
.ust__baglanti:hover::after { width: 100%; }
.ust__baglanti.a--aktif { color: var(--vurgu); font-weight: 600; }
.ust__baglanti.a--aktif::after { width: 100%; }

.ust__buton {
  background: var(--vurgu); color: #fff; font-weight: 600;
  padding: .65rem 1.4rem; border-radius: var(--kose-sm);
  transition: background var(--sure-normal) var(--egri), transform var(--sure-normal) var(--egri);
}
.ust__buton:hover { background: var(--vurgu-koyu); color: #fff; transform: translateY(-1px); }

.ust__menu-buton {
  display: none; width: 44px; height: 44px; border: none; background: none;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.ust__menu-buton span {
  display: block; width: 24px; height: 2px; background: var(--metin);
  transition: transform var(--sure-normal) var(--egri), opacity var(--sure-normal) var(--egri);
}
.ust__menu-buton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ust__menu-buton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ust__menu-buton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Butonlar ===== */
.buton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.8rem; border-radius: var(--kose-sm);
  font-weight: 600; font-size: var(--yazi-sm); cursor: pointer;
  border: 2px solid transparent; transition: all var(--sure-normal) var(--egri);
  min-height: 44px;
}
.buton--birincil { background: var(--vurgu); color: #fff; }
.buton--birincil:hover { background: var(--vurgu-koyu); color: #fff; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(37,99,235,.2); }
.buton--ikincil { background: transparent; color: var(--vurgu); border-color: var(--vurgu); }
.buton--ikincil:hover { background: var(--vurgu-acik); color: var(--vurgu-koyu); }

/* ===== Hero ===== */
.hero {
  padding: var(--bosluk-12) 0;
  background: linear-gradient(135deg, var(--zemin) 0%, var(--vurgu-acik) 100%);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -20%; right: -10%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
}
.hero__ic {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--bosluk-8);
  align-items: center; position: relative; z-index: 1;
}
.hero__rozet {
  display: inline-block; background: var(--vurgu-acik); color: var(--vurgu-koyu);
  padding: .4rem 1rem; border-radius: 999px; font-size: var(--yazi-sm);
  font-weight: 600; margin-bottom: var(--bosluk-3);
}
.hero__baslik {
  font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1;
  letter-spacing: -.02em; margin-bottom: var(--bosluk-3);
}
.hero__baslik span { color: var(--vurgu); }
.hero__alt {
  font-size: var(--yazi-lg); color: var(--sonuk);
  max-width: 55ch; margin-bottom: var(--bosluk-4);
}
.hero__eylem { display: flex; gap: var(--bosluk-2); flex-wrap: wrap; margin-bottom: var(--bosluk-6); }
.hero__guven { display: flex; gap: var(--bosluk-6); flex-wrap: wrap; }
.hero__guven span { display: flex; flex-direction: column; }
.hero__guven strong { font-size: var(--yazi-xl); color: var(--metin); }
.hero__gorsel-kutu {
  border-radius: var(--kose-lg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 48px rgba(0,0,0,.12);
  max-height: 480px;
}
.hero__gorsel { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; }

/* ===== Bölümler ===== */
.bolum { padding: var(--bosluk-12) 0; }
.bolum--yuzey { background: var(--yuzey); }
.bolum--vurgu { background: var(--vurgu-zemin); }

.bolum__baslik { text-align: center; max-width: 700px; margin: 0 auto var(--bosluk-8); }
.bolum__rozet {
  display: inline-block; color: var(--vurgu); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: var(--yazi-sm);
  margin-bottom: var(--bosluk-2);
}
.bolum__baslik-buyuk {
  font-size: var(--yazi-2xl); line-height: 1.15; letter-spacing: -.02em;
  margin-bottom: var(--bosluk-2);
}
.bolum__alt { color: var(--sonuk); font-size: var(--yazi-lg); }
.bolum__eylem { text-align: center; margin-top: var(--bosluk-6); }

/* ===== Hizmet Kartları ===== */
.hizmet-izgara {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bosluk-4);
}
.hizmet-izgara--genis { grid-template-columns: repeat(3, 1fr); }

.hizmet-kart {
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--kose-md); padding: var(--bosluk-4);
  transition: transform var(--sure-normal) var(--egri), border-color var(--sure-normal) var(--egri), box-shadow var(--sure-normal) var(--egri);
}
.hizmet-kart:hover {
  transform: translateY(-2px); border-color: var(--vurgu);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}
.hizmet-kart__ikon {
  width: 52px; height: 52px; border-radius: var(--kose-sm);
  background: var(--vurgu-acik); color: var(--vurgu);
  display: grid; place-items: center; margin-bottom: var(--bosluk-3);
}
.hizmet-kart__ikon svg { width: 26px; height: 26px; }
.hizmet-kart__baslik { font-size: var(--yazi-lg); margin-bottom: var(--bosluk-2); }
.hizmet-kart__metin { color: var(--sonuk); font-size: var(--yazi-sm); }

/* ===== Proje Kartları ===== */
.proje-izgara {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bosluk-4);
}
.proje-kart {
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--kose-md); overflow: hidden;
  transition: transform var(--sure-normal) var(--egri), box-shadow var(--sure-normal) var(--egri);
}
.proje-kart:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}
.proje-kart__gorsel-kutu { overflow: hidden; }
.proje-kart__gorsel { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--sure-normal) var(--egri); }
.proje-kart:hover .proje-kart__gorsel { transform: scale(1.03); }
.proje-kart__ic { padding: var(--bosluk-3); }
.proje-kart__kategori {
  display: inline-block; color: var(--vurgu); font-size: var(--yazi-sm);
  font-weight: 600; margin-bottom: var(--bosluk-1);
}
.proje-kart__baslik { font-size: var(--yazi-lg); margin-bottom: var(--bosluk-1); }
.proje-kart__metin { color: var(--sonuk); font-size: var(--yazi-sm); }

/* ===== Vurgu Bölümü ===== */
.vurgu-ic { text-align: center; max-width: 700px; margin: 0 auto; }
.vurgu-baslik { color: #fff; font-size: var(--yazi-2xl); margin-bottom: var(--bosluk-2); }
.vurgu-metin { color: #cbd5e1; font-size: var(--yazi-lg); margin-bottom: var(--bosluk-4); }
.vurgu-eylem { display: flex; gap: var(--bosluk-2); justify-content: center; flex-wrap: wrap; }
.vurgu-eylem .buton--birincil { background: #fff; color: var(--vurgu-koyu); }
.vurgu-eylem .buton--birincil:hover { background: var(--vurgu-acik); }
.vurgu-eylem .buton--ikincil { color: #fff; border-color: #fff; }
.vurgu-eylem .buton--ikincil:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ===== Sayfa Hero ===== */
.sayfa-hero {
  padding: var(--bosluk-8) 0 var(--bosluk-6);
  background: linear-gradient(135deg, var(--zemin) 0%, var(--vurgu-acik) 100%);
  text-align: center;
}
.sayfa-hero__baslik {
  font-size: var(--yazi-2xl); line-height: 1.15; letter-spacing: -.02em;
  max-width: 800px; margin: 0 auto var(--bosluk-2);
}
.sayfa-hero__alt { color: var(--sonuk); font-size: var(--yazi-lg); max-width: 700px; margin: 0 auto; }
.sayfa-hero__eylem { margin-top: var(--bosluk-4); }

/* ===== İçerik İki Sütun ===== */
.icerik-iki {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-8);
  align-items: center;
}
.icerik-iki__metin p { margin-bottom: var(--bosluk-3); color: var(--sonuk); }
.icerik-iki__metin .icerik-iki__ilk { color: var(--metin); font-size: var(--yazi-lg); }
.icerik-iki__gorsel-kutu { border-radius: var(--kose-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 48px rgba(0,0,0,.12); }
.icerik-iki__gorsel { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ===== Değer Kartları ===== */
.deger-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bosluk-4); }
.deger-kart {
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--kose-md); padding: var(--bosluk-4);
}
.deger-kart__baslik { font-size: var(--yazi-lg); margin-bottom: var(--bosluk-2); color: var(--vurgu); }
.deger-kart__metin { color: var(--sonuk); }

/* ===== Süreç ===== */
.surec__izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bosluk-4); }
.surec__adim { text-align: center; padding: var(--bosluk-4); }
.surec__sayi {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--vurgu); color: #fff;
  font-size: var(--yazi-lg); font-weight: 700; margin: 0 auto var(--bosluk-3);
}
.surec__adim h3 { margin-bottom: var(--bosluk-1); }
.surec__adim p { color: var(--sonuk); font-size: var(--yazi-sm); }

/* ===== İletişim ===== */
.iletisim-izgara {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--bosluk-8);
  align-items: start;
}
.iletisim-bilgi__baslik { font-size: var(--yazi-xl); margin-bottom: var(--bosluk-4); }
.iletisim-bilgi__liste { list-style: none; display: flex; flex-direction: column; gap: var(--bosluk-3); }
.iletisim-bilgi__liste li { display: flex; gap: var(--bosluk-2); align-items: flex-start; }
.iletisim-bilgi__ikon {
  width: 44px; height: 44px; flex: none; border-radius: var(--kose-sm);
  background: var(--vurgu-acik); color: var(--vurgu);
  display: grid; place-items: center;
}
.iletisim-bilgi__ikon svg { width: 22px; height: 22px; }
.iletisim-bilgi__liste strong { display: block; font-size: var(--yazi-sm); color: var(--sonuk); margin-bottom: 2px; }
.iletisim-bilgi__liste a, .iletisim-bilgi__liste span { color: var(--metin); font-weight: 500; }

.iletisim-form {
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--kose-md); padding: var(--bosluk-4);
}

/* ===== Form ===== */
.form { display: flex; flex-direction: column; gap: var(--bosluk-3); }
.form__satir { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-3); }
.form__alan { display: flex; flex-direction: column; gap: var(--bosluk-1); }
.form__alan--gizli { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form label { font-weight: 500; font-size: var(--yazi-sm); }
.form input, .form textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--cizgi);
  border-radius: var(--kose-sm); font-size: var(--yazi-md);
  font-family: inherit; min-height: 44px; background: var(--zemin);
  transition: border-color var(--sure-normal) var(--egri), box-shadow var(--sure-normal) var(--egri);
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.form textarea { resize: vertical; }

/* ===== Bildirim ===== */
.bildirim {
  padding: var(--bosluk-2) var(--bosluk-3); border-radius: var(--kose-sm);
  margin-bottom: var(--bosluk-3); font-size: var(--yazi-sm); font-weight: 500;
}
.bildirim--basari { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.bildirim--hata { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ===== Footer ===== */
.altlik {
  background: var(--vurgu-zemin); color: #cbd5e1;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: var(--bosluk-8);
}
.altlik__izgara {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bosluk-6);
  align-items: start; padding-bottom: var(--bosluk-6);
}
.altlik__baslik {
  color: #fff; font-size: var(--yazi-md); margin-bottom: var(--bosluk-3);
}
.altlik__metin { font-size: var(--yazi-sm); color: #94a3b8; }
.altlik__liste { list-style: none; display: flex; flex-direction: column; gap: var(--bosluk-1); }
.altlik__liste a { color: #94a3b8; font-size: var(--yazi-sm); transition: color var(--sure-normal) var(--egri); }
.altlik__liste a:hover { color: #fff; }
.altlik__adres p { font-size: var(--yazi-sm); margin-bottom: var(--bosluk-1); }
.altlik__adres a { color: #94a3b8; }
.altlik__adres a:hover { color: #fff; }
.altlik__telif {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: var(--bosluk-3) 0; text-align: center;
}
.altlik__telif p { font-size: var(--yazi-sm); color: #94a3b8; }

/* ===== Açılış Ekranı ===== */
.acilis {
  position: fixed; inset: 0; z-index: var(--kat-modal);
  background: var(--zemin); display: none;
  align-items: center; justify-content: center;
}
html.js .acilis { display: flex; }
.acilis--kapali { opacity: 0; transition: opacity 350ms ease; pointer-events: none; }
.acilis__ic { text-align: center; }
.acilis__marka {
  font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--metin);
  display: block; margin-bottom: var(--bosluk-3);
}
.acilis__cizgi {
  display: block; width: 80px; height: 3px; margin: 0 auto;
  background: var(--vurgu); border-radius: 999px;
  transform-origin: left; animation: cizgi 1s var(--egri) infinite;
}
@keyframes cizgi {
  0% { transform: scaleX(0); }
  50% { transform: scaleX(1); }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hizmet-izgara, .hizmet-izgara--genis, .proje-izgara { grid-template-columns: repeat(2, 1fr); }
  .surec__izgara { grid-template-columns: repeat(2, 1fr); }
  .altlik__izgara { grid-template-columns: repeat(2, 1fr); }
  .hero__ic { grid-template-columns: 1fr; gap: var(--bosluk-6); }
  .hero__gorsel-kutu { max-width: 640px; }
  .hero { padding: var(--bosluk-8) 0; }
}

@media (max-width: 820px) {
  .ust__menu {
    position: fixed; top: 80px; right: 0; bottom: 0;
    width: min(320px, 85vw); background: var(--zemin);
    flex-direction: column; align-items: flex-start; gap: var(--bosluk-2);
    padding: var(--bosluk-4); transform: translateX(100%);
    transition: transform var(--sure-normal) var(--egri);
    box-shadow: -8px 0 24px rgba(0,0,0,.1);
    border-left: 1px solid var(--cizgi);
  }
  .ust__menu--acik { transform: translateX(0); }
  .ust__menu-buton { display: flex; }
  .ust__baglanti { font-size: var(--yazi-lg); width: 100%; }
  .ust__buton { width: 100%; text-align: center; }
}

@media (max-width: 640px) {
  .kapsayici { padding: 0 var(--bosluk-3); }
  .bolum { padding: var(--bosluk-8) 0; }
  .hizmet-izgara, .hizmet-izgara--genis, .proje-izgara { grid-template-columns: 1fr; }
  .surec__izgara { grid-template-columns: 1fr; }
  .deger-izgara { grid-template-columns: 1fr; }
  .altlik__izgara { grid-template-columns: 1fr; }
  .iletisim-izgara { grid-template-columns: 1fr; }
  .icerik-iki { grid-template-columns: 1fr; }
  .form__satir { grid-template-columns: 1fr; }
  .hero__guven { gap: var(--bosluk-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}