/* /hizmetler — 300x250 premium kart layout (mockup birebir) */


.hz-page{

  --hz-bg:#f5f0e7;
  --hz-paper:#fffdf9;
  --hz-ink:#182019;
  --hz-muted:#74736d;
  --hz-green:#1f3c2e;
  --hz-gold:#b7792d;
  --hz-line:rgba(31,60,46,.12);
  --hz-shadow:0 16px 42px rgba(37,30,20,.10);
  width:min(calc(100% - 44px),1380px);
  	margin:0 auto;margin-top:100px;
  padding:58px 0 82px;
  color:var(--hz-ink);
  font-family:"DM Sans",Inter,sans-serif;
}
.hz-page a{color:inherit;text-decoration:none}
.hz-page img{display:block;width:100%;height:100%;object-fit:cover}

.hz-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:end;
  padding:8px 0 38px;
  border-bottom:1px solid var(--hz-line);
}
.hz-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
  color:var(--hz-green);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hz-eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:var(--hz-gold);
}
.hz-hero h1{
  margin:0;
  font-family:"Playfair Display",var(--serif),serif;
  font-size:clamp(48px,3.5vw,82px);
  line-height:.96;
  letter-spacing:-.04em;
  font-weight:600;
  color:var(--hz-ink);
}
.hz-hero h1 em{color:var(--hz-gold);font-weight:600;font-style:italic}
.hz-hero-copy{
  max-width:520px;
  justify-self:end;
}
.hz-hero-copy p{
  margin:0;
  color:#66665f;
  font-size:16px;
  line-height:1.75;
}
.hz-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.hz-chip{
  padding:8px 11px;
  border:1px solid var(--hz-line);
  background:rgba(255,255,255,.52);
  border-radius:999px;
  color:var(--hz-green);
  font-size:12px;
  font-weight:600;
}

.hz-services-wrap{margin-top:30px}
.hz-services-grid{
  display:grid;
  grid-template-columns:repeat(4,300px);
  gap:22px;
  justify-content:center;
}

.hz-card{
  position:relative;
  width:300px;
  height:250px;
  overflow:hidden;
  border-radius:22px;
  background:#d9d0c2;
  border:1px solid rgba(31,60,46,.08);
  box-shadow:0 10px 28px rgba(38,30,19,.08);
  isolation:isolate;
  display:block;
  color:#fff;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.hz-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--hz-shadow);
  border-color:rgba(183,121,45,.28);
}
.hz-card-visual{
  position:absolute;
  inset:0;
}
.hz-card-visual img{
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.hz-card:hover .hz-card-visual img{transform:scale(1.055)}
.hz-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,
    rgba(11,22,15,.92) 0%,
    rgba(11,22,15,.58) 38%,
    rgba(11,22,15,.12) 68%,
    rgba(11,22,15,.02) 100%);
}
.hz-card-number{
  position:absolute;
  top:14px;
  left:14px;
  z-index:3;
  min-width:38px;
  height:28px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:var(--hz-green);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(9px);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
}
.hz-card-content{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  padding:18px 18px 17px;
  color:#fff;
}
.hz-card-type{
  display:block;
  margin-bottom:5px;
  color:#efc783;
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.hz-card-content h2{
  margin:0;
  font-family:"Playfair Display",var(--serif),serif;
  font-size:22px;
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:600;
  color:#fff;
}
.hz-card-content p{
  margin:7px 0 0;
  min-height:36px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:rgba(255,255,255,.76);
  font-size:11px;
  line-height:1.55;
}
.hz-card-link{
  margin-top:11px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-size:11px;
  font-weight:700;
}
.hz-card-arrow{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--hz-green);
  font-size:13px;
  transition:transform .2s ease;
}
.hz-card:hover .hz-card-arrow{
  transform:rotate(7deg) translate(1px,-1px);
}

.hz-cta{
  max-width:1266px;
  margin:34px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 27px;
  border-radius:20px;
  background:var(--hz-green);
  color:#f8f3eb;
  box-shadow:var(--hz-shadow);
}
.hz-cta strong{
  display:block;
  margin-bottom:4px;
  font-family:"Playfair Display",var(--serif),serif;
  font-size:26px;
  font-weight:600;
}
.hz-cta p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.6;
}
.hz-cta-btn{
  flex:none;
  padding:12px 17px;
  border-radius:999px;
  background:#f1debf;
  color:var(--hz-green);
  font-size:13px;
  font-weight:700;
  transition:.2s ease;
}
.hz-cta-btn:hover{
  background:#fff;
  transform:translateY(-2px);
}

.hz-bos{
  grid-column:1/-1;
  text-align:center;
  padding:40px 20px;
  color:var(--hz-muted);
}


@media (max-width:1320px){
  .hz-services-grid{grid-template-columns:repeat(3,300px)}
}
@media (max-width:990px){
  .hz-hero{grid-template-columns:1fr;gap:24px}
  .hz-hero-copy{justify-self:start;max-width:760px}
  .hz-services-grid{grid-template-columns:repeat(2,300px)}
  
      .hz-hero h1{
  margin:0;
  font-family:"Playfair Display",var(--serif),serif;
  font-size:clamp(48px,2.5vw,82px);

}
@media (max-width:680px){
  .hz-page{
    width:min(calc(100% - 22px),1380px);
    padding:32px 0 60px;
  }
  .hz-hero{padding-bottom:28px}
  .hz-hero h1{font-size:clamp(44px,14vw,66px)}
  .hz-hero-copy p{font-size:15px}
  .hz-services-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
    gap:10px;
  }
    .hz-hero h1{
  margin:0;
  font-family:"Playfair Display",var(--serif),serif;
  font-size:clamp(48px,2.5vw,82px);

}
  .hz-card{
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:300 / 250;
  }
  .hz-card-number{
    top:8px;
    left:8px;
    min-width:28px;
    height:22px;
    padding:0 7px;
    font-size:9px;
  }
  .hz-card-content{padding:12px 11px 11px}
  .hz-card-type{font-size:8px;letter-spacing:.1em;margin-bottom:3px}
  .hz-card-content h2{font-size:15px;line-height:1.1}
  .hz-card-content p{
    margin-top:5px;
    min-height:0;
    font-size:10px;
    line-height:1.4;
    -webkit-line-clamp:2;
  }
  .hz-card-link{margin-top:8px;font-size:10px;gap:6px}
  .hz-card-arrow{width:22px;height:22px;font-size:11px}
  .hz-cta{flex-direction:column;align-items:flex-start}
  .hz-cta-btn{width:100%;text-align:center}
}