/* ==========================================================================
   TempoCandy — Hakkımızda sayfası
   styles.css'in üzerine biner: token, başlık, alt bilgi, düğmeler oradan gelir.
   ========================================================================== */

:root{
  --card:  #fbf6ec;
  --cline: #eee3d1;
}

/* ortak parçalar ---------------------------------------------------------- */
.h2green{font:400 clamp(24px,2.6vw,38px)/1.18 var(--serif);letter-spacing:-.018em;color:var(--green)}

/* iki yanında yaprak olan ortalı başlık */
.ctitle{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:26px}
.ctitle span{font:400 clamp(21px,2.1vw,30px)/1.2 var(--serif);letter-spacing:-.016em;color:var(--green)}
.ctitle::before,.ctitle::after{
  content:"";width:clamp(40px,7vw,104px);height:11px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 11'%3E%3Cpath d='M0 5.5h74' stroke='%23d9c9a8' stroke-width='1.2'/%3E%3Cpath d='M104 1.2c-.3 5.3-3.6 8.4-8.2 8.4-2.7 0-4.6-1.7-4.6-4 0-3.3 4.2-5 12.8-4.4z' fill='%23a8b57c'/%3E%3C/svg%3E");
}
.ctitle::before{transform:scaleX(-1)}

/* ── 1. sayfa başlığı (banner) ─────────────────────────────────────────────
   Ürünler sayfasıyla aynı kalıp. Banner 2,8:1 hazırlanır (2800×1000 px);
   bölüm yüksekliği de o orana kilitli olduğu için hiç kırpılmaz.
   Görsel `assets/hakkimizda-hero.jpg` adıyla eklendiği anda devreye girer,
   kod değişikliği gerekmez. Dosya yokken düz krem zemin görünür.
   -------------------------------------------------------------------------- */
