/* SIMETRA — Çözümlerimiz page (cozumlerimiz.html) styles
   Big, full-bleed photo panels — not cards — that expand into a detail
   "package" on click. Light editorial theme, same as Simetra/Hakkımızda. */

.solutions-list{
  display:flex; flex-direction:column; gap:var(--s4);
  margin-top: var(--s6);
  margin-left: -56px; margin-right: -56px;
}
@media (max-width:860px){
  .solutions-list{ margin-left:-24px; margin-right:-24px; gap:var(--s3); }
}

.solution-panel{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#fbf9f4;
  box-shadow: 0 1px 2px rgba(14,13,12,0.04), 0 24px 56px rgba(14,13,12,0.12);
}

.solution-toggle{
  position:relative; display:block; width:100%;
  height:80vh; min-height:520px; max-height:820px;
  margin:0; padding:0; border:none; background:none; cursor:pointer;
  overflow:hidden; text-align:left;
}
.solution-media{
  position:absolute; inset:0;
  background: repeating-linear-gradient(135deg, #efe9db 0 18px, #f6f3ea 18px 36px);
}
.solution-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}
.solution-toggle:hover .solution-media img{ transform:scale(1.045); }
.solution-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,13,12,0.05) 0%, rgba(14,13,12,0.15) 55%, rgba(14,13,12,0.62) 100%);
  pointer-events:none;
}
.solution-media::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:rgba(14,13,12,0.4);
  opacity:0; transition:opacity .5s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.solution-panel.open .solution-media::before{ opacity:1; }
.solution-fallback{
  position:absolute; inset:0; z-index:1; display:none; align-items:center; justify-content:center; text-align:center;
  color:#a89f8d; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:var(--s3);
}
.solution-media.no-image .solution-fallback{ display:flex; }

.solution-label{
  position:absolute; left:56px; right:56px; bottom:56px; z-index:2;
  display:flex; align-items:center; gap:24px;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.solution-panel.open .solution-label{ transform:translateY(6px); }
.solution-num{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(243,241,234,0.4);
  font-family:var(--display); font-style:italic; font-weight:400; font-size:14px;
  color:var(--brass-light);
  transition:border-color .3s ease, background .3s ease;
}
.solution-toggle:hover .solution-num{ border-color:var(--brass-light); background:rgba(169,131,91,0.16); }
.solution-label h2{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(32px,5.4vw,64px); letter-spacing:-0.01em; line-height:1;
  color:var(--paper); flex:1; min-width:0;
}
.solution-icon{
  position:relative; flex-shrink:0; width:46px; height:46px;
  border:1px solid rgba(243,241,234,0.4); border-radius:50%;
  transition: border-color .3s ease, background .3s ease;
}
.solution-icon::before, .solution-icon::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--paper);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.solution-icon::before{ width:14px; height:1.5px; transform:translate(-50%,-50%); }
.solution-icon::after{ width:1.5px; height:14px; transform:translate(-50%,-50%) rotate(0deg); }
.solution-toggle:hover .solution-icon{ border-color:var(--brass-light); background:rgba(169,131,91,0.16); }
.solution-panel.open .solution-icon{ border-color:var(--brass-light); background:var(--brass-light); }
.solution-panel.open .solution-icon::before, .solution-panel.open .solution-icon::after{ background:var(--ink); }
.solution-panel.open .solution-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }

/* expandable "package" content — grid-rows 0fr → 1fr animates height smoothly without a fixed max-height */
.solution-content{
  display:grid; grid-template-rows:0fr;
  transition: grid-template-rows .6s cubic-bezier(.16,1,.3,1);
}
.solution-panel.open .solution-content{ grid-template-rows:1fr; }
.solution-content-inner{
  overflow:hidden; min-height:0;
  padding: var(--s6) 60px var(--s7);
}

.solution-content-inner > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.solution-panel.open .solution-content-inner > *{ opacity:1; transform:translateY(0); }
.solution-content-inner > *:nth-child(1){ transition-delay:.1s; }
.solution-content-inner > *:nth-child(2){ transition-delay:.16s; }
.solution-content-inner > *:nth-child(3){ transition-delay:.22s; }
.solution-content-inner > *:nth-child(4){ transition-delay:.28s; }
.solution-content-inner > *:nth-child(5){ transition-delay:.34s; }
.solution-content-inner > *:nth-child(6){ transition-delay:.4s; }

.solution-hook{
  position:relative;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.3vw,28px); line-height:1.45; color:var(--ink);
  max-width:46ch; margin-bottom:var(--s4); padding-left:26px;
}
.solution-hook::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--brass-light), transparent);
}
.solution-content-inner p:not(.solution-hook):not(.solution-note){
  font-size:15.5px; line-height:1.85; color:#544f43; max-width:62ch; margin-bottom:var(--s2);
}
.solution-content-inner h4{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  font-weight:700; margin:var(--s5) 0 var(--s4); position:relative; padding-bottom:var(--s2);
}
.solution-content-inner h4::after{
  content:''; position:absolute; left:0; bottom:0; width:30px; height:1px; background:var(--brass-dim);
}

.solution-content-inner > .solution-features{
  opacity:1; transform:none; transition:none;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:4px 40px; list-style:none; max-width:940px;
}
.solution-features li{
  position:relative; padding:9px 0 9px 24px; font-size:14px; line-height:1.5; color:#544f43;
  border-bottom:1px solid rgba(14,13,12,0.06);
  opacity:0; transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.solution-panel.open .solution-features li{ opacity:1; transform:translateY(0); }
.solution-features li::before{
  content:''; position:absolute; left:4px; top:19px; width:5px; height:5px; border-radius:50%; background:var(--brass);
}

.solution-note{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid rgba(14,13,12,0.08);
  font-size:12.5px; font-style:italic; color:#a89f8d; max-width:64ch;
}

@media (max-width:860px){
  .solution-toggle{ height:64vh; min-height:420px; }
  .solution-label{ left:24px; right:24px; bottom:26px; gap:14px; }
  .solution-icon, .solution-num{ width:38px; height:38px; }
  .solution-content-inner{ padding: var(--s5) 24px var(--s6); }
  .solution-hook{ padding-left:20px; }
}