/* ===== FONT ===== */
@font-face {
    font-family: 'Heal The Web';
    src: url('../fonts/HealTheWebA-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Sayfa zemini. NOT: bu değişken çift görev yapıyor — sayfa zemini olmasının
       yanı sıra koyu mavi CTA bölümünde metin/buton rengi olarak da kullanılıyor
       (ters kontrast). Yani burayı değiştirmek oradaki yazıları da bu tona çeker;
       kırık beyaz olmaları kasıtlı ve zeminle tutarlı.
       Açılış animasyonu bundan BAĞIMSIZ beyaz kalır — bkz. header.php .intro-splash. */
    --color-bg: #f3f1f0;
    --color-text: #1a1a1a;
    --color-text-light: #666666;
    --color-border: #e5e5e5;
    --color-accent: #164F9F;
    --color-hover: #f5f5f5;
    --font-main: 'Heal The Web', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: 'Heal The Web', 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
    --container-max: 1520px;
    --header-height: 80px;
    --transition: 0.3s ease;
    /* Özel imleç.
       default = ok (her yer), pointer = gekko ayağı (tıklanabilir öğeler).
       Ok'suz, her yeri "el" yapan kurgu yanlıştı: kullanıcı neyin tıklanabilir
       olduğunu ayırt edemiyordu.

       Sayılar HOTSPOT: tarayıcının tıklamayı saydığı piksel, görselin sol-üstünden
       ölçülür. Görselden piksel piksel ölçüldü — ok'un ucu (2,3), gekko ayağının
       en üst parmağı (13,2). Bu değerler yanlış olursa tıklama, imlecin göründüğü
       yerden kayık algılanır. Görselleri değiştirirsen bu sayıları da yeniden ölç. */
    --cursor-default: url('../img/cursor/cursor-arrow-32.png') 2 3, auto;
    --cursor-pointer: url('../img/cursor/cursor-hand-32.png') 13 2, pointer;
}

/* Retina: destekleyen tarayıcı 64'lük varyantı kullansın, imleç bulanık kalmasın.
   Desteklemeyen tarayıcı yukarıdaki düz url'de kalır — bozulmaz. */
@supports (cursor: image-set(url('../img/cursor/cursor-arrow-32.png') 1x) 2 3, auto) {
    :root {
        --cursor-default: image-set(
            url('../img/cursor/cursor-arrow-32.png') 1x,
            url('../img/cursor/cursor-arrow-64.png') 2x) 2 3, auto;
        --cursor-pointer: image-set(
            url('../img/cursor/cursor-hand-32.png') 1x,
            url('../img/cursor/cursor-hand-64.png') 2x) 13 2, pointer;
    }
}

/* ===== SCROLLBAR ===== */
/* Firefox: kalın gri çubuk yerine ince, zeminle uyumlu bir çizgi. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-light) var(--color-bg);
}

/* Chrome / Edge / Safari: kalın gri şeridi, kenarları zemine gömülü
   (border + background-clip) ince bir "hap" ile değiştiriyoruz — böylece
   çubuk ekranın kenarına yapışık değil, biraz boşluklu ve yuvarlak durur. */
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-text-light);
    border-radius: 999px;
    border: 3px solid var(--color-bg);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent);
}

::-webkit-scrollbar-corner {
    background: var(--color-bg);
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

/* ===== ÖZEL İMLEÇ ===== */
/* cursor kalıtsaldır: html'e verince tüm sayfa devralır. */
html {
    cursor: var(--cursor-default);
}

a,
button,
summary,
label[for],
select,
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
[role="button"] {
    cursor: var(--cursor-pointer);
}

/* Metin alanlarında yazı imleci kalsın; yoksa html'den özel imleci devralırlar. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
[contenteditable="true"] {
    cursor: text;
}

/* Devre dışı öğede "tıklanabilir" imleci göstermek yalan söylemektir.
   Metin kuralından SONRA gelmeli; yoksa devre dışı input yine yazı imleci gösterir. */
button:disabled,
select:disabled,
input:disabled,
textarea:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

/* Dokunmatik cihazlarda imlecin anlamı yok; boşuna indirilmesin. */
@media (hover: none) {
    html,
    a,
    button,
    summary,
    label[for],
    select,
    input[type="submit"],
    input[type="button"],
    input[type="checkbox"],
    input[type="radio"],
    input[type="file"],
    [role="button"] {
        cursor: auto;
    }
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== HEADER ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--color-bg);
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
    height: 44px;
    flex-shrink: 0;
}

.logo img {
    height: 44px;
    min-width: auto;
    width: auto;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-list {
    display: flex;
    gap: 32px;
}

.nav-list a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text);
    transition: color var(--transition);
}

