/* ══════════════════════════════════════════════════════════════
   HİZMET DETAY  ·  /Hizmetler/{slug}
   Renk değişkeni: --hizmet-renk (inline, slug'dan kararlı seçilir)

   ⚠ SINIF ÖNEKİ BİLİNÇLİ AYRI (.hdet-*):
   Ürün detayının stili (yazilim-detay.css) .detay-* öneklerini kullanır.
   Aynı adlar kullanılsaydı iki dosya aynı sayfada birlikte yüklendiğinde
   (ör. ileride ortak bir bölüm eklenirse) AYNI ÖZGÜLLÜKTE kurallar çakışır
   ve sonra yüklenen dosya sessizce kazanırdı. Ayrı önek bu riski kökten
   ortadan kaldırır; yazilim-detay.css'e HİÇ dokunulmadı.
   ══════════════════════════════════════════════════════════════ */

.hizmet-detay {
    --renk: var(--hizmet-renk, #0d6efd);
    color: #1e293b;
    overflow-x: hidden;
}

.hizmet-detay .hdet-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--renk);
    margin-bottom: .6rem;
}

.hizmet-detay .hdet-section-title {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1.2rem;
    line-height: 1.2;
}

.hizmet-detay .hdet-section {
    padding: 5rem 0;
}

.hizmet-detay .hdet-section:nth-of-type(even) {
    background: #f8fafc;
}

/* ── HERO ─────────────────────────────────────────────── */
.hdet-hero {
    position: relative;
    padding: 8rem 0 5rem;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    overflow: hidden;
}

.hdet-hero-glow {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle, color-mix(in srgb, var(--renk) 45%, transparent) 0%, transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}

.hdet-hero .container {
    position: relative;
    z-index: 1;
}

.hdet-breadcrumb {
    margin-bottom: 2rem;
}

.hdet-breadcrumb .breadcrumb {
    margin: 0;
    --bs-breadcrumb-divider-color: #64748b;
}

.hdet-breadcrumb .breadcrumb-item a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .2s;
}

.hdet-breadcrumb .breadcrumb-item a:hover {
    color: #fff;
}

.hdet-breadcrumb .breadcrumb-item.active {
    color: #e2e8f0;
}

.hdet-badge {
    display: inline-flex;
    align-items: center;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--renk) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--renk) 40%, transparent);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.hdet-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 1rem;
}

.hdet-lead {
    font-size: 1.15rem;
    color: #cbd5e1;
    max-width: 40rem;
    margin: 0 0 2rem;
    line-height: 1.7;
}

.hdet-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn-hdet-primary,
.btn-hdet-outline {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.7rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-hdet-primary {
    background: var(--renk);
    color: #fff;
    box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--renk) 70%, transparent);
}

.btn-hdet-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -8px color-mix(in srgb, var(--renk) 80%, transparent);
    color: #fff;
}

.btn-hdet-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}

.btn-hdet-outline:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-3px);
}

.btn-hdet-outline.light {
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}

.btn-hdet-outline.light:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
}

.hdet-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.hdet-trust li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    color: #cbd5e1;
}

.hdet-trust li i {
    color: var(--renk);
}

.hdet-hero-card {
    aspect-ratio: 1;
    max-width: 320px;
    margin: 0 auto;
    border-radius: 28px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--renk) 22%, transparent), color-mix(in srgb, var(--renk) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--renk) 35%, transparent);
    display: grid;
    place-items: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}

.hdet-hero-card i {
    font-size: 7rem;
    color: var(--renk);
    filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--renk) 60%, transparent));
}

/* ── ÜST BÖLÜM VİDEOSU ────────────────────────────────────
   Ortak .hdet-video bileşeninin üstüne biner; oynatma davranışı, kapak
   görseli ve play düğmesi aşağıdaki "TANITIM VİDEOSU" bloğundan gelir.

   ⚠ SEÇİCİLERDEKİ `.hizmet-detay` ÖNEKİ ZORUNLU — süs değil:
   .hdet-video kuralları bu bloktan SONRA tanımlıdır; aynı özgüllükte
   (tek sınıf) olsalardı sonra gelen kazanır ve buradaki değerler sessizce
   ezilirdi. Önek özgüllüğü bir sınıf yükselttiği için sıra belirleyici olmuyor.
   Yeni bir hero kuralı eklerken öneki KOYMAYI UNUTMA. */
