/* SU AGENCY kreatif vitrini (Sections/agency-creative)

   Sayfadaki diğer bölümler metinle anlatıyor; burası GÖSTERİYOR.
   Solda mozaik, sağda Instagram şeridi. Yazı en aza indirildi.

   Sayfadaki dördüncü kompozisyon ve yine farklı bir dilde:
     hero            → daire
     agency-flow     → yatay yol
     agency-results  → dikey grafik
     agency-creative → MOZAİK + kaydırmalı şerit */

.ajk {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(var(--sp-6), 3vw, var(--sp-10));
    margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
    align-items: start;
}

/* ----------------------------------------------------------- Mozaik */

/*
   DÖRT EŞİT KARE, 2×2 — dış çerçeve de tam kare.

   Önce altı görsel vardı ve 3×2 diziliyordu: hücreler eşitti ama dış
   blok 3:2 kalıyordu. Altı KARE hücreyle dış kareyi kurmak geometrik
   olarak mümkün değil (6 kare bir kareyi döşemez). Dört hücreyle hem
   hücreler hem dış çerçeve kare oluyor.

   Etiket yok: kategori adı yazmak "yalnız bu dört sektör" gibi
   daraltıyordu; çeşitliliği görselin kendisi anlatıyor.
*/
.ajk__mozaik {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
    /* Dış blok kare: iki sütun kare hücre + aradaki boşluk */
    max-width: 560px;
}

.ajk__kare {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--ink-100);

    /* Sırayla belirir; tek seferlik */
    opacity: 0;
    animation: ajk-belir 0.5s var(--ease-out) forwards;
    animation-delay: calc(var(--sira) * 0.07s);
}

.ajk__kare img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out);
}

.ajk__kare:hover img { transform: scale(1.04); }

/* Kategori etiketi: görselin üstünde, alt kenarda.
   Alttaki karartma olmadan beyaz yazı açık görsellerde kayboluyordu. */
.ajk__etiket {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-6) var(--sp-3) var(--sp-3);
    background: linear-gradient(180deg,
                rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.72) 100%);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    /* Karartmanın koyu ucunda beyaz 12,1:1 */
    color: rgba(255, 255, 255, 0.96);
}

@keyframes ajk-belir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------- Instagram şeridi */

.ajk__sag {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/*
   Kaydırmalı şerit — HER ÖLÇÜDE YATAY (sağa doğru).

   Önce masaüstünde dikeydi. Kullanıcı sağa kaydırma istedi: Instagram
   içeriği zaten yatay bir akış olarak okunuyor, dikey liste sayfayı
   da gereksiz uzatıyordu.

   `scroll-snap` ile kartlar hizada duruyor, yarım kart kalmıyor.
*/
.ajk__serit {
    display: flex;
    flex-direction: row;
    gap: var(--sp-3);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: var(--sp-2);
    /* Kaydırma sırasında dokunmatikte dikey kaydırma engellenmesin */
    overscroll-behavior-x: contain;
}

.ajk__serit:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 3px;
    border-radius: var(--r-md);
}

/* İnce kaydırma çubuğu; kalın çubuk şeridi kirletiyordu */
.ajk__serit::-webkit-scrollbar { height: 6px; }
.ajk__serit::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border-radius: var(--r-full);
}

.ajk__reel {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex: none;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    scroll-snap-align: start;
    /* Yatay şeritte kart sabit genişlikte; gömülünce Instagram
       çerçevesinin istediği ~400 px'e genişliyor (aşağıda). */
    width: 232px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--ust) 0%, var(--alt) 100%);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Altı ton döngüsü: aynı renk on kartta tekdüze duruyordu */
