/* SU AGENCY hero: 360° hizmet halkası (partials/ajans-hero.php)

   Yedi hizmet markanın çevresinde bir halka kurar; dönen tarama çizgisi
   "360 derece" sözünü harfi harfine gösterir.

   YERLEŞİM AÇIYLA YAPILIR. Her düğüm merkeze göre döndürülüp yarıçap kadar
   itiliyor, sonra içeriği ters açıyla geri döndürülüyor ki yazı hep düz
   dursun. Böylece hizmet sayısı değişince (liste menüden geliyor) CSS'e
   dokunmadan yeniden dağılıyor — yedi ayrı `top/left` yazmak gerekmiyor.

   ANİMASYON KURALI: döngüyü paylaşan her öğenin KENDİ keyframe'i vardır.
   Ortak döngü 8 sn. */

.ajh {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
}

/* Kare sahne: halka her genişlikte daire kalsın.

   YARIÇAP `cqmin` İLE VERİLİR, YÜZDEYLE DEĞİL. İlk denemede `--yaricap: 40%`
   yazılmıştı; `translate()` içindeki yüzde ÖĞENİN KENDİ kutusuna göre
   çözülüyor, kapsayıcıya göre değil. Düğümler `position: absolute` ve
   içeriği kadar dar olduğu için 40%% birkaç piksel çıktı ve yedi düğüm
   merkezde üst üste bindi.

   `container-type: size` sahneyi kapsayıcı yapıyor; `cqmin` sahnenin kısa
   kenarına göre çözülüyor ve sahne küçüldükçe yarıçap kendiliğinden
   küçülüyor. */
.ajh__sahne {
    position: relative;
    width: min(100%, 440px);
    aspect-ratio: 1;
    container-type: size;
    --yaricap: 39cqmin;
}

/* ---------------------------------------------------------- Halkalar */

.ajh__halka {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.ajh__halka--dis {
    width: 80%;
    height: 80%;
    border: 1px dashed rgba(255, 255, 255, 0.22);
}

.ajh__halka--ic {
    width: 47%;
    height: 47%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: radial-gradient(circle at 50% 50%,
                rgba(34, 211, 238, 0.20) 0%, rgba(34, 211, 238, 0) 70%);
}

/* Dönen tarama: 360 derecenin kendisi.
   Koni gradyanının dar bir dilimi ışıyor, gerisi saydam. */
.ajh__tarama {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
                rgba(34, 211, 238, 0.34) 0deg,
                rgba(34, 211, 238, 0.10) 26deg,
                rgba(34, 211, 238, 0) 62deg,
                rgba(34, 211, 238, 0) 360deg);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: ajh-tarama 8s linear infinite;
}

@keyframes ajh-tarama {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ----------------------------------------------------------- Merkez */

.ajh__merkez {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 44%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ajh__derece {
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
    /* Ajans tipografisi AÇIK: kalın blok rakam kampanya afişi gibi duruyor */
    font-weight: var(--fw-light);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.ajh__marka {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
}

.ajh__alt {
    font-size: 11.5px;
    line-height: 1.4;
    /* Turkuaz ışımanın üstünde 0.72 opaklık 3,2:1'de kalıyordu */
    color: rgba(255, 255, 255, 0.88);
}

/* ---------------------------------------------------------- Düğümler */

/* DÜĞÜM SIFIR BOYUTLU BİR NOKTADIR.

   İlk denemede `width/height` verilmemişti; mutlak konumlu kutu içeriği
   kadar büyüyor (104×60) ve `transform-origin` o kutunun ortasına düşüyordu.
   Dönme noktası merkez olmadığı için yedi düğümün yarıçapı 68–186 px
   arasında dağıldı, açılar da eşit çıkmadı.

   0×0 kutuda dönme ekseni noktanın kendisi; `rotate() translate()` düğümü
   tam olarak çember üstüne koyuyor. İçerik taşar ama kutuyu büyütmez. */
.ajh__dugum {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    /* 1) merkeze göre döndür  2) yarıçap kadar it */
    transform: rotate(var(--aci)) translate(var(--yaricap));
}

/* İçerik ters açıyla geri döndürülür: yazı her düğümde düz durur */
.ajh__dugum-ic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 104px;
    /* Kendi merkezine otur ve açıyı geri al */
    transform: translate(-50%, -50%) rotate(calc(var(--aci) * -1));
    text-align: center;

    /* Sırayla belirme: her düğüm kendi gecikmesiyle.
       Gecikme --sira ile ölçekleniyor; 8 sn'lik döngüye göre ayarlı. */
    opacity: 0;
    animation: ajh-belir 0.5s var(--ease-out) forwards;
    animation-delay: calc(var(--sira) * 0.09s + 0.15s);
}

@keyframes ajh-belir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ajh__ikon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    color: var(--brand-300);
}

.ajh__ikon svg { width: 19px; height: 19px; }

.ajh__ad {
    font-size: 11px;
    font-weight: var(--fw-medium);
    line-height: 1.25;
    /* 0.94 beyaz, koyu bandın üstünde 12,8:1 */
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 3px rgba(15, 23, 42, 0.6);
}

/* ------------------------------------------------------------ Rozet */

.ajh__rozet {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-4);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.08);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.94);
}