.hizmet-detay .hdet-hero-video {
    max-width: none;   /* ortadaki geniş videonun 880px sınırı hero'da geçersiz */
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--renk) 35%, transparent);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
}

.hizmet-detay .hdet-hero-video img {
    filter: brightness(.85);
}

.hizmet-detay .hdet-hero-video:hover img {
    filter: brightness(.7);
}

.hizmet-detay .hdet-hero-video .hdet-video-play {
    width: 68px;
    height: 68px;
    font-size: 2rem;
}

/* Kapak üzerindeki küçük etiket. Tıklanınca kutunun içi iframe ile
   değiştirildiğinden oynatma başlar başlamaz kendiliğinden kaybolur.
   pointer-events:none → etiket, kutunun tıklamasını yutmaz. */
.hdet-hero-video-etiket {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .65);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #e2e8f0;
    font-size: .78rem;
    font-weight: 600;
    pointer-events: none;
}

.hdet-hero-video-etiket i {
    color: #ff0000;
    font-size: .95rem;
}

/* ── TANITIM YAZISI + ÖZELLİKLER ──────────────────────── */
.hdet-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 1.1rem;
}

.hdet-feature-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .25);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
}

.hdet-feature-box.in {
    opacity: 1;
    transform: none;
}

.hdet-feature-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1.2rem;
}

.hdet-feature-title i {
    color: var(--renk);
}

.hdet-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.hdet-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .98rem;
    color: #334155;
    line-height: 1.5;
}

.hdet-feature-list li i {
    color: var(--renk);
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

/* ── TANITIM VİDEOSU ──────────────────────────────────── */
.hdet-video {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .55);
    background: #000;
}

.hdet-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s, filter .3s;
    filter: brightness(.75);
}

.hdet-video:hover img {
    transform: scale(1.04);
    filter: brightness(.6);
}

.hdet-video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 84px;
    height: 84px;
    border: none;
    border-radius: 50%;
    background: var(--renk);
    color: #fff;
    font-size: 2.4rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--renk) 80%, transparent);
    transition: transform .25s;
}

.hdet-video-play::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--renk) 60%, transparent);
    animation: hdet-pulse 2s infinite;
}

@keyframes hdet-pulse {
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.hdet-video:hover .hdet-video-play {
    transform: scale(1.08);
}

.hdet-video.playing {
    cursor: default;
}

.hdet-video.playing iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── GALERİ ───────────────────────────────────────────── */
.hdet-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
}

.hdet-gallery-item {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 14px 34px -20px rgba(15, 23, 42, .4);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease, box-shadow .3s;
}

.hdet-gallery-item.in {
    opacity: 1;
    transform: none;
}

.hdet-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.hdet-gallery-item:hover img {
    transform: scale(1.06);
}

.hdet-gallery-item:hover {
    box-shadow: 0 22px 44px -18px rgba(15, 23, 42, .55);
}

.hdet-gallery-zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--renk) 55%, transparent);
    color: #fff;
    font-size: 2rem;
    opacity: 0;
    transition: opacity .3s;
}

.hdet-gallery-item:hover .hdet-gallery-zoom {
    opacity: 1;
}

/* ── SSS (Accordion) ──────────────────────────────────── */
.hdet-faq {
    max-width: 820px;
    margin: 0 auto;
}

.hdet-faq .accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 14px !important;
    margin-bottom: .85rem;
    overflow: hidden;
    background: #fff;
}

.hdet-faq .accordion-button {
    font-weight: 600;
    font-size: 1.02rem;
    color: #0f172a;
    padding: 1.15rem 1.3rem;
    background: #fff;
}

.hdet-faq .accordion-button:not(.collapsed) {
    color: var(--renk);
    background: color-mix(in srgb, var(--renk) 7%, #fff);
    box-shadow: none;
}

.hdet-faq .accordion-button:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--renk) 25%, transparent);
}

.hdet-faq .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.hdet-faq .accordion-body {
    color: #475569;
    line-height: 1.7;
    padding: 0 1.3rem 1.3rem;
}

