/* =========================
   ÜBER UNS (page) helpers
   ========================= */

/* Page hero: index hero ile aynı “brand” hissi */
.page-hero.hero--brandlike{
  padding: clamp(62px, 7vw, 100px) 0;
  background:
    radial-gradient(1000px 520px at 70% 30%, rgba(var(--brand-rgb), .10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #ffffff 0%, rgba(var(--brand-rgb), .04) 100%);
}

/* Sağdaki bilgi kartı */
.hero-card{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(12,14,18,.10);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 24px);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.hero-card ul{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(12,14,18,.74);
  line-height: 1.75;
}
.hero-card li{ margin: 6px 0; }

/* "Der Anfang" kartları */
.feature-cards .card{
  padding: var(--s6);
}
.feature-cards .card h2{
  margin: 0 0 10px;
}
.feature-cards .card p{
  margin: 0;
  line-height: 1.7;
}

/* "Stolz der türkischen Küchen" bölümü */
.ueber-block{
  background: #fff;
  border: 1px solid rgba(12,14,18,.08);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 16px 44px rgba(0,0,0,.08);
}

.ueber-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: var(--s6);
  margin-bottom: var(--s6);
}
.ueber-top h2{ margin:0; }
.ueber-top p{ margin:6px 0 0; }

.ueber-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:start;
}

.ueber-text p{
  margin: 0 0 12px;
  line-height: 1.85;
  color: rgba(12,14,18,.74);
  max-width: 78ch;
}

.ueber-aside{
  position: sticky;
  top: 120px;
}

.ueber-aside .muted{ line-height:1.7; }

.ueber-image{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
}
.ueber-image img{
  width:100%;
  height:auto;
  display:block;
}

/* responsive */
@media (max-width: 980px){
  .ueber-grid{ grid-template-columns: 1fr; }
  .ueber-aside{ position: relative; top:auto; }
  .ueber-top{ align-items:flex-start; flex-direction:column; }
}

/* =========================
   TIMELINE (Über uns)
   ========================= */
.timeline{
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.6vw, 28px);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(12,14,18,.08);
  box-shadow: 0 16px 44px rgba(0,0,0,.08);
  overflow: hidden;
}

.timeline-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: var(--s6);
  margin-bottom: var(--s6);
}
.timeline-head h2{ margin:0; }
.timeline-head p{ margin:6px 0 0; }

.timeline-row{
  position: relative;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
  padding-top: 18px;
}

/* orta çizgi */
.timeline-row::before{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(var(--brand-rgb), .30),
    rgba(var(--brand2-rgb), .22)
  );
  border-radius: 999px;
}

/* timeline item */
.t-item{
  position: relative;
  padding-top: 18px; /* çizgi üstünde nokta için alan */
}

.t-dot{
  position:absolute;
  top: 3px;
  left: 18px;
  width: 18px;
  height: 18px;
  border-radius: 99px;
  background: #fff;
  border: 2px solid rgba(var(--brand-rgb), .55);
  box-shadow: 0 0 0 6px rgba(var(--brand-rgb), .10);
}

.t-card{
  border: 1px solid rgba(12,14,18,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(10,12,18,.06);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}

.t-card:hover{
  transform: translateY(-3px);
  border-color: rgba(var(--brand-rgb), .35);
  box-shadow: 0 18px 50px rgba(10,12,18,.10);
}

.t-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(12,14,18,.70);
  margin-bottom: 8px;
}

.t-kicker i{
  width:8px; height:8px;
  border-radius:99px;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(var(--brand-rgb), .10);
}

.t-card h3{
  margin:0 0 8px;
  font-size: 1.02rem;
}
.t-card p{
  margin:0;
  line-height: 1.7;
  color: rgba(12,14,18,.72);
}

/* Mobil: dikey timeline */
@media (max-width: 980px){
  .timeline-row{
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .timeline-row::before{
    left: 11px;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg,
      rgba(var(--brand-rgb), .30),
      rgba(var(--brand2-rgb), .22)
    );
  }

  .t-item{
    padding-top: 0;
    padding-left: 28px;
  }
  .t-dot{
    top: 18px;
    left: 2px;
  }
}

/* =========================
   DER ANFANG — background image + blur panels
   ========================= */
.section--anfang{
  position: relative;
  overflow: hidden;
}

/* background image */
.section--anfang::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/slider/slider_6.png") center/cover no-repeat;
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.05);
  z-index:0;
}

/* readability overlay */
.section--anfang::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 22% 15%, rgba(var(--brand-rgb), .18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.35));
  z-index:1;
}

/* content on top */
.section--anfang .container{
  position: relative;
  z-index: 2;
}

/* kartları cam/blur yap */
.section--anfang .feature-cards .card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}

/* highlight */
.section--anfang .feature-cards .card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 340px at 20% 0%,
    rgba(255,255,255,.22),
    rgba(255,255,255,0) 55%
  );
  pointer-events:none;
}

/* içerik üstte */
.section--anfang .feature-cards .card > *{
  position: relative;
  z-index: 1;
}

/* metinler */
.section--anfang .feature-cards .card h2,
.section--anfang .feature-cards .card p{
  color: rgba(0, 0, 0, 0.82);
}


/* başlık alanını */
.section--anfang .section-head{
  display:inline-block;
  color: rgb(0, 0, 0, 0.82);
}
.section--anfang .section-head p{ max-width: 66ch; color: rgb(0, 0, 0, 0.82);}

/* Slider ile aynı cam hissi */
.glass{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}

/* üstten “ışık vurmuş” gibi highlight */
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 340px at 20% 0%,
    rgba(255,255,255,.22),
    rgba(255,255,255,0) 55%
  );
  pointer-events:none;
}

/* hafif alt karartı ile derinlik */
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.06),
    rgba(0,0,0,.18)
  );
  opacity:.35;
  pointer-events:none;
}

/* içerik highlight üstünde kalsın */
.glass > *{
  position: relative;
  z-index: 1;
}

/* =========================
   STOLZ — full-bleed section
   ========================= */
.section--stolz{
  position: relative;
  overflow: hidden;
  /* index soft hissi gibi ama daha net */
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(var(--brand-rgb), .10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(var(--brand-rgb), .04), #fff 70%);
}

/* istersen çok hafif doku: */
.section--stolz::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.85));
  pointer-events:none;
  z-index:0;
}

.section--stolz .container{
  position: relative;
  z-index: 1;
}

/* Kart hissini kaldır (ueber-block yerine yeni wrap) */
.stolz-wrap{
  /* kart özelliklerini sıfırla */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Sağ panel kalsın ama “tam alan” hissi için biraz yumuşat */
.section--stolz .ueber-aside.soft-panel{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(0,0,0,.10);
}