.nav-list a:hover,
.nav-list a.active {
    color: var(--color-accent);
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.lang-switch a {
    opacity: 0.4;
    transition: opacity var(--transition);
}

.lang-switch a.active,
.lang-switch a:hover {
    opacity: 1;
}

.lang-switch span {
    opacity: 0.3;
}

/* Mobile Nav Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: var(--cursor-pointer);
    padding: 8px;
    z-index: 1100;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: var(--transition);
}

/* Hamburger → X animasyonu */
.nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobil kontroller (dil + hamburger) — masaüstünde gizli */
.mobile-controls {
    display: none;
    align-items: center;
    gap: 12px;
}

.lang-switch--mobile {
    font-size: 0.78rem;
}

/* ===== MAIN ===== */
.site-main {
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height) - 80px);
}

.page-section {
    padding: 10px 0 40px;
}

.page-section.works-section {
    padding: 10px 16px 40px;
}

.page-title {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 40px;
    color: var(--color-text-light);
}

/* ===== VIDEO / MEDIA GRID ===== */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.video-card {
    position: relative;
    overflow: hidden;
    cursor: var(--cursor-pointer);
    aspect-ratio: 16 / 9;
    background: #f0f0f0;
    border-radius: 14px;
}

.video-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}

.video-card:hover img {
    filter: grayscale(100%) brightness(0.7);
    transform: scale(1.03);
}

.video-card .card-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 16px 20px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s ease;
    text-align: right;
}

.video-card:hover .card-overlay {
    opacity: 1;
}

.card-overlay h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.card-overlay span {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 4px;
    display: block;
}

/* ===== LIGHTBOX ===== */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    /* Modal içindeki kaydırma sınıra dayanınca arkadaki sayfaya taşmasın. */
    overscroll-behavior: contain;
}

.lightbox.active {
    display: flex;
}

/* Modalin yüksekliği = 16:9 medya + altındaki şerit (bilgi çubuğu, sayaç, thumb'lar).
   Genişliği yalnızca 90vw/1200px'e bağlarsak alçak ekranda (laptop, yatay telefon) 16:9 medya
   tek başına tüm yüksekliği yiyor ve alttaki şerit kesiliyordu. Bu yüzden genişliği ekran
   yüksekliğinden de türetiyoruz: kısa ekranda kutu daralır, ikisi birlikte sığar.

   --lb-chrome = alttaki şeridin yüksekliği. Buradaki değer yalnızca JS çalışmazsa geçerli kaba
   bir taban; modal açılırken main.js şeridi ölçüp gerçek değeri yazar (bkz. fitLightbox).
   Doğruluk bu tahmine bağlı DEĞİL: ölçüm hiç gelmese bile medya esneyerek şeride yer açar
   (.lightbox-content flex: 0 1 auto). Tahmin yalnızca medyanın ne kadar büyük durabileceğini
   etkiler, şeridin görünüp görünmeyeceğini değil. */
.lightbox-inner {
    --lb-chrome: 160px;
    --lb-vh: 90vh;
    width: min(90vw, 1200px, calc((var(--lb-vh) - var(--lb-chrome)) * 16 / 9));
    /* Aşırı basık pencerede kutu okunmaz genişliğe düşmesin; o noktada kaydırma devreye girer. */
    min-width: min(90vw, 420px);
    max-height: var(--lb-vh);
    background: #000;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Mobil adres çubuğu açılıp kapandıkça 100vh yanılır; destekleyen tarayıcı dvh'ye geçsin. */
@supports (height: 1dvh) {
    .lightbox-inner {
        --lb-vh: 90dvh;
    }
}

/* Medya alanı sığmadığında KÜÇÜLEN taraf burasıdır; alttaki şerit asla küçülmez.
   flex-grow bilerek 0 — fazla yer varsa medya 16:9'un üstüne çıkıp uzamasın.
   min-height: 0 olmadan flex item küçülmeyi reddeder (varsayılan min-height: auto). */
.lightbox-content {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    background: #000;
    overflow: hidden;
    flex: 0 1 auto;
    min-height: min(200px, 30vh);
}

.lightbox-content iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Fotoğraf için: video ile aynı 16:9 oran.
   Zemin bilerek #000 (eskiden #111): alçak ekranda kutu 16:9'dan basık kalırsa resim
   object-fit: contain ile ortalanır ve yanlarda boşluk doğar — zemin modalinkiyle aynı
   siyah olduğunda bu boşluk görünmez, kutu tek parça durur. */
.lightbox-content--photo {
    aspect-ratio: 16 / 9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-height: min(200px, 30vh);
    overflow: hidden;
    position: relative;
}

.lightbox-content--photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 2px;
}

