/*
  z26 — Anasayfa Hakkımızda bölümü (görsel kolaj + akordiyon)
  Renkler z26-palet.css değişkenlerinden gelir.
*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

.z26-hk{
  --z26-vurgu-koyu:#8A6640;            /* Kraft'ın metin tonu: zeminde 4.5:1 */
  --z26-hk-radius:22px;
  float:left;width:100%;position:relative;overflow:hidden;
  padding:110px 0;
  background-color:#f9f6f2;
  font-family:'Plus Jakarta Sans',sans-serif;
}
/* Sağ üst köşede silik teknik çizim ızgarası (referanstaki plan çizimi hissi) */
.z26-hk:before{
  content:"";position:absolute;top:0;right:0;width:46%;height:100%;pointer-events:none;
  background-image:
    linear-gradient(rgba(47,74,58,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,74,58,.07) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 0%,transparent 70%);
          mask-image:radial-gradient(ellipse at 100% 0%,#000 0%,transparent 70%);
}
.z26-hk .container{position:relative;z-index:1}

.z26-hk__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:70px;align-items:center;
}

/* ── Görsel kolaj ───────────────────────────────── */
.z26-hk__kolaj{position:relative;width:100%;aspect-ratio:690/640}
.z26-hk__img{
  position:absolute;margin:0;overflow:hidden;
  border-radius:var(--z26-hk-radius);
  background:var(--z26-zemin-koyu);
}
.z26-hk__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.z26-hk__img:hover img{transform:scale(1.04)}
.z26-hk__img--1{left:0;top:14%;width:45%;height:34%}                      /* sol küçük */
.z26-hk__img--2{right:0;top:0;width:46%;height:55%}                        /* sağ üst */
.z26-hk__img--3{left:22%;top:34%;width:55%;height:66%;z-index:2;           /* ön büyük */
  box-shadow:0 30px 60px -20px rgba(42,37,32,.35)}

/* ── İçerik ─────────────────────────────────────── */
.z26-hk__rozet{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border:1px solid var(--z26-cizgi);border-radius:50px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--z26-metin);background:rgba(255,255,255,.45);
}
.z26-hk__rozet:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--z26-vurgu)}

.z26-hk__baslik{
  margin:22px 0 24px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(34px,4.2vw,58px);font-weight:800;line-height:1.1;letter-spacing:-.035em;
  color:var(--z26-metin);
}
.z26-hk__baslik span{display:block}
.z26-hk__baslik .z26-hk__vurgu{color:var(--z26-vurgu-koyu)}

.z26-hk__metin{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;line-height:1.75;letter-spacing:0;
  color:var(--z26-metin-soluk);margin:0 0 44px;max-width:600px;
}

/* ── Akordiyon ──────────────────────────────────── */
.z26-hk__akordiyon{border-top:1.5px solid var(--z26-metin);max-width:600px}
.z26-ak{border-bottom:1px solid var(--z26-cizgi)}
.z26-ak__baslik{margin:0;font-size:inherit;line-height:inherit}
.z26-ak__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 0;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:22px;font-weight:700;letter-spacing:-.025em;
  color:var(--z26-metin);transition:color .25s;
}
.z26-ak__btn:hover,.z26-ak.is-open .z26-ak__btn{color:var(--z26-vurgu-koyu)}
.z26-ak__btn:focus-visible{outline:2px solid var(--z26-vurgu);outline-offset:4px}

/* + / − ikonu */
.z26-ak__ikon{position:relative;flex:0 0 14px;width:14px;height:14px}
.z26-ak__ikon:before,.z26-ak__ikon:after{
  content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;margin-top:-.75px;
  background:var(--z26-metin);transition:transform .3s ease,opacity .3s ease;
}
.z26-ak__ikon:after{transform:rotate(90deg)}
.z26-ak.is-open .z26-ak__ikon:after{transform:rotate(0);opacity:0}

.z26-ak__panel{padding:0 40px 26px 0;animation:z26AkAc .35s ease}
.z26-ak__panel p{
  margin:0;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15.5px;line-height:1.7;letter-spacing:0;color:var(--z26-metin);
}
@keyframes z26AkAc{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Buton */
.z26-hk__btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:36px;
  padding:14px 30px;border-radius:50px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em;
  background:var(--z26-vurgu);color:var(--z26-metin);text-decoration:none;
  transition:background .25s,color .25s;
}
.z26-hk__btn:hover,.z26-hk__btn:focus{background:var(--z26-ana);color:var(--z26-zemin);text-decoration:none}

/* ── Duyarlı ────────────────────────────────────── */
@media (max-width:991px){
  .z26-hk{padding:80px 0}
  .z26-hk .container{padding:0 20px}
  .z26-hk__grid{grid-template-columns:1fr;gap:56px}
  .z26-hk__kolaj{max-width:620px;margin:0 auto}
  .z26-hk:before{width:100%;height:50%}
}
@media (max-width:575px){
  .z26-hk{padding:60px 0}
  .z26-hk{--z26-hk-radius:14px}
  .z26-hk__metin{font-size:15px;margin-bottom:32px}
  .z26-ak__btn{font-size:18px;padding:20px 0}
  .z26-ak__panel{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .z26-hk__img img,.z26-ak__panel,.z26-ak__ikon:before,.z26-ak__ikon:after{transition:none;animation:none}
}