.ajk__reel[data-renk="0"] { --ust: #0891b2; --alt: #0e7490; }
.ajk__reel[data-renk="1"] { --ust: #4f46e5; --alt: #3730a3; }
.ajk__reel[data-renk="2"] { --ust: #7c3aed; --alt: #5b21b6; }
.ajk__reel[data-renk="3"] { --ust: #0369a1; --alt: #075985; }
.ajk__reel[data-renk="4"] { --ust: #9333ea; --alt: #6b21a8; }
.ajk__reel[data-renk="5"] { --ust: #0e7490; --alt: #155e75; }

.ajk__reel:hover {
    transform: translateX(3px);
    box-shadow: var(--sh-md);
}

.ajk__oynat {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.14);
}

.ajk__oynat svg { width: 22px; height: 22px; }

.ajk__reel-alt { display: block; }

.ajk__tur {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.25;
}

.ajk__reel-ad {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    /* Koyu kart üstünde 0.84 beyaz ≈ 8,6:1 */
    color: rgba(255, 255, 255, 0.84);
}

.ajk__ipucu {
    font-size: var(--fs-xs);
    color: var(--ink-500);
}

/* ------------------------------------------------------------- Alt */

.ajk__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: clamp(var(--sp-6), 3vw, var(--sp-8));
}

.ajk__not {
    flex: 1 1 340px;
    max-width: 70ch;
    font-size: var(--fs-sm);
    color: var(--ink-600);
}

/* Koyu zeminde */
.section--deep .ajk__ipucu,
.section--deep .ajk__not { color: var(--ink-300); }
.section--deep .ajk__serit::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); }

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

@media (max-width: 980px) {
    /* Mozaik ve şerit alt alta; şerit zaten yatay, ek kural gerekmiyor */
    .ajk { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    /*
     * MOZAİK ÜÇ SÜTUNA İNER. Dört sütunda hücreler 375 px'lik ekranda
     * 75 px'e düşüyordu — ürün görselinin kalitesi o boyutta görünmez,
     * bölümün tek işi göstermekken gösteremez hâle geliyordu. Ölçüldü.
     *
     * Üç sütunda küçük hücre ~109 px, büyük hücre ~226 px.
     */
    .ajk__mozaik { gap: var(--sp-2); }

    .ajk__etiket { font-size: 10px; padding: var(--sp-5) var(--sp-2) var(--sp-2); }
    .ajk__reel   { width: 178px; gap: var(--sp-3); padding: var(--sp-3); }
    .ajk__oynat  { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .ajk__kare { opacity: 1; animation: none; }
    .ajk__kare:hover img { transform: none; }
    .ajk__reel:hover { transform: none; }
}

/* ---- Gömülü Instagram çerçevesi -----------------------------------
   Kart açılışta yalnız kapak; onay verilince ya da tıklanınca içine
   Instagram çerçevesi giriyor (bkz. app.js `igGom`).

   Gömülü kartta kapak GİZLENMEZ, çerçevenin ALTINDA kalır — çerçeve
   yüklenene kadar boş beyaz bir kutu yerine renkli kapak duruyor. */

.ajk__reel.is-gomulu {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    /* Instagram gömmesi ~400 px genişlikten dar alanda kırpılıyor */
    min-height: 540px;
}

.ajk__reel.is-gomulu .ajk__oynat,
.ajk__reel.is-gomulu .ajk__reel-alt {
    position: absolute;
    inset: auto auto 12px 12px;
    /* Çerçeve yüklendikten sonra kapak metni okunmasın diye görünmez;
       DOM'da kalıyor ki ekran okuyucu bağlantıyı yine bulsun. */
    opacity: 0;
    pointer-events: none;
}

.ajk__cerceve {
    display: block;
    width: 100%;
    min-height: 540px;
    border: 0;
    background: #fff;
}

/* Gömülüyken kart "kayma" efektini bırakır: içindeki çerçeve
   tıklanabilir, kartın kendisi artık bir düğme gibi davranmamalı. */
.ajk__reel.is-gomulu:hover {
    transform: none;
    box-shadow: none;
}

/*
   GÖMÜLÜ KART GENİŞLER. Instagram çerçevesi ~320 px altında içeriği
   kırpıyor; kapak kartı 232 px. Gömülen kart 100%% yerine sabit 340 px
   oluyor — şerit yatay kalıyor, komşu kartlar yerinde duruyor.
*/
.ajk__reel.is-gomulu { width: 340px; }

@media (max-width: 420px) {
    /* Dar ekranda 340 px taşardı; kartı ekrana sığdır */
    .ajk__reel.is-gomulu { width: calc(100vw - 3rem); }
}

/* ---- Şerit kaydırma tuşları ---------------------------------------
   Yatay şeridin kaydırılabildiği masaüstünde görünmüyordu. Tuşlar
   şeridin dikey ortasında, kenarlara yaslı duruyor. */

.ajk__serit-sar {
    position: relative;
}

.ajk__ok {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--ink-800);
    box-shadow: var(--sh-md);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}

.ajk__ok svg { width: 20px; height: 20px; }

.ajk__ok--geri  { left: -14px; }
.ajk__ok--ileri { right: -14px; }

.ajk__ok:hover { background: var(--ink-100); }

.ajk__ok:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* Uçta sönen tuş: tıklanabilir görünüp iş yapmayan tuş yanıltıyor.
   Gizlemek yerine soluklaştırılıyor — kaybolan tuş yerleşimi oynatır. */
.ajk__ok[disabled] {
    opacity: 0;
    pointer-events: none;
}

.section--deep .ajk__ok {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(15, 23, 42, 0.9);
    color: #fff;
}

/* Tuşlar şeridin kenarına taştığı için sarmalın soluk kenarı gerekiyor:
   kartlar tuşun altından çıkıp girsin, aniden kesilmesin. */
.ajk__serit {
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

@media (max-width: 620px) {
    /* Dokunmatikte parmakla kaydırmak zaten doğal; tuşlar dar ekranda
       kartların üstüne biniyor. */
    .ajk__ok { display: none; }
    .ajk__serit { -webkit-mask-image: none; mask-image: none; }
}