/* ==================================================================
   anasayfa.css — home page only
   ------------------------------------------------------------------
   Sections that exist nowhere else: hero + süreç stepper, the vade
   axis, the three-role band, feature / service / doc cards and the
   FAQ accordion.

   Branch cards and the contact form moved to icerik.css once the
   contact page started reusing them — see that file for both.

   Requires: colors.css → style.css (loaded before this file).
   ================================================================== */


/* ==================================================================
   1. HERO
   ================================================================== */

.hero{
  position:relative;overflow:hidden;
  background:var(--g-hero);
  color:var(--c-on-dark);
}

/* faint graph-paper grid over the gradient */
.hero__mesh{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(var(--c-white-05) 1px,transparent 1px),
    linear-gradient(90deg,var(--c-white-05) 1px,transparent 1px);
  background-size:54px 54px;
}
.hero__glow{
  position:absolute;top:-120px;right:-120px;
  width:520px;height:520px;border-radius:50%;
  background:var(--g-hero-glow);
}

.hero__inner{position:relative;padding-block:96px 0}

.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px;align-items:center;
}
.hero__intro,.hero__flow{min-width:0}
.hero__flow{position:relative}

.hero__title{
  margin:0;
  font-size:76px;line-height:1.02;font-weight:800;letter-spacing:-.02em;
}
.hero__title-accent{color:var(--c-blue-300)}

.hero__lead{
  margin:26px 0 0;max-width:600px;
  font-size:21px;line-height:1.65;font-weight:400;
  color:var(--c-on-dark-strong);
}

.hero__actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}

.hero__flow-title{
  margin:12px 0 0;
  font-size:28px;font-weight:800;letter-spacing:-.01em;color:var(--c-on-dark);
}

/* the white wave that hands off to the next section */
.hero__wave{position:relative;height:0}
.hero__wave svg{
  position:absolute;bottom:0;left:0;width:100%;height:60px;display:block;
}


/* ==================================================================
   2. SÜREÇ STEPPER
   A vertical rail whose fill height tracks the active step; the
   runtime toggles .is-active and drives .flow__fill's scaleY.
   ================================================================== */

.flow{position:relative;margin-top:26px}

.flow__track,.flow__fill{
  position:absolute;left:32px;top:46px;bottom:46px;width:1px;
}
.flow__track{background:var(--c-white-16)}
.flow__fill{
  background:var(--c-blue-300);
  transform:scaleY(0);transform-origin:top;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  box-shadow:var(--sh-glow-line);
}

.flow__step{
  position:relative;display:flex;gap:20px;padding-block:14px;cursor:default;
}
.flow__num{
  flex:none;width:64px;height:64px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;
  background:var(--c-white-08);
  border:1px solid var(--c-white-16);
  color:var(--c-on-dark-muted);
  transition:background .35s,color .35s,border-color .35s,transform .35s;
}
.flow__body{padding-top:8px;min-width:0}
.flow__title{
  margin:0;font-size:18px;font-weight:700;
  color:var(--c-on-dark-strong);transition:color .3s;
}
.flow__desc{
  margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--c-on-dark-faint);
}

.flow__step.is-active .flow__num{
  background:var(--c-blue-300);
  border-color:var(--c-blue-300);
  color:var(--c-navy-900);
  transform:scale(1.08);
}
.flow__step.is-active .flow__title{color:var(--c-on-dark)}


/* ==================================================================
   3. VADE AXIS
   Qualitative "bugün → vade" scale. No day count by design.
   ================================================================== */

.axis{margin-top:40px;padding-block:36px 80px;}

.axis__labels{
  display:flex;justify-content:space-between;
  font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-on-dark);
}
.axis__label-muted{color:var(--c-on-dark-faint)}

.axis__track{position:relative;margin-top:16px;height:14px}
.axis__line{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--c-white-22)}

.axis__tick{position:absolute;width:1px;background:var(--c-white-22);top:2px;height:9px}
.axis__tick--start{left:0;top:1px;height:11px;background:var(--c-white-40)}
.axis__tick--third{left:33.33%}
.axis__tick--two-thirds{left:66.66%}
.axis__tick--end{right:0;top:1px;height:11px;background:var(--c-white-40)}

/* the brand mark itself, not a plain shape — same mask technique as
   .watermark, but solid white with a soft glow instead of a faint tint */
.axis__marker{
  position:absolute;top:-9px;width:24px;height:24px;
  transform:translateX(-50%);
  -webkit-mask:url(../images/icon-mark.svg) center/contain no-repeat;
  mask:url(../images/icon-mark.svg) center/contain no-repeat;
  background:var(--c-on-dark);
  filter:drop-shadow(var(--sh-glow-marker-white));
  animation:vadeSlide 4.2s linear infinite;
}
/* left:0% is the "Vade" end, left:100% is "Bugün" — the marker travels
   the same direction the copy reads, due date to today. */
@keyframes vadeSlide{
  0%{left:0%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{left:100%;opacity:0}
}

.axis__note{margin:20px 0 0;font-size:14.5px;font-weight:500;color:var(--c-on-dark-muted)}


/* ==================================================================
   4. ROLES BAND — alıcınız / eko / siz
   ================================================================== */

.section--roles{padding-block:88px 8px}

.roles{position:relative}
.roles__link{
  position:absolute;left:0;right:0;top:44px;
  width:100%;height:20px;overflow:visible;display:none;
}
.roles__link line{animation:dashFlow 2.4s linear infinite}
@keyframes dashFlow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-96}}

.role-card{
  background:var(--c-surface-tint);
  border:1px solid var(--c-border);
  border-radius:22px;padding:32px 28px;
}
.role-card--featured{
  background:var(--g-navy);
  border:none;color:var(--c-on-dark);
  transform:scale(1.03);
  box-shadow:var(--sh-featured);
}

