/* ============================================================
   246 Software — Hizmet sayfaları

   /hizmetler         → hizmet listesi + ortak ilkeler
   /hizmetler/{slug}  → tek hizmetin detayı

   Hizmet satırı (.service) services.css, akordiyon (.faq__item)
   faq.css, iş kartı (.work) portfolio.css içinde; sayfalar o
   dosyaları da yüklüyor.
   ============================================================ */

/* Header sabit konumlu; içerik onun altından başlasın. Alt boşluk küçük:
   sayfa iletişim bölümüyle bitiyor, onun kendi üst boşluğu var. */
.svc {
    padding-block-start: calc(var(--header-h) + clamp(1.5rem, calc(var(--vw) * 2.6), 3.25rem));
    padding-block-end: clamp(1.5rem, calc(var(--vw) * 2.5), 3rem);
    background-color: var(--c-black);
    color: var(--c-white);
}

/* Portfolyo detayıyla aynı okuma sütunu; alttaki iletişim bölümü de hizalı */
.svc .container,
.svc + .contact .container {
    max-width: 1180px;
}


/* ---------- Breadcrumb ---------- */
.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-gray-500);
    font-size: 0.875rem;
    font-weight: var(--fw-medium);
}

.crumbs__list li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.crumbs__list li + li::before {
    content: '\203A';
    color: var(--c-gray-700);
}

.crumbs__list a {
    color: var(--c-gray-400);
    transition: color var(--t-fast);
}

.crumbs__list a:hover {
    color: var(--c-yellow);
}

/* Bulunulan sayfa tek satırda kalır, sığmazsa "…" ile kısalır; uzun blog
   başlıkları satır kırıp ayracı satır başında yalnız bırakmasın. */