/* Galeri slaytı resim de olabilir video da — aktif olan gösterilir, diğeri gizlenir.
   Videodan çıkınca iframe'in src'si JS tarafında boşaltılır (oynatma durur). */
.lightbox-content--photo img,
.lightbox-content--photo iframe {
    display: none;
}

.lightbox-content--photo.is-image img {
    display: block;
}

.lightbox-content--photo.is-video iframe {
    display: block;
}

/* Lightbox Info Bar */
.lightbox-info {
    background: #000;
    padding: 16px 24px;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.lightbox-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 20px;
    /* Bir proje çok sayıda hizmete bağlı olabilir; meta sığmazsa başlığın altına iner. */
    flex-wrap: wrap;
}

.lightbox-info-title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    min-width: 0;
}

.lightbox-info-meta {
    color: rgba(255,255,255,0.7);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Burada bilerek nowrap yok: 10 hizmetli bir projede satır yatayda taşıp ekrandan
       çıkıyordu. Sarmalanmaya izin veriliyor — taşmak yerine alt satıra geçer. */
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lightbox-info-desc {
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 10px 0 0 0;
    max-width: 700px;
    /* Şerit medyayı ezecek kadar büyümesin: çok uzun açıklama kendi içinde kaydırılır.
       ~5 satır; sığan açıklamada kaydırma çubuğu görünmez. */
    max-height: 8em;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lightbox-info-desc:empty {
    display: none;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: #fff;
    background: rgba(0,0,0,0.5);
    border: none;
    cursor: var(--cursor-pointer);
    z-index: 2001;
    line-height: 1;
    opacity: 0.85;
    transition: opacity var(--transition), background var(--transition);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    opacity: 1;
    background: rgba(0,0,0,0.8);
}

/* Çok basık ekran (yatay tutulan telefon, ~330px viewport yüksekliği).
   Orada her şeyi tam boyda göstermek fizikselen mümkün değil: şeridi sıkıştırıp medyanın
   tabanını düşürüyoruz ki içerik yine de tek ekrana sığsın. Yetmediği uçta .lightbox-inner'ın
   overflow-y: auto'su devreye girer — kesme değil, kaydırma. */
@media (max-height: 520px) {
    .lightbox-content,
    .lightbox-content--photo {
        min-height: 110px;
    }

    .lightbox-info {
        padding: 10px 16px;
    }

    .lightbox-info-desc {
        max-height: 3.2em;
        margin-top: 6px;
    }

    .gallery-counter {
        padding: 6px 0 2px;
    }

    .gallery-thumbs {
        padding: 6px 12px 10px;
    }
}

/* ===== GALLERY NAV (photo lightbox) ===== */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    font-size: 2.4rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--cursor-pointer);
    border-radius: 50%;
    z-index: 10;
    transition: background var(--transition);
    line-height: 1;
}

.gallery-nav:hover {
    background: rgba(0,0,0,0.7);
}

.gallery-nav--prev {
    left: 12px;
}

.gallery-nav--next {
    right: 12px;
}

.gallery-counter {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    letter-spacing: 2px;
    padding: 10px 0 4px;
    background: #000;
    flex: 0 0 auto;
}

.gallery-thumbs {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px 16px;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
    background: #000;
    flex: 0 0 auto;
}

.gallery-thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.3);
    border: 3px solid #000;
}

.gallery-thumbs::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,0.5);
}

.gallery-thumb {
    position: relative;
    width: 56px;
    height: 40px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    background: none;
    line-height: 0;
    overflow: hidden;
    cursor: var(--cursor-pointer);
    opacity: 0.5;
    transition: opacity var(--transition), border-color var(--transition);
    flex-shrink: 0;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb.active {
    opacity: 1;
    border-color: #fff;
}

.gallery-thumb:hover {
    opacity: 0.85;
}

/* Thumb şeridinde videoyu resimden ayıran oynat rozeti */
.gallery-thumb-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ===== PARTNERS GRID ===== */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.partner {
    aspect-ratio: 3 / 2;
    background: #fff;
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    padding: 32px 28px;
    transition: all 220ms ease;
    position: relative;
}

.partner:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(22, 79, 159, 0.10);
}

.partner img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.7);
    transition: filter 220ms ease;
}

.partner:hover img {
    filter: grayscale(0) opacity(1);
}