/* Cevap paragraflara bölünür (HukukiMetinHelper.Bicimle) — paragraflar arası boşluk
   verilir, SON paragraf akordeon kutusunu şişirmesin diye sıfırlanır.
   ⚠ Eski "white-space: pre-line" bu yüzden KALKTI: satırlar artık <p> olarak gelir,
   pre-line kalsaydı paragraf içindeki boşlukları da korurdu. */
.hdet-faq .accordion-body p,
.hdet-faq .accordion-body .hdet-sss-liste {
    margin: 0 0 0.75rem;
}

.hdet-faq .accordion-body .hdet-sss-liste {
    padding-left: 1.25rem;
}

    .hdet-faq .accordion-body p:last-child,
    .hdet-faq .accordion-body .hdet-sss-liste:last-child {
        margin-bottom: 0;
    }

/* ── MÜŞTERİ YORUMLARI (07.08.2026) ────────────────────────
   Hizmetlerin yorumu 07.08.2026'da geldi (dbo.Yorum, tip='hizmet').
   Kart yapısı ürün detayındakiyle (detay-review-*) aynı fikirdedir ama
   sınıflar AYRIDIR — iki dosya birbirinin stilini paylaşmaz (bkz. dosya başı).
   Vurgu rengi yine --renk: hizmetin slug'ından kararlı seçilen renk. */
.hdet-review {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.6rem;
    box-shadow: 0 14px 34px -24px rgba(15, 23, 42, .3);
    transition: transform .25s, border-color .25s;
}

.hdet-review:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--renk) 45%, transparent);
}

.hdet-review-stars {
    color: #f59e0b;
    font-size: .95rem;
    letter-spacing: 2px;
    margin-bottom: .9rem;
}

.hdet-review-text {
    flex: 1;
    margin: 0 0 1.3rem;
    color: #334155;
    line-height: 1.7;
    font-size: .97rem;
}

.hdet-review-author {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.hdet-review-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--renk) 14%, transparent);
    color: var(--renk);
    font-weight: 700;
}

.hdet-review-author strong {
    display: block;
    font-size: .95rem;
    color: #0f172a;
    line-height: 1.3;
}

.hdet-review-author span {
    font-size: .82rem;
    color: #64748b;
}

[data-bs-theme="dark"] .hizmet-detay .hdet-review {
    background: var(--surface);
    border-color: var(--surface-border);
    box-shadow: var(--shadow-soft);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-review-text { color: var(--text-muted); }
[data-bs-theme="dark"] .hizmet-detay .hdet-review-author { border-top-color: var(--surface-border); }
[data-bs-theme="dark"] .hizmet-detay .hdet-review-author strong { color: var(--text-color); }
[data-bs-theme="dark"] .hizmet-detay .hdet-review-author span { color: var(--text-muted); }

/* ── DİĞER HİZMETLER ──────────────────────────────────── */
.hdet-related-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.5rem;
    padding-right: 3rem;   /* sağ üstteki ok başlıkla çakışmasın */
    text-decoration: none;
    box-shadow: 0 14px 34px -24px rgba(15, 23, 42, .3);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    opacity: 0;
    transform: translateY(24px);
}

.hdet-related-card.in {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s ease, box-shadow .25s, border-color .25s;
}

.hdet-related-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--renk) 50%, transparent);
    box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--renk) 55%, transparent);
}

.hdet-related-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--renk);
    background: color-mix(in srgb, var(--renk) 12%, #fff);
}

.hdet-related-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .35rem;
}