.crumbs__list [aria-current] {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    color: var(--c-gray-300);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.crumbs__list [aria-current]::before {
    margin-inline-end: var(--sp-2);
}


/* ---------- Giriş ---------- */
.svc__hero {
    margin-block-start: clamp(1.5rem, calc(var(--vw) * 2.4), 2.75rem);
}

.svc__title {
    max-width: 18ch;
    font-size: clamp(2rem, calc(var(--vw) * 4), 4.5rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.svc__lead {
    max-width: 52rem;
    margin-block-start: var(--sp-5);
    color: var(--c-gray-300);
    font-size: clamp(1rem, calc(var(--vw) * 1.15), 1.3125rem);
    line-height: 1.65;
}

.svc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-block-start: clamp(1.5rem, calc(var(--vw) * 2.2), 2.5rem);
}

/* Süre · kapsam · sahiplik — üç kısa bilgi */
.svc__facts {
    display: grid;
    grid-template-columns: 1fr;
    margin-block-start: clamp(2rem, calc(var(--vw) * 3.2), 3.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.svc__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.svc__fact dt {
    color: var(--c-gray-500);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.svc__fact dd {
    color: var(--c-white);
    font-size: clamp(1rem, calc(var(--vw) * 1.1), 1.25rem);
    font-weight: var(--fw-semibold);
    text-align: end;
}

/* Başlıktaki sarı fosforlu vurgu — ana sayfadaki "Standart belirliyoruz."
   ile aynı dil. Satır kırılırsa her parça kendi zeminini alsın diye clone. */
.svc__mark {
    padding: 0 0.12em;
    background-color: var(--c-yellow);
    color: var(--c-black);
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}

/* /hizmetler ve hizmet detayları: masaüstünde başlık tek satır, açıklama
   alttaki içeriğin sağ kenarına kadar uzanıyor. Tek satıra sığması için
   yazı boyutu varsayılan başlıktan bir tık küçük. */
.svc__hero--wide .svc__lead {
    max-width: none;
}

@media (min-width: 1024px) {
    .svc__hero--wide .svc__title {
        max-width: none;
        font-size: clamp(2rem, calc(var(--vw) * 3.3), 3.5rem);
    }
}

/* /hizmetler sayfasındaki liste girişin hemen altında */
.svc__services {
    margin-block-start: clamp(2rem, calc(var(--vw) * 3.6), 4rem);
}


/* ---------- Bölüm ---------- */
/* Mobilde başlık üstte; masaüstünde başlık solda, içerik sağda. */
.svc-sec {
    display: grid;
    gap: clamp(1.25rem, calc(var(--vw) * 2), 2.5rem);
    margin-block-start: clamp(3rem, calc(var(--vw) * 5.5), 6.5rem);
    padding-block-start: clamp(1.75rem, calc(var(--vw) * 2.6), 3rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.svc-sec__title {
    font-size: clamp(1.5rem, calc(var(--vw) * 2.2), 2.5rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.svc-sec__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* "Tüm işler ›" gibi bölüm bağlantıları: metin içi bağlantılar gibi sarı,
   üzerine gelince beyaz. */
.svc-sec__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-yellow);
    font-size: 0.9375rem;
    font-weight: var(--fw-medium);
    transition: gap var(--t-fast), color var(--t-fast);
}

.svc-sec__more:hover {
    gap: var(--sp-3);
    color: var(--c-white);
}

.svc-sec__lead {
    margin-block-end: var(--sp-5);
    color: var(--c-gray-300);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.95), 1.125rem);
    line-height: 1.7;
}

/* Bölüm içi ızgaralar kendi üst boşluğunu getirmesin */
.svc-sec .works-grid,
.svc-sec .services__list {
    margin-block-start: 0;
}

/* Akordiyonun üst çizgisi bölüm çizgisiyle çift görünmesin. faq.css'teki
   "grid-area: list" ana sayfanın ızgarasına ait; burada sıradan bir sütun. */
.svc-sec .faq__list {
    grid-area: auto;
    border-top: none;
}

.svc-sec .faq__item:first-child .faq__q {
    padding-block-start: 0;
}

/* Ana sayfada cevaplar 62ch ile sınırlı; burada akordiyon zaten dar bir
   sütunda, cevap çizginin sonuna kadar uzansın. */
.svc-sec .faq__a {
    max-width: none;
}


/* ---------- Düz metin ---------- */
.svc-prose {
    display: grid;
    gap: var(--sp-5);
}

.svc-prose p {
    color: var(--c-gray-300);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.95), 1.125rem);
    line-height: 1.8;
}

/* Metin içi bağlantılar: alt çizgi yok, sitenin vurgu rengi sarı.
   Üzerine gelince beyaza dönüyor ki tıklanabilir olduğu hissedilsin. */
.svc-prose a {
    color: var(--c-yellow);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: color var(--t-fast);
}

.svc-prose a:hover {
    color: var(--c-white);
}


/* ---------- Kartlar (neler dahil) ---------- */
.svc-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}

.svc-card {
    padding: clamp(1.125rem, calc(var(--vw) * 1.5), 1.75rem);
    background-color: #131312;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    transition: border-color var(--t-fast);
}

.svc-card:hover {
    border-color: rgba(254, 224, 1, 0.5);
}

.svc-card__title {
    font-size: clamp(1.0625rem, calc(var(--vw) * 1.15), 1.3125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.svc-card__text {
    margin-block-start: var(--sp-2);
    color: var(--c-gray-400);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.9), 1.0625rem);
    line-height: 1.6;
}


/* ---------- Liste (kimler için, fiyat etkenleri) ---------- */
.svc-list {
    display: grid;
}

.svc-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "mark title"
        ".    text";
    align-items: center;
    column-gap: var(--sp-4);
    row-gap: var(--sp-1);
    padding-block: var(--sp-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.svc-list__item:first-child {
    padding-block-start: 0;
}

/* Ana sayfadaki hizmet satırlarıyla aynı sarı eşkenar dörtgen */
.svc-list__mark {
    grid-area: mark;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--c-yellow);
    transform: rotate(45deg);
}

.svc-list__title {
    grid-area: title;
    font-size: clamp(1.0625rem, calc(var(--vw) * 1.15), 1.3125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.svc-list__text {
    grid-area: text;
    color: var(--c-gray-400);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.9), 1.0625rem);
    line-height: 1.6;
}

/* Fiyat etkenleri: metnin altında, daha sıkı */
.svc-list--compact {
    margin-block-start: var(--sp-6);
}

.svc-list--compact .svc-list__item {
    padding-block: var(--sp-4);
}

.svc-list--compact .svc-list__item:first-child {
    padding-block-start: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/* ---------- Süreç adımları ---------- */
.svc-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}

.svc-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(1rem, calc(var(--vw) * 1.4), 1.5rem);
    padding: clamp(1.125rem, calc(var(--vw) * 1.5), 1.75rem);
    background-color: #131312;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

/* İçi boş, sarı konturlu rakam — hakkımızdaki "İzmir" yazısıyla aynı dil.
   Solda kendi sütununda; başlık ve metin sağda tek blok, böylece metin
   uzunluğu rakamın hizasını bozmuyor. tabular-nums: her rakam aynı
   genişlikte, kartlar arasında metin sütunu aynı yerden başlıyor. */
.svc-step__num {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--c-yellow);
    font-size: clamp(2.75rem, calc(var(--vw) * 3.6), 4rem);
    font-weight: var(--fw-black);
    letter-spacing: -0.04em;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
}

.svc-step__body {
    display: grid;
    gap: var(--sp-2);
    /* Başlığın ilk satırı rakamın üst kısmıyla aynı hizada başlasın */
    padding-block-start: 0.15em;
}

.svc-step__title {
    font-size: clamp(1.0625rem, calc(var(--vw) * 1.15), 1.3125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.svc-step__text {
    color: var(--c-gray-400);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.9), 1.0625rem);
    line-height: 1.6;
}


/* ---------- Teklif çağrısı ---------- */
.svc-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-block-start: clamp(1.5rem, calc(var(--vw) * 2.2), 2.5rem);
    padding: clamp(1.125rem, calc(var(--vw) * 1.6), 1.875rem);
    border: 1px solid rgba(254, 224, 1, 0.35);
    border-radius: 2px;
}