/* ===== FOOTER ===== */
/* Footer, header'ın 1520px'lik .container'ını DEĞİL, sayfa içeriğinin ritmini
   izler: bölümlerde olduğu gibi yanlarda 48px padding, içeride 1200px'e
   ortalanmış blok (bkz. .hizmetler-section / .cta-inner / .about-grid).
   .container kullanılırsa footer 1520px'e yayılır ve ortalanmış içerik
   sütununa göre sola kaymış görünür. */
.site-footer {
    padding: 0 48px;
    /* Kalın accent çizgisi — footer'ı sayfadan net ayıran marka vurgusu.
       İnce gri kenarlıkla footer sayfanın devamı gibi görünüyordu. */
    border-top: 3px solid var(--color-accent);
}

.footer-headline,
.footer-grid,
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
}

/* Büyük kapanış cümlesi — vurgulu kelime <em> ile accent renginde basılır. */
.footer-headline {
    padding-top: 64px;
}

/* Tipografi .about-title / .playlist-title ile aynı: display font, 700, büyük harf. */
.footer-headline h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-text);
}

.footer-headline h2 em {
    font-style: normal;
    color: var(--color-accent);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 48px;
}

.footer-brand img {
    height: 36px;
    width: auto;
    display: block;
    margin-bottom: 16px;
}

.footer-brand p {
    font-size: 0.82rem;
    color: var(--color-text-light);
    max-width: 260px;
    margin-bottom: 20px;
}

.footer-kicker {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 18px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-links a {
    font-size: 0.85rem;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

.footer-links a:hover {
    color: var(--color-accent);
}

.footer-links-more {
    color: var(--color-accent) !important;
    font-weight: 600;
}

.footer-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-contact li {
    font-size: 0.85rem;
    color: var(--color-text);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.footer-contact svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-accent);
}

.footer-contact a {
    color: inherit;
    text-decoration: none;
}

.footer-contact a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
    padding-bottom: 24px;
}

.footer-bottom p {
    font-size: 0.72rem;
    color: var(--color-text-light);
    letter-spacing: 0.02em;
    margin: 0;
}

/* Platform sayısı arttıkça dar ekranda alt satıra insin, taşmasın.
   Negatif margin KUTUYA verilir, tek tek <a>'lara değil: ikon 20px, kutusu 32px,
   yani solda 6px iç boşluk var. Bu 6px geri alınınca ilk ikonun çizimi üstündeki
   logo/metinle aynı hizaya oturur. <a>'lara verilseydi ikonlar arası boşluk da
   eksilir, ikonlar birbirine yapışırdı. */
.footer-social {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    margin-left: -6px;
}

/* İkonun kendisi 20px; kutu 32px. Aradaki boşluk hem dokunma hedefini büyütür hem de
   ikonu kabın kenarından uzak tutar. */
.footer-social a {
    color: var(--color-text-light);
    transition: color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}

.footer-social a:hover {
    color: var(--color-accent);
}

/* Marka ikonlarının çizimi viewBox'ın (0..24) tam kenarına dayanır. <svg> varsayılan olarak
   overflow:hidden'dır; kutu küsuratlı bir piksele denk geldiğinde tarayıcı sağ/alt kenardaki
   son pikseli traşlar ve ikon kırpık görünür. overflow:visible bunu keser. */
.footer-social svg,
.cta-socials svg {
    display: block;
    width: 20px;
    height: 20px;
    overflow: visible;
}

/* ===== CONTACT — SHARED (kicker + titles) ===== */
/* İletişim sayfasındaki koyu mavi tonu */
.section-about,
.section-cta,
.contact-playlist,
.about-services,
.about-cta {
    --color-accent: #103d7d;
}

.kicker {
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.kicker--light { color: rgba(255, 255, 255, 0.65); }

.about-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 0.98;
    margin: 0 0 32px;
    text-transform: uppercase;
}
.about-title em {
    font-style: normal;
    color: var(--color-accent);
}

/* ===== CONTACT — ABOUT SECTION ===== */
.section-about {
    padding: 80px 48px 56px;
}
.about-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 64px;
    align-items: start;
}
/* Hakkımızda sayfası: yanında spotify sütunu yok, tek kolon */
.about-grid--single {
    grid-template-columns: minmax(0, 900px);
}
.about-body p {
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 18px;
    color: var(--color-text);
}
.about-body p + p {
    color: var(--color-text-light);
}
.about-body p:last-child {
    margin-bottom: 0;
}

/* ============================================
   İLETİŞİM SAYFASI — hero / kanallar / harita / playlist
   (Alttaki "Hikâyenizi Anlatın" formu .section-cta'dır, ayrı bloktur.)
   ============================================ */
.contact-shell {
    max-width: 1240px;
    margin: 0 auto;
}