.role-card__tag{display:flex;align-items:center;gap:10px}
.role-card__tag span:last-child{
  font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-text-muted);
}
.role-card--featured .role-card__tag span:last-child{color:var(--c-on-dark-muted)}

.role-card__dot{width:12px;height:12px;border-radius:3px}
.role-card__dot--buyer{background:var(--c-blue-300)}
.role-card__dot--eko{background:var(--c-on-dark)}
.role-card__dot--you{background:var(--c-blue-200)}

.role-card__title{margin-top:20px;font-size:18px;font-weight:700;color:var(--c-ink)}
.role-card--featured .role-card__title{color:var(--c-on-dark)}

.role-card__text{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--c-text-muted)}
.role-card--featured .role-card__text{color:var(--c-on-dark-strong)}


/* ==================================================================
   5. FEATURE CARDS — "neden biz" + "hizmet türleri"
   ================================================================== */

.section--neden{padding-block:88px 40px;position:relative;overflow:hidden}

.feature-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:22px;padding:38px 32px;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .35s,box-shadow .35s,border-color .35s;
}
.feature-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh-card);
  border-color:var(--c-border-strong);
}
/* a revealed card must not lose its translateY(0) to the hover transform */
.feature-card--compact{padding:36px 32px}

.feature-card__icon{
  width:60px;height:60px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--g-brand);color:var(--c-on-dark);
}
.feature-card__icon--sm{width:56px;height:56px;border-radius:15px}

.feature-card__title{margin:24px 0 0;font-size:22px;font-weight:700;color:var(--c-ink)}
.feature-card__title--sm{margin-top:22px;font-size:21px}

.feature-card__text{margin:12px 0 0;font-size:16px;line-height:1.65;color:var(--c-text-muted)}
.feature-card__text--sm{font-size:15.5px}


/* ==================================================================
   6. SERVICE CARDS
   ================================================================== */

.service-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:22px;overflow:hidden;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .35s,box-shadow .35s;
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--sh-card-lg)}
.service-card__media{height:240px;position:relative}
.service-card__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* Image placeholder — stands in until the real photo is supplied.
   Deliberately system-ui and not the brand face: it is scaffolding,
   not content. Still used by any service card without a photo yet. */
.media-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:12px;text-align:center;user-select:none;
  font:13px/1.3 system-ui,-apple-system,sans-serif;
  background:rgba(127,127,127,.08);
}
.media-ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1.5px dashed currentColor;opacity:.35;
}
.media-ph svg{opacity:.45}
.media-ph__cap{max-width:90%;font-weight:500;letter-spacing:.01em;opacity:.75}
.service-card__body{padding:32px 32px 36px}
.service-card__title{margin:0;font-size:24px;font-weight:700;color:var(--c-ink)}
.service-card__text{margin:12px 0 20px;font-size:16px;line-height:1.65;color:var(--c-text-muted)}


/* ==================================================================
   7. FAKTORİNG NEDİR + SSS
   ================================================================== */

#faktoring-nedir{position:relative;overflow:hidden}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;position:relative}


.check-list{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:16px}
.check-list__item{
  display:flex;gap:14px;align-items:flex-start;
  font-size:16px;font-weight:500;line-height:1.5;color:var(--c-ink-600);
}
.check-list__icon{
  flex:none;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-blue-600);color:var(--c-on-dark);
}

/* ==================================================================
   8. DOC CARDS — yatırımcı ilişkileri
   ================================================================== */

.doc-card{
  display:block;padding:30px 26px;
  background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:20px;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .3s,box-shadow .3s,border-color .3s;
}
.doc-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-card-sm);
  border-color:var(--c-border-strong);
}
.doc-card__icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-blue-50);color:var(--c-blue-600);
}
.doc-card__title{margin:20px 0 8px;font-size:18px;font-weight:700;color:var(--c-ink)}
.doc-card__cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--c-blue-400);
}


/* ==================================================================
   9. RESPONSIVE — home page
   ================================================================== */

@media (max-width:1100px){
  .hero__title{font-size:58px}
  .hero__grid{gap:40px}
}

@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .split{gap:44px}
}

@media (max-width:900px){
  /* hero */
  .hero__inner{padding-block:40px 0}
  .hero__title{font-size:38px;line-height:1.08}
  .hero__lead{margin-top:18px;font-size:16px;line-height:1.6}
  .hero__actions{margin-top:28px}
  .hero__actions .btn{flex:1 1 100%;padding:15px 24px}
  .hero__flow-title{font-size:21px}

  /* stepper */
  .flow__step{gap:14px}
  .flow__num{width:52px;height:52px;border-radius:15px;font-size:18px}
  .flow__track,.flow__fill{left:26px}

  /* axis */
  .axis{margin-top:28px;padding-block:26px 80px}

  /* sections */
  .section--roles{padding-block:56px 8px}
  .section--neden{padding-block:56px 40px}
  .split{grid-template-columns:1fr;gap:36px}

  /* cards */
  .role-card--featured{transform:none}
  .service-card__media{height:190px}
  .service-card__body{padding:24px 22px 28px}
  .service-card__title{font-size:20px}
  .feature-card,.feature-card--compact{padding:28px 24px}
  .feature-card__text,.feature-card__text--sm{font-size:15.5px}
  .prose{font-size:15.5px}
}

@media (max-width:600px){
  .hero__inner{padding-block:32px 0}
  .hero__title{font-size:32px}
  .service-card__media{height:165px}
}

@media (max-width:380px){
  .hero__title{font-size:28px}
}