/* Zigzag — sol metin + sağ görsel */
/* Tema satır ayarlarına (seofriendly-row-width-*) tam uyumlu */

/* Tema varsayılanları - PHP'den gelen değerlerle ezilebilir */
:root{
  --idel-zz-row-max:1600px;
  --idel-zz-row-pad:15px;
}

.idel-zigzag{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* --- Satır listesi --- */
.idel-zigzag__rows{
  display:flex;
  flex-direction:column;
  gap:var(--idel-zz-row-gap,32px);
  overflow:visible;
  padding:4px 0;
}

/* --- Satır (2 sütun: metin + görsel) --- */
.idel-zigzag__row:not(.idel-zigzag__row--text-only){
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto;
  align-items:stretch;
  width:100%;
  min-width:0;
  min-height:var(--idel-zz-row-h,min(42vw,460px));
  position:relative;
  overflow:hidden;
  box-shadow:var(--idel-zz-shadow,0 2px 8px rgba(18,22,32,0.05),0 8px 28px rgba(18,22,32,0.08));
  box-sizing:border-box;
}
.idel-zigzag__row--reverse:not(.idel-zigzag__row--text-only){
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.idel-zigzag__row--reverse .idel-zigzag__content{order:2}
.idel-zigzag__row--reverse .idel-zigzag__media{order:1}

/* --- Sadece metin satırı --- */
.idel-zigzag__row--text-only{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto;
  min-height:0;
  overflow:hidden;
  box-shadow:var(--idel-zz-shadow-text-only,0 8px 28px rgba(18,22,32,0.08));
  box-sizing:border-box;
}

/* --- İçerik hücresi (mavi arka plan) --- */
.idel-zigzag__content,
.idel-zigzag__media{
  min-width:0;
  box-sizing:border-box;
}
.idel-zigzag__row--text-only .idel-zigzag__content{
  max-width:100%;
}

/* Metin hücresi: tema satırı ile aynı hizada */
/* Varsayılan: tema padding | Geniş ekranda: max(pad, (viewport-max)/2) */
.idel-zigzag__content{
  background:var(--idel-zz-content-bg,#f6f4f0);
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  align-self:stretch;
  position:relative;
  z-index:1;
  /* Varsayılan: sadece tema padding */
  padding:var(--idel-zz-body-pad,28px) var(--idel-zz-row-pad,15px);
  width:100%;
  max-width:none;
  box-sizing:border-box;
}

/* Geniş ekranlarda (1400px+) tema hizasına göre padding */
@media (min-width:1400px){
  .idel-zigzag__content{
    padding:var(--idel-zz-body-pad,28px) max(var(--idel-zz-row-pad,15px), calc((100vw - var(--idel-zz-row-max,1600px)) / 2));
  }
  .idel-zigzag__row--reverse .idel-zigzag__content{
    padding:var(--idel-zz-body-pad,28px) max(var(--idel-zz-row-pad,15px), calc((100vw - var(--idel-zz-row-max,1600px)) / 2));
  }
  .idel-zigzag__row--text-only .idel-zigzag__content{
    padding:var(--idel-zz-body-pad,28px) max(var(--idel-zz-row-pad,15px), calc((100vw - var(--idel-zz-row-max,1600px)) / 2));
  }
}

/* Ters satırda (görsel solda) aynı mantık */
.idel-zigzag__row--reverse .idel-zigzag__content{
  padding:var(--idel-zz-body-pad,28px) var(--idel-zz-row-pad,15px);
}

/* Sadece metin satırında */
.idel-zigzag__row--text-only .idel-zigzag__content{
  background:var(--idel-zz-content-bg,#f6f4f0);
  padding:var(--idel-zz-body-pad,28px) var(--idel-zz-row-pad,15px);
}

/* --- İçerik kutusu: Kart Izgara body ile aynı mantık --- */
.idel-zigzag__content-inner{
  width:100%;
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  box-sizing:border-box;
}

/* --- Başlık (Kart Izgara ile uyumlu) --- */
.idel-zigzag__title{
  display:block;
  width:100%;
  margin:0 0 var(--idel-zz-text-title-gap,0.65em);
  min-height:var(--idel-zz-title-min-h,0);
  color:var(--idel-zz-title-color,#1a1f28);
  font-size:var(--idel-zz-title-size,clamp(1.05rem,1.5vw,1.2rem));
  font-weight:var(--idel-zz-title-weight,700);
  line-height:var(--idel-zz-title-lh,1.25);
  letter-spacing:normal;
  white-space:normal;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  box-sizing:border-box;
}
.idel-zigzag__title::after{
  content:"";
  display:block;
  width:40px;
  height:3px;
  margin-top:14px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--idel-zz-accent,#8e9bab),transparent);
  opacity:0.85;
}

/* --- Gövde metni (Kart Izgara ile uyumlu) --- */
.idel-zigzag__text{
  display:block;
  width:100%;
  margin:0;
  color:var(--idel-zz-text-color,#666);
  font-size:var(--idel-zz-text-size,inherit);
  line-height:var(--idel-zz-text-lh,1.55);
  white-space:pre-line;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  box-sizing:border-box;
}

/* --- Görsel sütunu --- */
.idel-zigzag__media{
  position:relative;
  overflow:hidden;
  background:var(--idel-zz-media-bg,#e4e1dc);
  align-self:stretch;
  min-height:var(--idel-zz-img-min-h,min(42vw,460px));
  height:100%;
  min-width:0;
  z-index:1;
}

/* --- Metin → görsel yumuşak geçiş (gradient) --- */
@supports (color:color-mix(in srgb,black,white)){
  .idel-zigzag__media::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(
      to right,
      var(--idel-zz-content-bg,#f6f4f0) 0%,
      color-mix(in srgb,var(--idel-zz-content-bg,#f6f4f0) 85%,transparent) 8%,
      color-mix(in srgb,var(--idel-zz-content-bg,#f6f4f0) 55%,transparent) 18%,
      color-mix(in srgb,var(--idel-zz-content-bg,#f6f4f0) 25%,transparent) 30%,
      color-mix(in srgb,var(--idel-zz-content-bg,#f6f4f0) 8%,transparent) 42%,
      transparent 55%
    );
  }
  .idel-zigzag__row--reverse .idel-zigzag__media::before{
    background:linear-gradient(
      to left,
      var(--idel-zz-content-bg,#f6f4f0) 0%,
      color-mix(in srgb,var(--idel-zz-content-bg,#f6f4f0) 85%,transparent) 8%,
      color-mix(in srgb,var(--idel-zz-content-bg,#f6f4f0) 55%,transparent) 18%,
      color-mix(in srgb,var(--idel-zz-content-bg,#f6f4f0) 25%,transparent) 30%,
      color-mix(in srgb,var(--idel-zz-content-bg,#f6f4f0) 8%,transparent) 42%,
      transparent 55%
    );
  }
}
@supports not (color:color-mix(in srgb,black,white)){
  .idel-zigzag__media::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(
      to right,
      var(--idel-zz-content-bg,#f6f4f0) 0%,
      rgba(246,244,240,0.85) 8%,
      rgba(246,244,240,0.55) 18%,
      rgba(246,244,240,0.25) 30%,
      rgba(246,244,240,0.08) 42%,
      transparent 55%
    );
  }
  .idel-zigzag__row--reverse .idel-zigzag__media::before{
    background:linear-gradient(
      to left,
      var(--idel-zz-content-bg,#f6f4f0) 0%,
      rgba(246,244,240,0.85) 8%,
      rgba(246,244,240,0.55) 18%,
      rgba(246,244,240,0.25) 30%,
      rgba(246,244,240,0.08) 42%,
      transparent 55%
    );
  }
}

/* --- Görsel img --- */
.idel-zigzag__img{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:var(--idel-zz-img-fit,cover)!important;
  object-position:center;
  display:block;
  transition:transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
@media (hover:hover) and (pointer:fine){
  .idel-zigzag__media:hover .idel-zigzag__img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .idel-zigzag__img{transition:none}
  .idel-zigzag__media:hover .idel-zigzag__img{transform:none}
}

/* ===================================================================
   MOBİL (≤767px): görsel arka plan, metin üstte
   =================================================================== */
@media (max-width:767px){
  .idel-zigzag__row:not(.idel-zigzag__row--text-only){
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:0;
    min-height:var(--idel-zz-row-h,auto);
    height:auto;
    position:relative;
  }
  .idel-zigzag__media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
  }
  .idel-zigzag__media::before{
    display:none;
  }
  .idel-zigzag__content{
    position:relative;
    z-index:2;
    margin:0;
    max-width:none;
    width:100%;
    height:auto;
    min-height:0;
    display:flex;
    align-items:center;
    /* Mobilde: sadece tema padding'i kullan (varsayılan 15px) */
    padding:var(--idel-zz-body-pad-mobile,calc(var(--idel-zz-body-pad,28px) * 0.85)) var(--idel-zz-row-pad,15px);
    background:linear-gradient(
      135deg,
      rgba(10,35,80,0.78) 0%,
      rgba(10,35,80,0.68) 50%,
      rgba(10,35,80,0.58) 100%
    );
    -webkit-backdrop-filter:blur(1px);
    backdrop-filter:blur(1px);
  }
  .idel-zigzag__content-inner{
    padding:0;
  }
  .idel-zigzag__row--reverse .idel-zigzag__content{order:0}
  .idel-zigzag__row--reverse .idel-zigzag__media{order:0}
  .idel-zigzag__title::after{margin-top:12px}
  .idel-zigzag__title{margin-bottom:var(--idel-zz-text-title-gap,0.65em)}
}