/* — Playlist — */
.contact-playlist {
    padding: 72px 48px;
    background: #f6f7f9;
    border-top: 1px solid var(--color-border);
}
.playlist-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: center;
}
.playlist-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.playlist-title em {
    font-style: normal;
    color: var(--color-accent);
}
.playlist-copy p {
    max-width: 420px;
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--color-text-light);
    margin: 0;
}
.playlist-embed iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: none;
    border-radius: 14px;
}

@media (max-width: 1024px) {
    .playlist-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .playlist-embed iframe { height: 380px; }
}

@media (max-width: 860px) {
    .contact-hero { padding: 56px 20px 48px; }
    .contact-hero-lead { margin-bottom: 28px; }
    .contact-btn {
        flex: 1 1 auto;
        text-align: center;
    }
    .contact-playlist { padding: 48px 20px; }
    .playlist-embed iframe { height: 352px; }
}

/* ===== SERVICES ===== */
.services-section {
    padding: 60px 0 80px;
}

.services-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.services-list li {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1;
    padding: 28px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    transition: color var(--transition);
    cursor: var(--cursor-pointer);
}

.services-list li a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.services-list li:nth-child(odd) {
    padding-right: 40px;
    border-right: 1px solid var(--color-border);
}

.services-list li:nth-child(even) {
    padding-left: 40px;
}

.services-list li:nth-last-child(-n+2) {
    border-bottom: none;
}

.services-list li:hover {
    color: var(--color-accent);
}

/* ===== SERVICE FILTER HEADER ===== */
.service-filter-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 40px 0 20px;
}

.service-filter-header .page-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.service-description {
    width: 100%;
    margin: 10px 0 0;
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.service-back-link {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    transition: opacity var(--transition);
}

.service-back-link:hover {
    opacity: 0.7;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Header: logo solda, mobile-controls sağda */
    .mobile-controls {
        display: flex;
    }

    .nav-toggle {
        display: flex;
    }

    /* Masaüstü dil switcher ve nav-list gizle */
    .lang-switch:not(.lang-switch--mobile) {
        display: none;
    }

    /* Full-screen overlay menü */
    .main-nav {
        position: static;
    }

    .nav-list {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--color-bg);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        z-index: 1050;
        padding: 80px 20px 40px;
    }

    .nav-list.open {
        display: flex;
    }

    .nav-list a {
        font-size: 2rem;
        letter-spacing: 3px;
    }

    /* Mobilde overlay her zaman görünür — dokunmatik cihazlarda hover yok */
    .video-card .card-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
        padding: 12px 14px;
        left: 0;
    }

    .card-overlay h3 {
        font-size: 0.85rem;
        letter-spacing: 1.5px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    /* Footer mobil — bölümlerle aynı yan boşluk (bkz. .hizmetler-section) */
    .site-footer {
        padding: 0 20px;
    }
    .footer-headline {
        padding-top: 44px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding-top: 32px;
        padding-bottom: 36px;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        text-align: center;
    }

    /* Grid düzenlemeleri */
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .page-section.works-section {
        padding: 10px 10px 32px;
    }

    .page-section {
        padding: 32px 0;
    }

    /* Hizmetler */
    .services-list {
        grid-template-columns: 1fr;
    }

    .services-list li {
        font-size: clamp(2rem, 10vw, 3rem);
        padding: 20px 0;
    }

    .services-list li:nth-child(odd) {
        padding-right: 0;
        border-right: none;
    }

    .services-list li:nth-child(even) {
        padding-left: 0;
    }

    .services-list li:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--color-border);
    }

    .services-list li:last-child {
        border-bottom: none;
    }

    /* Referans şeridi */
    .clients-strip {
        padding: 28px 0;
    }

    .clients-track img {
        height: 26px;
        margin-right: 48px;
    }

    /* MODAL — mobil tam ekran */
    .lightbox {
        align-items: center;
    }

    .lightbox-inner {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        border-radius: 0;
        overflow-y: auto;
    }

    /* flex-shrink burada bilerek sıfırlanmıyor: basık pencerede (küçük yatay ekran) medyanın
       küçülüp alttaki şeride yer açması gerekiyor — masaüstündeki flex: 0 1 auto miras alınır. */
    .lightbox-content {
        border-radius: 0;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .lightbox-content--photo {
        aspect-ratio: 16 / 9;
    }

    .lightbox-info {
        padding: 12px 16px;
    }

    .lightbox-info-row {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .lightbox-info-title {
        font-size: 0.95rem;
    }

    .lightbox-info-meta {
        font-size: 0.7rem;
        text-align: center;
    }

    .lightbox-info-desc {
        font-size: 0.8rem;
        text-align: center;
    }

    .lightbox-close {
        top: 12px;
        right: 14px;
        font-size: 2.4rem;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gallery-nav {
        width: 36px;
        height: 36px;
        font-size: 1.8rem;
    }

    .gallery-nav--prev { left: 6px; }
    .gallery-nav--next { right: 6px; }

    .gallery-thumb {
        width: 44px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    /* Küçük ekranlarda tek sütun grid */
    .video-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .video-card {
        aspect-ratio: 16 / 9;
    }

    .page-section.works-section {
        padding: 8px 8px 28px;
    }
}

/* ===== CLIENTS MARQUEE ===== */
.clients-strip {
    width: 100%;
    overflow: hidden;
    padding: 48px 0 40px;
    position: relative;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
}

.clients-strip::before,
.clients-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.clients-strip::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg) 0%, transparent 100%);
}

