/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple:   #9e4ccd;
  --purple-lt:#b56de0;
  --purple-dk:#6a1f9a;
  --dark:     #0d0820;
  --dark2:    #130c28;
  --cream:    #f8f6fd;
  --white:    #ffffff;
  --text:     #1a1030;
  --text-lt:  #6b5f80;
  --border:   #e8e0f0;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); line-height: 1.7; overflow-x: hidden; }
h1,h2,h3,h4 { font-family: 'Playfair Display', serif; line-height: 1.15; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* =============================================
   ANİMASYONLAR
   ============================================= */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes fadeLeft {
  from { opacity:0; transform:translateX(32px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position: 200% center; }
}
@keyframes blobMove1 {
  0%,100% { transform:translate(0,0) scale(1); }
  40%     { transform:translate(50px,-30px) scale(1.08); }
  70%     { transform:translate(-20px,40px) scale(.95); }
}
@keyframes blobMove2 {
  0%,100% { transform:translate(0,0) scale(1); }
  40%     { transform:translate(-40px,50px) scale(1.06); }
  70%     { transform:translate(30px,-20px) scale(.93); }
}
@keyframes blobMove3 {
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(25px,35px) scale(1.1); }
}
@keyframes marqueeScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
@keyframes dotPulse {
  0%,100% { transform:scale(1); opacity:1; }
  50%     { transform:scale(1.7); opacity:.5; }
}
@keyframes navItemIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes svcReveal {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes tlDotIn {
  from { transform:scale(0); opacity:0; }
  to   { transform:scale(1); opacity:1; }
}
@keyframes glowPulse {
  0%,100% { box-shadow:0 8px 24px rgba(158,76,205,.35); }
  50%     { box-shadow:0 8px 36px rgba(158,76,205,.6); }
}

/* =============================================
   NAVBAR
   ============================================= */
#navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
#navbar.scrolled { box-shadow:0 2px 20px rgba(30,16,48,.1); }

.nav-inner {
  max-width: 1200px; margin:0 auto; padding:0 32px;
  display: flex; align-items:center; justify-content:space-between;
  height: 68px;
}

.nav-logo {
  display: flex; align-items:center; gap:10px;
  font-family: 'Playfair Display', serif;
  font-size: .92rem; font-weight:600; color:var(--text);
  white-space: nowrap;
  transition: transform .2s;
}
.nav-logo:hover { transform:scale(1.02); }
.nav-logo-img { height:36px; width:auto; }

.nav-links { display:flex; gap:4px; }
.nav-links li {
  opacity:0;
  animation: navItemIn .4s cubic-bezier(.22,.68,0,1.3) both;
}
.nav-links li:nth-child(1){animation-delay:.1s}
.nav-links li:nth-child(2){animation-delay:.18s}
.nav-links li:nth-child(3){animation-delay:.26s}
.nav-links li:nth-child(4){animation-delay:.34s}

.nav-links a {
  display:block; padding:6px 14px; border-radius:50px;
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-lt);
  position:relative;
  transition: color .18s;
}
.nav-links a::before {
  content:'';
  position:absolute; inset:0; border-radius:50px;
  background: rgba(158,76,205,.1);
  transform:scale(.7); opacity:0;
  transition: transform .22s cubic-bezier(.22,.68,0,1.4), opacity .18s;
}
.nav-links a:hover::before,
.nav-links a.active::before { transform:scale(1); opacity:1; }
.nav-links a:hover, .nav-links a.active { color:var(--purple); }

.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
  border-radius:8px; transition:background .2s;
}
.nav-toggle:hover { background:rgba(158,76,205,.08); }
.nav-toggle span {
  display:block; width:24px; height:2px;
  background:var(--text); border-radius:2px;
  transition: transform .25s, opacity .2s;
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =============================================
   HERO — Diagonal Split
   ============================================= */
#hero {
  height: 100vh; min-height: 600px;
  display: flex; position: relative; overflow: hidden;
}

/* Sol: koyu panel, sağ kenarı çapraz */
.hero-left {
  flex: 0 0 52%;
  background: var(--dark);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  z-index: 1;
}

.mesh-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.blob {
  position: absolute; border-radius: 50%; filter: blur(70px);
}
.blob.b1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(158,76,205,.4) 0%, transparent 70%);
  top: -100px; left: -80px;
  animation: blobMove1 11s ease-in-out infinite;
}
.blob.b2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(100,30,170,.3) 0%, transparent 70%);
  bottom: -80px; left: 100px;
  animation: blobMove2 14s ease-in-out infinite;
}
.blob.b3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(210,130,255,.25) 0%, transparent 70%);
  top: 40%; left: 28%;
  animation: blobMove3 9s ease-in-out infinite;
}

.hero-left-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 28px;
  padding: 0 120px 0 clamp(28px, 5vw, 64px);
  max-width: 460px;
}