.svc-cta__text {
    flex: 1 1 18rem;
    color: var(--c-yellow);
    font-size: clamp(1rem, calc(var(--vw) * 1.05), 1.1875rem);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
}


/* ============================================================
   Kırılımlar
   ============================================================ */

@media (min-width: 640px) {
    .svc-cards,
    .svc-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .svc__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Yan yana üç kutu: etiket üstte, değer altta */
    .svc__fact {
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--sp-2);
        padding-inline-end: var(--sp-4);
    }

    .svc__fact dd {
        text-align: start;
    }

    .svc__fact + .svc__fact {
        padding-inline-start: var(--sp-5);
        border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
    }
}

@media (min-width: 1024px) {
    /* Başlık solda yapışkan, içerik sağda */
    .svc-sec {
        grid-template-columns: 30% minmax(0, 1fr);
        column-gap: clamp(2rem, calc(var(--vw) * 4), 4.5rem);
        align-items: start;
    }

    .svc-sec > .svc-sec__title {
        position: sticky;
        inset-block-start: calc(var(--header-h) + 1.5rem);
    }

    /* Örnek işler ve diğer hizmetler tam genişlik */
    .svc-sec--stack {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Hata sayfası ve yasal metinler — aynı iskeleti kullanıyor
   ============================================================ */

/* Altında iletişim bölümü olmayan sayfalar: footer'a yapışmasın */
.svc--status,
.svc--legal {
    padding-block-end: clamp(4rem, calc(var(--vw) * 8), 9rem);
}

.svc__code {
    color: var(--c-yellow);
    font-size: clamp(3.5rem, calc(var(--vw) * 8), 8rem);
    font-weight: var(--fw-black);
    letter-spacing: -0.04em;
    line-height: 1;
}

.svc__code + .svc__title {
    margin-block-start: var(--sp-4);
}

.svc__lead a {
    color: var(--c-yellow);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Yasal metin: uzun okuma için dar sütun ve sade başlıklar */
.svc-legal {
    max-width: 52rem;
    margin-block-start: clamp(2rem, calc(var(--vw) * 3.6), 4rem);
    padding-block-start: clamp(1.75rem, calc(var(--vw) * 2.6), 3rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.svc-legal h2 {
    margin-block-start: var(--sp-6);
    font-size: clamp(1.1875rem, calc(var(--vw) * 1.4), 1.5rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
}

.svc-legal h2:first-child {
    margin-block-start: 0;
}

.svc-legal ul {
    display: grid;
    gap: var(--sp-2);
    padding-inline-start: var(--sp-5);
    list-style: disc;
    color: var(--c-gray-300);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.95), 1.125rem);
    line-height: 1.7;
}

.svc-legal li::marker {
    color: var(--c-yellow);
}

.svc-legal__updated {
    color: var(--c-gray-500);
    font-size: 0.875rem;
}