.clients-strip::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg) 0%, transparent 100%);
}

.clients-track {
    display: flex;
    width: max-content;
    animation: marquee 28s linear infinite;
    align-items: center;
}

.clients-track img {
    height: 36px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    max-width: 160px;
    margin-right: 80px;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== INFINITE SCROLL ===== */
.scroll-sentinel {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: var(--color-text-light);
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: var(--font-main);
    transition: border-color var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-text);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.btn {
    display: inline-block;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    border: 1px solid var(--color-text);
    background: var(--color-text);
    color: var(--color-bg);
    cursor: var(--cursor-pointer);
    border-radius: 4px;
    transition: all var(--transition);
    font-family: var(--font-main);
    text-transform: uppercase;
}

.btn:hover {
    background: transparent;
    color: var(--color-text);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.75rem;
}

.btn-danger {
    border-color: #dc3545;
    background: #dc3545;
}

.btn-danger:hover {
    background: transparent;
    color: #dc3545;
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
}

.btn-secondary:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.85rem;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ============================================
   Contact CTA (Bize Ulaşın — bordo form)
   ============================================ */
.section-cta {
    background: var(--color-accent);
    color: var(--color-bg);
    padding: 88px 48px 96px;
}
.cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.cta-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4.75rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 0.95;
    margin: 0 0 24px;
    text-transform: uppercase;
}
.cta-supporting {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    max-width: 380px;
    margin: 0;
}

/* — Sol sütun: iletişim bilgileri, sosyal ikonlar, küçük harita — */
.cta-details {
    margin-top: 40px;
    max-width: 380px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.cta-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.cta-detail-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.cta-detail-value {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-bg);
    /* Uzun e-posta adresi sütunu taşırmasın */
    overflow-wrap: anywhere;
}
a.cta-detail-value {
    align-self: flex-start;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition);
}
a.cta-detail-value:hover {
    border-bottom-color: var(--color-bg);
}
.cta-detail-link {
    align-self: flex-start;
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
.cta-detail-link span {
    display: inline-block;
    transition: transform var(--transition);
}
.cta-detail-link:hover {
    color: var(--color-bg);
}
.cta-detail-link:hover span {
    transform: translateX(4px);
}

.cta-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.cta-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: var(--color-bg);
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition), transform 180ms;
}
.cta-socials a:hover {
    background: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-accent);
    transform: translateY(-2px);
}

/* Harita: form bölümünün altında kenardan kenara şerit.
   Yükseklik sabit — aspect-ratio verilse geniş ekranda gereksiz uzuyor. */
.contact-map-band {
    display: block;
    line-height: 0;
}
.contact-map-band iframe {
    width: 100%;
    height: 380px;
    border: none;
    display: block;
    /* Boştayken koyu-gri, imleç gelince normal renklerine döner.
       brightness 0.72: siyaha gömmeden, sayfanın koyu formuyla uyumlu. */
    filter: grayscale(1) brightness(0.72) contrast(1.05);
    transition: filter 400ms ease;
}
.contact-map-band:hover iframe {
    filter: none;
}
/* Sol sütun (metin + bilgiler + harita) formdan uzun; form o sütuna göre
   dikeyde ortalanır, yoksa tepede asılı kalıp dengesiz görünüyor. */