.ahead{
  position:relative;overflow:hidden;
  background:#f4ebdc url("assets/hakkimizda-hero.jpg") no-repeat center center/cover;
}
/* metnin oturduğu sol taraf için hafif perde — görseli soldurmaz */
.ahead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgb(244 235 220 / .72) 0%,rgb(244 235 220 / .34) 24%,rgb(244 235 220 / 0) 46%);
}
.ahead__in{
  position:relative;display:grid;grid-template-columns:44% minmax(0,1fr);
  align-items:center;
  min-height:clamp(340px,35.7vw,640px);   /* 2,8:1 */
}
.ahead__copy{position:relative;z-index:2;padding:24px 26px 30px 0}
.ahead__t{font:400 clamp(42px,5.4vw,76px)/1.02 var(--serif);letter-spacing:-.03em;color:var(--green)}
.ahead__p{margin-top:20px;max-width:40ch;font-size:14.5px;line-height:1.74;color:#5d6659}
.ahead__badge{display:flex;align-items:center;gap:14px;margin-top:26px}
.ahead__bico{
  flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:#f2ead6;color:#6f8046;font-size:24px;
}
.ahead__badge b{font-size:13px;font-weight:700;line-height:1.45;color:var(--ink)}

/* sahne: ana sayfadaki kesme-fotoğraf sistemiyle aynı */
.ahead__art{position:relative;aspect-ratio:1.72}
.ahead__disc{
  position:absolute;left:8%;top:6%;width:52%;aspect-ratio:1;
  border-radius:50%;background:#bccb95;opacity:.62;
}
/* madalyonun altından geçen ince turuncu yay */
.ahead__swoosh{
  position:absolute;right:2%;bottom:1%;width:38%;aspect-ratio:1;
  border-radius:50%;border:9px solid transparent;
  border-bottom-color:#ec1c24;border-left-color:#ef564f;
  transform:rotate(-32deg);
}
.ahead__art .art{position:absolute;mix-blend-mode:darken;filter:contrast(1.18) brightness(1.07)}
.ahead__art .art--pack{left:44%;top:1%;width:29%;height:86%;transform:translateX(-50%)}
.ahead__art .art--l{
  left:-2%;top:22%;width:36%;height:60%;
  -webkit-mask-image:radial-gradient(ellipse 42% 44% at 50% 48%,#000 56%,transparent 100%);
          mask-image:radial-gradient(ellipse 42% 44% at 50% 48%,#000 56%,transparent 100%);
}
.ahead__art .art--r{
  left:52%;bottom:0;width:28%;height:52%;
  -webkit-mask-image:radial-gradient(ellipse 42% 44% at 50% 50%,#000 56%,transparent 100%);
          mask-image:radial-gradient(ellipse 42% 44% at 50% 50%,#000 56%,transparent 100%);
}
.ahead__art .pack{
  position:absolute;left:44%;top:36%;width:19%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  color:#f3ecd9;text-shadow:0 1px 2px rgb(26 38 16 / .38);
}
/* sağdaki arşiv madalyonu */
.ahead__old{
  position:absolute;right:0;top:9%;width:35%;aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  box-shadow:0 18px 40px -26px rgb(60 44 18 / .8);
}
.ahead__old .ph{position:absolute;inset:0}
/* yazılar okunsun diye içeriden hafif koyulaştırma */
.ahead__old::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(200deg,rgb(60 38 12 / .12) 0%,rgb(50 30 8 / .46) 78%);
}
.ahead__old::after{content:"";position:absolute;inset:0;z-index:3;border:3px solid #fbf6ed;border-radius:50%}
.ahead__oldName{
  position:absolute;left:16%;bottom:22%;z-index:2;
  font:500 clamp(13px,1.5vw,22px)/1 var(--serif);font-style:normal;color:#f6efe0;
  text-shadow:0 2px 6px rgb(40 24 6 / .7);
}
.ahead__oldYear{
  position:absolute;right:14%;top:20%;z-index:2;
  font:500 clamp(12px,1.3vw,19px)/1 var(--serif);font-style:normal;color:#f6efe0;
  text-shadow:0 2px 6px rgb(40 24 6 / .7);
}

/* ── 2. Tempo'nun hikâyesi ────────────────────────────────────────────── */
.story2{display:grid;grid-template-columns:42% minmax(0,1fr);gap:38px;align-items:center;margin-top:var(--gap-sec)}
.story2__ph{aspect-ratio:1.97;border-radius:16px}
.story2__copy p{margin-top:16px;font-size:13.5px;line-height:1.78;color:var(--ink-soft);max-width:56ch}
.story2__copy p:first-of-type{margin-top:20px;color:#4d5749}

/* ── 3. değerler ──────────────────────────────────────────────────────── */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:var(--gap-sec)}
.val{
  background:var(--card);border:1px solid var(--cline);border-radius:16px;
  padding:20px 20px 22px;
}
/* Çizimler krem daire zeminini kendi içlerinde taşıyor; sarmalayıcıya
   ayrıca daire vermek iç içe iki halka yapıyordu. Burası artık yalnızca
   ölçü kutusu. Setin önerdiği görüntü boyutu 52–64 px. */
.val__ico{display:block;font-size:56px;margin-bottom:14px}
.val h3{font-size:14px;font-weight:700;color:var(--ink)}
.val p{margin-top:9px;font-size:11.5px;line-height:1.6;color:var(--muted)}

/* ── 4. marka yolculuğu ───────────────────────────────────────────────── */
.jrn{margin-top:var(--gap-sec)}
.jrn__list{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0 14px}
/* halkaların ortasından geçen ince çizgi */
.jrn__list::before{
  content:"";position:absolute;left:33px;right:33px;top:33px;height:1px;
  background:#e0d3ba;z-index:0;
}
.jstep{position:relative;z-index:1;display:flex;flex-direction:column;padding-right:16px}
/* Çizimler krem daire zeminini kendi içlerinde taşıyor; sarmalayıcıya
   ayrıca daire vermek iç içe iki halka yapıyordu. Ölçü 66px'te kalıyor:
   halkaların ortasından geçen çizgi ve aradaki nokta bu ölçüye göre
   konumlanmış (.jrn__list::before ve .jstep::after). */
.jstep__ico{display:block;width:66px;height:66px;font-size:66px;margin-bottom:16px}
/* halkalar arasındaki küçük yeşil nokta */
.jstep::after{
  content:"";position:absolute;left:calc(66px + ((100% + 14px - 66px) / 2) - 4px);top:29px;
  width:8px;height:8px;border-radius:50%;background:#8b9a62;
}
.jstep:last-child::after{display:none}
.jstep b{font:400 17px/1.1 var(--serif);color:var(--ink)}
.jstep strong{margin-top:5px;font-size:12.5px;font-weight:700;color:var(--green)}
.jstep small{margin-top:8px;font-size:11px;line-height:1.55;color:var(--muted)}

/* ── 5. kalite ve üretim ──────────────────────────────────────────────── */
.qual{display:grid;grid-template-columns:46% minmax(0,1fr);gap:16px;margin-top:var(--gap-sec);align-items:stretch}
.qual__card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--cline);border-radius:20px;padding:28px 30px;
}
.qual__p{margin-top:14px;font-size:12.5px;line-height:1.7;color:var(--ink-soft);max-width:46ch}
/* Ana sayfadaki "Güven" bölümüyle aynı iki resmi işaret; .tmark kutusu
   styles.css'te tanımlı, ikisi de aynı görünsün diye paylaşılıyor. */
.qual__marks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 24px}
.qual__marks li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px}
.qual__marks small{font-size:9.5px;color:var(--muted)}
.qual__card .btn{align-self:flex-start;margin-top:auto}

.qual__shots{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.qual__big{grid-row:1/3;border-radius:16px}
.qual__sm{border-radius:16px}

/* ── 6. anlar ─────────────────────────────────────────────────────────── */
.mmts{margin-top:var(--gap-sec)}
.mmts__list{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.mmts__list li{
  position:relative;height:152px;border-radius:14px;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
.mmts__list li:hover{transform:translateY(-4px);box-shadow:var(--sh-soft)}
.mmts__list .ph{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.mmts__list li:hover .ph{transform:scale(1.05)}
.mmts__list li::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgb(22 13 5 / .5) 0%,rgb(22 13 5 / .12) 46%,transparent 100%);
}
.mmts__list b{
  position:absolute;left:14px;bottom:14px;z-index:2;
  padding:7px 15px;border-radius:100px;
  background:rgb(255 253 248 / .94);
  font-size:11.5px;font-weight:600;color:var(--ink);
  box-shadow:0 6px 16px -10px rgb(30 20 6 / .6);
}

/* ── 9. kapanış ───────────────────────────────────────────────────────── */
.aend{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:28px;overflow:hidden;
  margin-top:var(--gap-sec);padding:26px 40px;border-radius:var(--r-band);
  background:linear-gradient(100deg,#f9e9d6 0%,#fbf1e2 58%,#f8e8d3 100%);
}
.aend__t{font:400 clamp(19px,1.86vw,27px)/1.34 var(--serif);letter-spacing:-.014em;color:var(--green)}
.aend__t em{font-style:normal;color:var(--orange)}
.aend__actions{display:flex;flex-wrap:wrap;gap:14px;position:relative;z-index:2}
.aend__deco{
  position:absolute;right:-1%;top:0;bottom:0;width:190px;z-index:0;opacity:.7;
  -webkit-mask-image:radial-gradient(ellipse 44% 46% at 62% 50%,#000 44%,transparent 100%);
          mask-image:radial-gradient(ellipse 44% 46% at 62% 50%,#000 44%,transparent 100%);
}

/* alt bilgideki marka açıklaması */
.foot__tag{margin-top:16px;max-width:34ch;font-size:11.5px;line-height:1.65;color:var(--muted)}
.foot__brand .social{margin-top:16px}
.foot{margin-top:var(--gap-sec)}

/* ── kırpmalar ────────────────────────────────────────────────────────────
   Hepsi tek ürün fotoğrafından üretiliyor. Gerçek görsel geldiğinde ilgili
   öğeye  style="--src:url('assets/…');--z:cover;--p:50% 50%"  eklemek yeterli.
   -------------------------------------------------------------------------- */
.ph--arsiv  {--z:250%; --p:78% 34%}   /* madalyon: eski fabrika  */

/* ── duyarlı ──────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .ahead__in{grid-template-columns:46% minmax(0,1fr)}
  .story2{grid-template-columns:44% minmax(0,1fr);gap:26px}
  .vals{grid-template-columns:1fr 1fr}
  .qual{grid-template-columns:1fr}
  .qual__shots{grid-template-columns:1.4fr 1fr;height:260px}
}

@media (max-width:980px){
  /* Dar ekranda görselin boş sol tarafı kalmıyor; banner tam genişlikte
     metnin altına alınıyor (Ürünler sayfasıyla aynı davranış). */
  .ahead{background-position:center bottom;background-size:100% auto}
  .ahead::after{display:none}
  .ahead__in{grid-template-columns:1fr;min-height:0;padding-bottom:calc(35.7vw + 12px)}
  .ahead__copy{padding:20px 0}

  .story2{grid-template-columns:1fr;gap:22px}
  .story2__ph{aspect-ratio:2.2}

  .jrn__list{grid-auto-flow:column;grid-auto-columns:210px;grid-template-columns:none;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .jrn__list::-webkit-scrollbar{display:none}
  .jrn__list::before{display:none}
  .jstep::after{display:none}

  .mmts__list{grid-auto-flow:column;grid-auto-columns:230px;grid-template-columns:none;overflow-x:auto;scrollbar-width:none}
  .mmts__list::-webkit-scrollbar{display:none}

  .aend{grid-template-columns:1fr;gap:18px;padding:26px 26px}
  .aend__deco{display:none}
}

@media (max-width:600px){
  .ahead__t{font-size:clamp(36px,11vw,52px)}
  .vals{grid-template-columns:1fr}
  .qual__card{padding:22px 18px}
  .qual__marks{gap:18px 10px}
  .qual__shots{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .qual__big{grid-row:auto;aspect-ratio:1.6}
  .qual__sm{aspect-ratio:2}
  .jrn__list{grid-auto-columns:180px}
  .mmts__list{grid-auto-columns:200px}
  .aend__actions .btn{flex:1 1 160px;justify-content:center}
}