.ajh__nokta {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-300);
    animation: ajh-nabiz 8s var(--ease) infinite;
}

@keyframes ajh-nabiz {
    0%, 84%, 100% { opacity: 1;   transform: scale(1); }
    88%           { opacity: 0.5; transform: scale(1.5); }
    92%           { opacity: 1;   transform: scale(1); }
}

/* --------------------------------------------------------- Ölçüler */

@media (max-width: 900px) {
    .ajh__sahne { width: min(100%, 380px); }
    .ajh__dugum-ic { width: 92px; }
    .ajh__ad { font-size: 10.5px; }
}

/* Dar ekranda halka daralır; düğüm yazıları çakışmasın diye
   yarıçap ve ikon küçülür, yazı iki satıra iner. */
@media (max-width: 420px) {
    .ajh__sahne { width: min(100%, 320px); --yaricap: 37cqmin; }
    .ajh__ikon  { width: 32px; height: 32px; }
    .ajh__ikon svg { width: 16px; height: 16px; }
    .ajh__dugum-ic { width: 78px; gap: 3px; }
    .ajh__ad { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .ajh__tarama { animation: none; }
    .ajh__nokta  { animation: none; }
    .ajh__dugum-ic { opacity: 1; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   AJANS HERO TİPOGRAFİSİ — daha açık

   SUSOFTECH bir ürün satıyor; başlığı kalın ve iddialı. Ajans hizmet
   satıyor ve brief "kurumsal, premium, güven veren" diyor. Kalın blok
   başlık orada kampanya afişi gibi duruyor.

   Sınıf yalnız ajans akışında ekleniyor (bkz. Sections/page-header/render.php),
   diğer hero'lar etkilenmiyor. */

.sc-page-header--agency .ph-title {
    font-weight: var(--fw-light);
    letter-spacing: -0.015em;
    /* Açık ağırlıkta satırlar birbirine yapışıyor; nefes payı artırıldı */
    line-height: 1.15;
}

/* Vurgulu kelime kalınlıkla değil, ince bir renk farkıyla ayrılır */
.sc-page-header--agency .ph-title strong,
.sc-page-header--agency .ph-title b {
    font-weight: var(--fw-medium);
    color: var(--brand-200);
}

.sc-page-header--agency .ph-lead {
    font-weight: var(--fw-regular);
    /* Beyazın 0.92'si koyu bandın açık ucunda (#0e7490) 4,80:1 */
    color: rgba(255, 255, 255, 0.92);
}

/* ---- Hero'nun alt boşluğu inceltilir ------------------------------
   Ölçüm (1440 px): içerik 668 px'de bitiyordu, bölüm 848 px'di —
   altta 180 px boş turkuaz-beyaz bant kalıyordu ve sayfa oradan
   kopuyordu.

   Alt dolgu ve açık bandın YÜKSEKLİĞİ BİRLİKTE küçültülür. Yalnız
   dolguyu kısaltmak yazıyı açık zemine düşürürdü; §"hero gradyan
   sözleşmesi" gereği içeriğin bittiği yer ile açık bandın başladığı
   yer arasında en az 40 px kalmalı.

   Yeni değerler: dolgu 120 px, açık bant 78 px → pay 42 px.
   Bölüm 848 → 788 px, boşluk 180 → 120 px.

   YALNIZ AJANS HERO'SUNDA. Diğer sayfaların bandı olduğu gibi kaldı;
   site geneline uygulanacaksa page-header.css'teki taban kural
   değiştirilmeli. */

.sc-page-header--agency {
    padding-bottom: clamp(120px, 8vw, 150px);
    background: linear-gradient(180deg,
                #0f172a 0%,
                #123c52 46%,
                #0e7490 calc(100% - 78px),
                #7dd3fc calc(100% - 32px),
                #ffffff 100%);
}

@media (max-width: 900px) {
    /* Dar ekranda kompozisyon metnin altına iniyor; bant daha da incelir.
       Taban 96 → 76 px: gradyan bandının son durakları 62 px'te bittiği
       için 76 px hâlâ yetiyor, ama hero ile referans şeridi arasındaki
       boşluk 148 px'ten iniyor. */
    .sc-page-header--agency {
        padding-bottom: clamp(76px, 14vw, 120px);
        background: linear-gradient(180deg,
                    #0f172a 0%,
                    #123c52 46%,
                    #0e7490 calc(100% - 62px),
                    #7dd3fc calc(100% - 26px),
                    #ffffff 100%);
    }
}