.cta-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    align-self: center;
}
.cta-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cta-field label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    text-transform: uppercase;
}
.cta-field input,
.cta-field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0;
    padding: 10px 0 12px;
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--color-bg);
    outline: none;
    transition: border-color 180ms;
    width: 100%;
}
.cta-field textarea {
    min-height: 90px;
    resize: vertical;
}
.cta-field input::placeholder,
.cta-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.cta-field input:focus,
.cta-field textarea:focus {
    border-bottom-color: var(--color-bg);
}
.cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.cta-submit {
    margin-top: 8px;
    align-self: flex-start;
    background: var(--color-bg);
    color: var(--color-accent);
    border: none;
    cursor: var(--cursor-pointer);
    padding: 18px 36px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: transform 180ms, box-shadow 180ms;
}
.cta-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.cta-notice {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    color: var(--color-bg);
    font-weight: 600;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.15);
}
.cta-notice--error {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid var(--color-bg);
}

@media (max-width: 860px) {
    .section-about { padding: 56px 20px 32px; }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .section-cta { padding: 56px 20px 64px; }
    .cta-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .cta-details { max-width: none; margin-top: 32px; }
    /* Dokunmatikte hover yok — harita baştan normal renkleriyle gelsin */
    .contact-map-band iframe {
        height: 300px;
        filter: none;
    }
    .cta-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .cta-submit {
        align-self: stretch;
        text-align: center;
    }
}

/* ===== BIG TITLE (Hizmetler / Referanslar) ===== */
.big-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 0.95;
    margin: 0 0 48px;
    text-transform: uppercase;
}
.big-title em {
    font-style: normal;
    color: var(--color-accent);
}

/* ===== HİZMETLER — kart ızgarası ===== */
.hizmetler-section {
    padding: 72px 48px 64px;
}
.hizmetler-section .inner {
    max-width: 1200px;
    margin: 0 auto;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
/* Temiz Kutu: beyaz zemin, ince gri çerçeve, altta metin-link ok.
   Hover'da çerçeve logo mavisine döner, kart yükselir ve hafif gölge belirir. */
.service-card {
    box-sizing: border-box;
    display: flex;
    min-height: 260px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--color-text);
    cursor: var(--cursor-pointer);
    user-select: none;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.service-card:not(.service-card--empty):hover {
    border-color: var(--color-accent);
    box-shadow: 0 12px 40px rgba(22, 79, 159, 0.10);
    transform: translateY(-4px);
}
.service-card:not(.service-card--empty):active {
    transform: translateY(-1px);
}
/* İçerik dikey hiyerarşi: ikon → başlık → açıklama → (altta, solda) ok.
   Açıklama esneyip boşluğu doldurur, ok her kartta aynı hizada oturur. */
.service-card-inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 32px 32px;
}
.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(22, 79, 159, 0.06);
    color: var(--color-accent);
    transition: background 0.35s ease;
}
.service-icon svg {
    width: 20px;
    height: 20px;
}
.service-card:not(.service-card--empty):hover .service-icon {
    background: rgba(22, 79, 159, 0.12);
}
.service-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.25;
    margin: 22px 0 0;
    color: var(--color-text);
    transition: color 0.35s ease;
}
.service-card:not(.service-card--empty):hover h3 {
    color: var(--color-accent);
}
/* Açıklama 500 karaktere kadar çıkabiliyor — kart yüksekliği kaçmasın diye 3 satırda kırpılır. */
.service-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    line-height: 1.65;
    margin: 10px 0 20px;
    color: var(--color-text-light);
}
/* Ok: yuvarlak buton yerine metin link. Sol alt köşede durur. */
.service-card-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    transition: gap 0.35s ease;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: none;
    flex: none;
    line-height: 1;
}
.service-card:not(.service-card--empty):hover .service-card-arrow {
    gap: 14px;
    color: var(--color-accent);
    background: none;
    transform: none;
}
/* İçeriği olmayan hizmet: kart aynı canlılıkta durur, sadece link değildir —
   imleç ok kalır, hover/active efektleri (yukarıdaki :not() ile) uygulanmaz. */
.service-card--empty {
    cursor: var(--cursor-default);
}

/* ============================================
   HAKKIMIZDA — hizmet bento ızgarası + alt CTA
   Kartlar hizmetler sayfasındaki .service-card ile aynı dili konuşur (beyaz zemin,
   ince çerçeve, 12px köşe); fark, 4 kolonluk ızgarada bazı kartların iki kolon
   kaplaması (.bento-card--wide) ve daha yoğun/kompakt tipografi.
   ============================================ */
.about-services {
    padding: 0 48px 80px;
}
/* Bölümü hakkımızda metninden ayıran çizgi ızgarayla aynı genişlikte durur. */
.about-services .inner {
    max-width: 1240px;
    margin: 0 auto;
    padding-top: 48px;
    border-top: 1px solid var(--color-border);
}
.about-services-head {
    max-width: 620px;
    margin-bottom: 44px;
}
.about-services-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.about-services-intro {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}