/* Sağ: fotoğraf — gerilmeden, doğal boyutunda gösterilir */
.hero-right {
  flex: 1;
  /* Fotoğrafın beyaz arka planıyla eşleşen renk — dikişsiz */
  background: #ffffff;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  position: relative;
}
.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: contrast(1.12) brightness(1.04);
}

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--purple-lt);
  animation: fadeUp .5s ease both .1s;
}
.eyebrow-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--purple-lt); flex-shrink:0;
  animation: dotPulse 2s ease-in-out infinite;
}

.hero-left-inner h1 {
  display:flex; flex-direction:column; gap:2px;
  animation: fadeUp .55s cubic-bezier(.22,.68,0,1.2) both .2s;
}
.h1-light {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight:400; font-style:italic;
  color:rgba(255,255,255,.65);
  font-family:'Playfair Display', serif;
}
.h1-bold {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight:700; line-height:1;
  font-family:'Playfair Display', serif;
  color: #ffffff;
}

.hero-phones {
  display:flex; flex-direction:column; gap:8px;
  animation: fadeUp .5s ease both .38s;
}
.hero-phones a {
  display:inline-flex; align-items:center;
  font-size:.95rem; font-weight:500;
  color:rgba(255,255,255,.75);
  transition: color .2s;
}
.hero-phones a:hover { color:#fff; }

.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--purple);
  color:#fff; font-size:.88rem; font-weight:600; letter-spacing:.05em;
  padding:14px 32px; border-radius:50px; align-self:flex-start;
  transition: background .2s, transform .18s cubic-bezier(.22,.68,0,1.4);
  animation: fadeUp .5s ease both .52s, glowPulse 2.5s ease-in-out infinite 1s;
}
.btn-primary:hover {
  background:var(--purple-lt);
  transform:translateY(-3px) scale(1.03);
  color:#fff;
}
.btn-primary:active { transform:translateY(0) scale(.97); }


/* =============================================
   MARQUEE
   ============================================= */
.marquee-strip {
  background: var(--purple);
  overflow:hidden; padding:14px 0;
  position:relative; z-index:2;
}
.marquee-track {
  display:inline-flex; align-items:center; gap:32px;
  white-space:nowrap;
  animation: marqueeScroll 22s linear infinite;
}
.marquee-track span {
  font-size:.8rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.9);
}
.marquee-track .dot { color:rgba(255,255,255,.4); font-size:1.2rem; }

/* =============================================
   ABOUT — Timeline
   ============================================= */
#about {
  background: var(--cream);
  padding: 100px 0;
}
.about-container {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns: 1fr 1.4fr;
  gap:80px; align-items:start;
}

.about-left { position:sticky; top:100px; }
.about-left .section-tag { margin-bottom:16px; display:inline-block; }
.about-left h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color:var(--text); margin-bottom:24px;
}
.about-desc {
  font-size:.95rem; color:var(--text-lt); line-height:1.8;
}

.section-tag {
  font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--purple);
  border:1px solid var(--purple); border-radius:50px;
  padding:4px 14px; display:inline-block;
}
.section-tag.light {
  color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.35);
}

/* Timeline */
.timeline {
  position:relative;
  padding-left:32px;
  margin-bottom:40px;
}
.timeline::before {
  content:'';
  position:absolute; left:7px; top:8px; bottom:8px;
  width:2px; background:linear-gradient(to bottom, var(--purple), rgba(158,76,205,.15));
}
.tl-item {
  position:relative; padding-bottom:36px;
}
.tl-item:last-child { padding-bottom:0; }
.tl-dot {
  position:absolute; left:-32px; top:6px;
  width:14px; height:14px; border-radius:50%;
  background:var(--purple);
  border:3px solid var(--cream);
  box-shadow:0 0 0 2px var(--purple);
}
.tl-tag {
  font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--purple);
  margin-bottom:4px; display:block;
}
.tl-content h4 {
  font-size:1rem; font-weight:500; color:var(--text);
  font-family:'Inter', sans-serif;
}

.cert-row {
  display:flex; flex-wrap:wrap; gap:8px;
  padding-left:32px;
}
.cert-row span {
  font-size:.72rem; font-weight:600; letter-spacing:.05em;
  color:var(--text-lt);
  background:#fff; border:1px solid var(--border);
  border-radius:50px; padding:5px 14px;
}

/* =============================================
   SERVICES — Numbered rows
   ============================================= */
#services {
  background: var(--dark);
  padding: 100px 0;
}
.services-container {
  max-width:1200px; margin:0 auto; padding:0 48px;
}
.services-header {
  margin-bottom:60px;
}
.services-header h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color:#fff; margin-top:14px;
}

.services-list { display:flex; flex-direction:column; }

.svc-row {
  display:grid; grid-template-columns: 64px 1fr 56px;
  align-items:center; gap:24px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  cursor:default;
  transition: background .2s;
  border-radius:8px;
  padding-left:8px; padding-right:8px;
}
.svc-row:last-child { border-bottom:1px solid rgba(255,255,255,.08); }
.svc-row:hover { background: rgba(158,76,205,.08); }
.svc-row:hover .svc-num { color:var(--purple-lt); }
.svc-row:hover .svc-icon { color:var(--purple-lt); transform:scale(1.1) rotate(-8deg); }
.svc-row:hover .svc-body p { max-height:80px; opacity:1; margin-top:8px; }