/* Açıklama uzun olabilir (nvarchar MAX) — kart yüksekliğini üç satırla sınırla. */
.hdet-related-card p {
    font-size: .9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hdet-related-arrow {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: #cbd5e1;
    font-size: 1.1rem;
    transition: transform .25s, color .25s;
}

.hdet-related-card:hover .hdet-related-arrow {
    color: var(--renk);
    transform: translateX(4px);
}

/* ── CTA ──────────────────────────────────────────────── */
.hdet-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.hdet-cta-content {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.hdet-cta-content h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 1rem;
}

.hdet-cta-content p {
    color: #cbd5e1;
    font-size: 1.1rem;
    margin: 0 0 2rem;
}

.hdet-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ── LIGHTBOX (KALDIRILDI — 21.09.2026) ───────────────────
   Sayfanın kendi el yapımı ışık kutusu (tek görsel, gezinme ve alt yazı yok)
   yerini sitenin ortak kutusuna bıraktı: Fancybox 5 +
   wwwroot/tema/js/galeri-fancybox.js. Galeri bağlantıları artık
   data-fancybox / data-caption taşır; buradaki kurallar ölü kaldığı için silindi.
   ⚠ .detay-gallery / .hdet-gallery ve -zoom kuralları YERİNDE — onlar ızgaranın
   kendisidir, ışık kutusuyla ilgili değil. */

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 991.98px) {
    .hdet-hero {
        padding: 6.5rem 0 4rem;
    }

    .hdet-hero-card {
        max-width: 240px;
        margin-top: 2rem;
    }

    /* Tek sütuna düşünce video metnin altına iner — nefes payı bırak.
       Genişliği ikon kartı gibi daraltMA: video okunabilirliği boyuta bağlıdır. */
    .hdet-hero-video {
        margin-top: 2.5rem;
    }

    .hdet-hero-video .hdet-video-play {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .hizmet-detay .hdet-section {
        padding: 3.5rem 0;
    }
}

@media (max-width: 575.98px) {
    .hdet-cta,
    .hdet-cta-buttons {
        flex-direction: column;
    }

    .btn-hdet-primary,
    .btn-hdet-outline {
        justify-content: center;
        width: 100%;
    }

    .hdet-trust {
        flex-direction: column;
        gap: .6rem;
    }
}

/* ═════════════ KARANLIK TEMA — Hizmet Detay ═════════════ */
[data-bs-theme="dark"] .hizmet-detay {
    color: var(--text-color);
}

/* Açık bölüm zemini (even sections) */
[data-bs-theme="dark"] .hizmet-detay .hdet-section:nth-of-type(even) {
    background: var(--darker-bg);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-section-title {
    color: var(--text-color);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-text {
    color: var(--text-muted);
}

/* ── Özellik kutusu ─────────────────────────────────── */
[data-bs-theme="dark"] .hizmet-detay .hdet-feature-box {
    background: var(--surface);
    border-color: var(--surface-border);
    box-shadow: var(--shadow-soft);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-feature-title {
    color: var(--text-color);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-feature-list li {
    color: var(--text-muted);
}

/* ── SSS / Accordion ────────────────────────────────── */
[data-bs-theme="dark"] .hizmet-detay .hdet-faq .accordion-item {
    background: var(--surface);
    border-color: var(--surface-border);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-faq .accordion-button {
    background: var(--surface);
    color: var(--text-color);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-faq .accordion-button:not(.collapsed) {
    color: var(--renk);
    background: color-mix(in srgb, var(--renk) 14%, var(--surface));
}

[data-bs-theme="dark"] .hizmet-detay .hdet-faq .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23e6edf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .hizmet-detay .hdet-faq .accordion-body {
    color: var(--text-muted);
}

/* ── Diğer hizmetler kartı ──────────────────────────── */
[data-bs-theme="dark"] .hizmet-detay .hdet-related-card {
    background: var(--surface);
    border-color: var(--surface-border);
    box-shadow: var(--shadow-soft);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-related-icon {
    background: color-mix(in srgb, var(--renk) 18%, var(--surface));
}

[data-bs-theme="dark"] .hizmet-detay .hdet-related-card h3 {
    color: var(--text-color);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-related-card p {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .hizmet-detay .hdet-related-arrow {
    color: var(--text-muted);
}

/* ── TANITIM GÖRSELİ (SQL/32, 21.09.2026) ─────────────────────
   Tanıtım bölümünün kapak görseli — İSTEĞE BAĞLI, yoksa bölüm yalnız
   metinden oluşur. Galeri şeridinden ayrıdır: orası "ekran görüntüleri",
   burası anlatının tek kapağı. Tıklanınca ortak ışık kutusunda büyür. */
.hdet-tanitim-gorsel {
    display: block;
    margin: 0 0 1.5rem;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    border: 1px solid rgba(148, 163, 184, .22);
}

.hdet-tanitim-gorsel img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.hdet-tanitim-gorsel:hover img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .hdet-tanitim-gorsel img,
    .hdet-tanitim-gorsel:hover img {
        transition: none;
        transform: none;
    }
}