.svc{display:flex;flex-direction:column;height:100%}
.card.svc{padding:0}
.svc__title{font-size:1.19rem;margin-bottom:9px}
.svc__desc{color:var(--tx-2);font-size:.93rem;line-height:1.62;margin-bottom:14px;flex:1}
.svc__list{list-style:none;padding:0;margin:0 0 15px;display:grid;gap:7px}
.svc__list li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;color:var(--tx-2);margin:0}
.svc__list li::before{content:"";flex:none;width:15px;height:15px;margin-top:3px;border-radius:50%;background:var(--grad-brand-soft);border:1px solid rgba(0,222,95,.35);
  background-image:var(--ikon-tik);
  background-size:9px;background-position:center;background-repeat:no-repeat}


.svc__govde{display:flex;flex-direction:column;flex:1;padding:17px clamp(16px,2vw,22px) 19px}
.svc__foot{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}




.step{position:relative;padding-left:0}
.step__no{
  font-family:var(--f-display);font-size:3.2rem;font-weight:800;line-height:1;
  background:var(--grad-brand-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:.85;margin-bottom:14px;display:block;
}
.step__line{position:absolute;top:26px;left:calc(100% - 12px);right:-24px;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
@media(max-width:960px){.step__line{display:none}}


.stat__v{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1;letter-spacing:-.045em;
  background:var(--grad-brand-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat__l{margin-top:11px;font-size:.86rem;color:var(--tx-2);letter-spacing:.01em}


.acc{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);margin-bottom:12px;transition:border-color var(--t-fast)}
.acc[open]{border-color:rgba(0,222,95,.3);background:var(--bg-2)}
.acc summary{
  padding:19px 54px 19px 22px;cursor:pointer;list-style:none;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:1rem;line-height:1.45;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:20px;top:50%;width:13px;height:13px;margin-top:-6px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300de5f' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  transition:transform var(--t-mid);
}
.acc[open] summary::after{transform:rotate(135deg)}
.acc__body{padding:0 22px 22px;color:var(--tx-2);font-size:.93rem;line-height:1.72}
.acc__body > *:last-child{margin-bottom:0}


.pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:52px}
.pg{
  min-width:42px;height:42px;padding:0 13px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);font-size:.9rem;font-weight:600;color:var(--tx-2);
  transition:all var(--t-fast);
}
.pg:hover{background:var(--surface-2);color:var(--tx-1);border-color:var(--line-2)}
.pg.is-current{background:var(--grad-brand);color:#04160b;border-color:transparent}
.pg-gap{display:grid;place-items:center;min-width:26px;color:var(--tx-3)}


.empty{text-align:center;padding:clamp(48px,8vw,90px) 20px;border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface)}
.empty__i{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin:0 auto 20px;background:var(--grad-brand-soft);color:var(--ago-green)}
.empty__i svg{width:28px;height:28px}

.errpage{min-height:64vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.errpage__code{font-family:var(--f-display);font-size:clamp(6rem,20vw,13rem);font-weight:800;line-height:.85;letter-spacing:-.06em;
  background:var(--grad-brand-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.9;margin-bottom:14px}


.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,42px)}
.filter{
  padding:9px 18px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--line);
  font-size:.87rem;font-weight:600;color:var(--tx-2);font-family:var(--f-display);transition:all var(--t-fast);white-space:nowrap;
}
.filter:hover{background:var(--surface-2);color:var(--tx-1)}
.filter.is-on{background:var(--grad-brand);color:#04160b;border-color:transparent;box-shadow:0 10px 26px -12px var(--glow-green)}



.svc--medyali{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:#0a1015;
  box-shadow:var(--sh-2);
  transition:transform var(--t-mid),border-color var(--t-mid),box-shadow var(--t-mid);
}
.svc--medyali:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh-4)}

.svc__medya{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:#070c10;flex:none;
}
.svc--buyuk .svc__medya{aspect-ratio:16/9}
.svc--medyali:hover .kapak__video,
.svc--medyali:hover .kapak__gorsel{transform:scale(1.05);filter:saturate(1.05) contrast(1.04)}

.svc__medya::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,12,16,.96) 2%,rgba(8,12,16,.25) 46%,transparent 78%);
}
.svc__rozet{
  position:absolute;top:14px;left:14px;z-index:2;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(6,10,13,.7);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);color:var(--ago-green-ink);
}
.svc__oynat{
  position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:var(--r-full);font:600 .7rem var(--f-display);letter-spacing:.04em;
  background:rgba(6,10,13,.68);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);color:var(--tx-2);
}

.svc:not(.svc--medyali) .svc__govde > .icon-box{margin-bottom:10px}
.svc:not(.svc--medyali) .svc__desc{margin-bottom:10px}
.svc--buyuk .svc__govde{padding:22px clamp(18px,2.2vw,26px) 24px}
.svc--buyuk .svc__title{font-size:1.45rem}
.svc--buyuk .svc__desc{font-size:1rem}


.hizmet-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.hizmet-izgara .svc--buyuk{grid-column:span 2}


@media(min-width:1241px){
  .hizmet-izgara .svc--doldur{grid-column:span 2}
  .hizmet-izgara .svc--doldur-tam{grid-column:span 4}
  
  .hizmet-izgara .svc--doldur .svc__medya,
  .hizmet-izgara .svc--doldur-tam .svc__medya{aspect-ratio:16/9}
  .hizmet-izgara .svc--doldur .svc__govde,
  .hizmet-izgara .svc--doldur-tam .svc__govde{padding:22px clamp(18px,2.2vw,26px) 24px}
  .hizmet-izgara .svc--doldur .svc__title,
  .hizmet-izgara .svc--doldur-tam .svc__title{font-size:1.45rem}
  .hizmet-izgara .svc--doldur .svc__desc,
  .hizmet-izgara .svc--doldur-tam .svc__desc{font-size:1rem}
}
@media(max-width:1240px) and (min-width:1001px){
  
  .hizmet-izgara{grid-template-columns:repeat(3,1fr)}
  .hizmet-izgara .svc--buyuk{grid-column:span 3}
  .hizmet-izgara .svc--buyuk .svc__medya{aspect-ratio:21/9}
}
@media(max-width:1000px){
  .hizmet-izgara{grid-template-columns:repeat(2,1fr)}
  .hizmet-izgara .svc--buyuk{grid-column:span 2}
}

@media(max-width:620px){
  .hizmet-izgara{grid-template-columns:repeat(2,1fr);gap:10px}
  .hizmet-izgara .svc--buyuk{grid-column:span 1}

  .svc__govde{padding:14px 13px 15px}
  .svc__govde > .icon-box{width:40px;height:40px;margin-bottom:9px}
  .svc__govde > .icon-box svg{width:20px;height:20px}
  .svc__title{font-size:1rem;line-height:1.25}
  .svc__desc{
    font-size:.84rem;line-height:1.5;margin-bottom:10px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  
  .svc__foot{flex-direction:column;align-items:flex-start;gap:8px;padding-top:12px}
  .svc__foot .badge{font-size:.72rem}
}


.svc__medya::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(80% 70% at 30% 20%,rgba(0,222,95,.14),transparent 62%),
             radial-gradient(70% 60% at 80% 80%,rgba(43,217,245,.12),transparent 65%),
             var(--bg-3);
}

@media(prefers-reduced-motion:reduce){
  .svc--medyali:hover .kapak__video,.svc--medyali:hover .kapak__gorsel{transform:none}
}