.svc-num {
  font-size:2rem; font-weight:700; font-family:'Playfair Display',serif;
  color:rgba(255,255,255,.15); line-height:1;
  transition:color .25s;
}
.svc-body h3 {
  font-size:1.15rem; font-weight:600; color:#fff;
  font-family:'Inter',sans-serif;
}
.svc-body p {
  font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.65;
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .35s ease, opacity .3s ease, margin-top .3s ease;
}
.svc-icon {
  width:40px; height:40px; color:rgba(255,255,255,.2);
  transition: color .25s, transform .3s cubic-bezier(.22,.68,0,1.4);
}
.svc-icon svg { width:100%; height:100%; }

/* =============================================
   CONTACT
   ============================================= */
#contact {
  background: var(--cream);
  padding: 100px 0;
}
.contact-container {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:64px; align-items:stretch;
}

.contact-left {
  display:flex; flex-direction:column; gap:20px;
}
.contact-left .section-tag { margin-bottom:4px; }
.contact-left h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color:var(--text);
}
.contact-big-phone {
  display:block;
  font-size:1.5rem; font-weight:700;
  color:var(--purple); letter-spacing:.02em;
  transition:color .2s;
}
.contact-big-phone:hover { color:var(--purple-lt); }
.contact-mail {
  font-size:.95rem; color:var(--text-lt);
  border-bottom:1px solid var(--border);
  padding-bottom:20px;
  transition:color .2s;
}
.contact-mail:hover { color:var(--purple); }
.contact-addr {
  font-size:.9rem; color:var(--text-lt); line-height:1.8;
}

.contact-right {
  border-radius:20px; overflow:hidden;
  box-shadow:0 8px 40px rgba(30,16,48,.12);
  min-height:380px;
}
.contact-right iframe { width:100%; height:100%; border:0; display:block; }

/* =============================================
   FOOTER
   ============================================= */
footer {
  background:var(--dark);
  padding:32px 48px;
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.footer-logo { height:36px; width:auto; opacity:.6; }
footer p { font-size:.8rem; color:rgba(255,255,255,.35); letter-spacing:.03em; }

/* =============================================
   SCROLL REVEAL
   ============================================= */
.tl-item, .svc-row, .cert-row, .about-desc,
.contact-left > *, .contact-right {
  opacity:0; transform:translateY(20px);
  transition: opacity .45s cubic-bezier(.22,.68,0,1.2),
              transform .45s cubic-bezier(.22,.68,0,1.2);
}
.tl-item:nth-child(2){transition-delay:.08s}
.tl-item:nth-child(3){transition-delay:.16s}
.tl-item:nth-child(4){transition-delay:.24s}
.tl-item:nth-child(5){transition-delay:.32s}
.svc-row:nth-child(2){transition-delay:.07s}
.svc-row:nth-child(3){transition-delay:.14s}
.svc-row:nth-child(4){transition-delay:.21s}
.svc-row:nth-child(5){transition-delay:.28s}
.revealed { opacity:1 !important; transform:translateY(0) !important; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .about-container { grid-template-columns:1fr; gap:48px; }
  .about-left { position:static; }
  .contact-container { grid-template-columns:1fr; }
  .contact-right { min-height:280px; }
}

@media (max-width: 700px) {
  #hero { flex-direction: column; height: auto; min-height: 100svh; }

  .hero-left {
    flex: none; width: 100%;
    clip-path: none;
    padding: 0;
    /* Mobilde alttan çapraz kesim */
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  }
  .hero-left-inner {
    padding: 108px 28px 64px;
    max-width: 100%; gap: 20px;
  }

  .hero-right {
    flex: none; width: 100%;
    height: clamp(220px, 50vw, 320px);
    /* Mobilde üstten çapraz — sol panelin altını örtüyor */
    margin-top: -32px;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  }
  .hero-right img {
    height: 100%; width: auto;
    object-fit: contain; object-position: top center;
  }

  .h1-bold { font-size: clamp(2.2rem, 10vw, 3rem); }

  .about-container,
  .services-container,
  .contact-container { padding:0 24px; }

  #about, #services, #contact { padding:72px 0; }

  .svc-row { grid-template-columns:44px 1fr 36px; gap:14px; }
  .svc-num { font-size:1.4rem; }
  /* Mobilde description her zaman görünsün */
  .svc-body p { max-height:none; opacity:.7; margin-top:6px; }

  .contact-big-phone { font-size:1.2rem; }

  .footer-inner { flex-direction:column; text-align:center; }

  .nav-links {
    flex-direction:column; gap:0;
    position:absolute; top:68px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--border);
    max-height:0; overflow:hidden; opacity:0;
    transition: max-height .32s cubic-bezier(.22,.68,0,1.1), opacity .25s;
  }
  .nav-links.open { max-height:260px; opacity:1; }
  .nav-links li { animation:none; opacity:1; }
  .nav-links a { padding:13px 24px; border-radius:0; color:var(--text); display:block; }
  .nav-links a::before { border-radius:0; }
  .nav-toggle { display:flex; }
  .nav-logo-text { display: none; }
}