/* dense: iki kolonluk kart satır sonuna sığmadığında geride boş hücre bırakır;
   dense, sonraki dar kartı o boşluğa çekip ızgarayı deliksiz kapatır. */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 16px;
}
.bento-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 200px;
    padding: 26px 24px 22px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--color-text);
    cursor: var(--cursor-pointer);
    user-select: none;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.bento-card--wide {
    grid-column: span 2;
}
/* İçeriği olmayan hizmet: kart aynı görünür, sadece link değildir (bkz. .service-card--empty) */
.bento-card--empty {
    cursor: var(--cursor-default);
}
.bento-card:not(.bento-card--empty):hover {
    border-color: var(--color-accent);
    box-shadow: 0 12px 40px rgba(22, 79, 159, 0.10);
    transform: translateY(-4px);
}
.bento-card:not(.bento-card--empty):active {
    transform: translateY(-1px);
}
.bento-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(22, 79, 159, 0.07);
    color: var(--color-accent);
    transition: background 0.35s ease;
}
.bento-icon svg {
    width: 20px;
    height: 20px;
}
/* Tüm kartlar aynı ikon rengini kullanır. Geniş kartlara ayrı (dolu mavi) bir ikon
   verilmişti; geniş kart rastgele seçildiği için o vurgu rastgele bir hizmete
   düşüyor ve anlam taşımıyordu — kaldırıldı. */
.bento-card:not(.bento-card--empty):hover .bento-icon {
    background: rgba(22, 79, 159, 0.14);
}
.bento-card h3 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.25;
    margin: 20px 0 0;
    transition: color 0.35s ease;
}
.bento-card:not(.bento-card--empty):hover h3 {
    color: var(--color-accent);
}
/* Açıklamalar 500 karaktere kadar çıkabiliyor; dar kart 3, geniş kart 2 satırda kırpar. */
.bento-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.83rem;
    line-height: 1.6;
    margin: 10px 0 18px;
    color: var(--color-text-light);
}
.bento-card--wide p {
    -webkit-line-clamp: 2;
    max-width: 520px;
}
.bento-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    line-height: 1;
    transition: gap 0.35s ease;
}
.bento-card:not(.bento-card--empty):hover .bento-arrow {
    gap: 14px;
}

.about-services-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 15px 30px;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    background: none;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: var(--cursor-pointer);
    transition: background 0.3s ease, color 0.3s ease;
}
.about-services-all:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* — Alt CTA: iletişim sayfasındaki koyu mavi bant ile aynı ton — */
.about-cta {
    background: var(--color-accent);
    color: var(--color-bg);
    padding: 84px 48px 92px;
    text-align: center;
}
.about-cta .inner {
    max-width: 760px;
    margin: 0 auto;
}
.about-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 0.98;
    text-transform: uppercase;
    margin: 0 0 20px;
}
.about-cta-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 auto 36px;
    max-width: 560px;
}
.about-cta-btn {
    display: inline-block;
    background: var(--color-bg);
    color: var(--color-accent);
    padding: 18px 40px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: var(--cursor-pointer);
    transition: transform 180ms, box-shadow 180ms;
}
.about-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

@media (max-width: 1100px) {
    .bento-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .about-services { padding: 0 20px 56px; }
    .about-services .inner { padding-top: 40px; }
    .about-services-head { margin-bottom: 32px; }
    .bento-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .about-cta { padding: 64px 20px 72px; }
}
@media (max-width: 560px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-card--wide { grid-column: span 1; }
    .bento-card { min-height: 0; }
    .about-services-all { width: 100%; justify-content: center; }
}

/* ===== REFERANSLAR — yeni bölüm ===== */
.partners-section {
    padding: 72px 48px 80px;
}
.partners-section .inner {
    max-width: 1280px;
    margin: 0 auto;
}
.partners-intro {
    font-size: 0.94rem;
    color: var(--color-text-light);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 0 56px;
}

/* Responsive overrides */
@media (max-width: 1024px) {
    .partners-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .hizmetler-section { padding: 48px 20px 40px; }
    .partners-section  { padding: 48px 20px 56px; }
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .partner { padding: 22px 18px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .service-card-inner { padding: 26px 22px 22px; }
    .big-title { margin-bottom: 36px; }
}
@media (max-width: 560px) {
    .services-grid { grid-template-columns: 1fr; }
}
/* NOT: .intro-splash ve sayfa geçiş stilleri header.php içine kritik inline CSS
   olarak taşındı (FOUC önleme + tek kaynak). Buraya eklemeyin. */
@media (max-width: 480px) {
    .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}