/* =====================================================================
   HİZMET SAYFALARI — css/hizmet.css
   Yalnızca hizmet sayfalarında yüklenir (site.hizmet._varliklar), style2.css'ten sonra.
   Önekler: hz- ortak · wt- web tasarım · gt- grafik tasarım · sm- sosyal medya · tf- tanıtım filmi · rk- sponsorlu reklam
   Renkler ve eğriler style2.css'in değişkenlerinden: --y sarı, --k antrasit, --paper kâğıt, --ease, --spring.
   Hareket kuralı: sahneler yalnızca ekrandayken oynar ([data-play].is-in, script.js); varsayılan (oynamıyorken)
   görünüm her zaman sahnenin bitmiş halidir. "Hareketi azalt" açıksa animasyonlar kapanır, bitmiş hal kalır.
   ===================================================================== */

/* ---------------------------------------------------------------- ORTAK */
.hz-hero .w {
    align-items: center
}

/* girişte sağdaki koyu sahne paneli (sitenin .cmd-orb dili): sarı şeritte kaybolmaz */
.hz-stage {
    position: relative;
    background: var(--k);
    color: #fff;
    border-radius: 28px;
    padding: clamp(18px, 2.4vw, 28px);
    box-shadow: 0 40px 80px -40px rgba(55, 55, 54, .7)
}

.hz-stage-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(16px, 2vw, 22px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6)
}

.hz-stage-top b {
    color: var(--y)
}

.hz-stage .uy {
    color: #fff
}

/* 01: büyük metnin altındaki paragraflar */
.hz-page .st-story-txt>.lead {
    margin-top: clamp(18px, 2.4vw, 26px)
}

.hz-page .st-story-txt>.lead+.lead {
    margin-top: 12px
}

/* çalışmalar: masaüstünde 3×3, 4 iş varsa 2×2; iki sütunlu ekranda 8 iş (tek kalan olmasın) */
.hz-works {
    grid-template-columns: repeat(3, 1fr)
}

@media (min-width:761px) {
    .hz-works.hz-works-2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 860px;
        margin-inline: auto
    }
}

@media (max-width:760px) {
    .hz-works {
        grid-template-columns: repeat(2, 1fr)
    }

    .hz-works>:nth-child(n+9) {
        display: none
    }
}

@media (max-width:420px) {
    .hz-works {
        grid-template-columns: 1fr
    }

    .hz-works>:nth-child(n+9) {
        display: flex
    }
}

.hz-more {
    display: flex;
    justify-content: center;
    margin-top: clamp(26px, 4vw, 40px)
}

/* diğer hizmetler: hap biçimli bağlantılar */
.hz-other {
    padding-top: clamp(10px, 2vw, 20px);
    padding-bottom: clamp(50px, 8vw, 90px)
}

.hz-other ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.hz-other a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 99px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-weight: 700;
    transition: background .25s, border-color .25s, transform .4s var(--spring)
}

.hz-other a svg {
    width: 18px;
    height: 18px
}

.hz-other a:hover,
.hz-other a:focus-visible {
    background: var(--y);
    border-color: var(--y);
    transform: translateY(-2px)
}

/* koyu bölümdeki kartlar (dört hizmet sayfasında ortak görünüm) */
.hz-dcards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.hz-dcards>li {
    padding: clamp(20px, 2.4vw, 28px);
    border-radius: var(--r);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: border-color .4s, transform .5s var(--spring)
}

.hz-dcards>li:hover {
    border-color: rgba(237, 196, 26, .5);
    transform: translateY(-4px)
}

.hz-dcards h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.18;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px
}

.hz-dcards p {
    color: rgba(255, 255, 255, .72)
}

/* kartın üstündeki küçük canlı çizim alanı */
.hz-pv {
    position: relative;
    height: 132px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden
}

@media (max-width:900px) {
    .hz-dcards {
        grid-template-columns: 1fr
    }
}

/* sekmeler (koyu zeminde): web cihaz boyutu, video oranı */
.hz-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(22px, 3vw, 34px)
}

.hz-tabs>div {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .08)
}

.hz-tabs button {
    padding: 10px 18px;
    border: 0;
    border-radius: 99px;
    background: none;
    color: rgba(255, 255, 255, .72);
    font: 700 14px var(--sans);
    cursor: pointer;
    transition: background .3s, color .3s
}

.hz-tabs button[aria-pressed="true"] {
    background: var(--y);
    color: var(--k)
}

.hz-tabs button:focus-visible {
    outline: 2px solid var(--y);
    outline-offset: 2px
}


/* =====================================================================
   WEB TASARIM (wt-) — resources/views/site/hizmet/web-tasarim.blade.php
   ===================================================================== */

/* ---- giriş sahnesi: tarayıcıda site kendini kurar (iskelet → tasarım), sonra telefonda ----
   Her parça (.k) kendi rengini --c ile taşır; --d sırası. Döngü 11 sn. */
.wt-build {
    position: relative;
    aspect-ratio: 16/11
}

.wt-win {
    position: absolute;
    left: 0;
    top: 0;
    width: 84%;
    bottom: 9%;
    border-radius: 14px;
    background: var(--paper);
    overflow: hidden;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6)
}

.wt-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    background: #E9E5DA
}

.wt-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D2CDBF
}

.wt-bar i:first-child {
    background: var(--y)
}

.wt-bar span {
    display: flex;
    align-items: center;
    height: 15px;
    margin-left: 10px;
    padding: 0 10px;
    border-radius: 8px;
    background: #fff;
    font-size: 9px;
    color: var(--muted)
}

.wt-page {
    display: grid;
    gap: clamp(8px, 1.2vw, 13px);
    padding: clamp(10px, 1.4vw, 15px) clamp(12px, 1.6vw, 17px)
}

.wt-build .k {
    outline: 1.5px dashed transparent;
    background-color: var(--c)
}

.wt-nav {
    display: flex;
    align-items: center;
    gap: 8px
}

.wt-nav b {
    --c: var(--k);
    width: 18%;
    height: 9px;
    border-radius: 3px
}

.wt-nav i {
    --c: #CFCABD;
    width: 9%;
    height: 6px;
    border-radius: 3px
}

.wt-nav i:first-of-type {
    margin-left: auto
}

.wt-nav u {
    --c: var(--y);
    width: 15%;
    height: 14px;
    border-radius: 7px
}

.wt-top {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 12px;
    align-items: center
}

.wt-top>div {
    display: grid;
    gap: 7px
}

.wt-top s {
    --c: var(--k);
    height: 9px;
    width: 92%;
    border-radius: 4px
}

.wt-top s:nth-child(2) {
    width: 72%
}

.wt-top s.s {
    --c: #BDB8AB;
    height: 6px;
    width: 64%
}

.wt-top u {
    --c: var(--y);
    width: 44%;
    height: 16px;
    margin-top: 4px;
    border-radius: 8px
}

.wt-top>span {
    --c: var(--y);
    aspect-ratio: 4/3;
    border-radius: 9px;
    background-image: radial-gradient(circle at 70% 35%, rgba(255, 255, 255, .55) 0 14%, transparent 15%), linear-gradient(160deg, transparent 55%, rgba(55, 55, 54, .18) 56%)
}

.wt-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.wt-cards i {
    --c: #fff;
    aspect-ratio: 5/3;
    border-radius: 7px;
    box-shadow: 0 6px 14px -8px rgba(55, 55, 54, .5)
}

/* telefon: aynı site dar ekranda alt alta */
.wt-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 29%;
    aspect-ratio: 9/18.5;
    padding: 5px;
    border-radius: 20px;
    background: #222221;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14), 0 24px 40px -18px rgba(0, 0, 0, .7)
}

.wt-pscreen {
    display: grid;
    gap: 6px;
    align-content: start;
    height: 100%;
    padding: 9px 8px;
    border-radius: 15px;
    background: var(--paper);
    overflow: hidden
}

.wt-pnav {
    --c: #E3DFD3;
    height: 9px;
    border-radius: 4px
}

.wt-pimg {
    --c: var(--y);
    aspect-ratio: 4/3;
    border-radius: 7px
}

.wt-pscreen s {
    --c: var(--k);
    height: 7px;
    border-radius: 3px
}

.wt-pscreen s.s {
    --c: #BDB8AB;
    width: 70%;
    height: 5px
}

.wt-pscreen u {
    --c: var(--y);
    width: 52%;
    height: 12px;
    border-radius: 6px
}

.wt-pscreen i {
    --c: #fff;
    height: 22px;
    border-radius: 6px;
    box-shadow: 0 4px 10px -6px rgba(55, 55, 54, .5)
}

/* imleç: sayfayı gezer, düğmeye tıklar */
.wt-cur {
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 18px;
    background: var(--k);
    clip-path: polygon(0 0, 100% 66%, 56% 70%, 74% 100%, 58% 100%, 42% 74%, 0 92%);
    filter: drop-shadow(0 0 1px #fff);
    opacity: 0
}

.wt-build.is-in .k {
    animation: wtBuild 11s var(--ease) infinite;
    animation-delay: calc(var(--d, 0) * .32s)
}

.wt-build.is-in .wt-cur {
    animation: wtCur 11s var(--ease) infinite
}

@keyframes wtBuild {
    0% {
        opacity: 0;
        transform: translateY(6px);
        background-color: transparent;
        outline-color: rgba(55, 55, 54, .45)
    }

    4% {
        opacity: 1;
        transform: none;
        background-color: transparent;
        outline-color: rgba(55, 55, 54, .45)
    }

    9%,
    88% {
        opacity: 1;
        background-color: var(--c);
        outline-color: transparent
    }

    95%,
    100% {
        opacity: 0;
        background-color: var(--c);
        outline-color: transparent
    }
}

@keyframes wtCur {

    0%,
    6% {
        opacity: 0;
        transform: translate(60%, 260%)
    }

    12% {
        opacity: 1;
        transform: translate(1350%, 240%)
    }

    22% {
        transform: translate(400%, 600%)
    }

    /* "teklif" düğmesine tıklama */
    27% {
        transform: translate(330%, 900%)
    }

    29% {
        transform: translate(330%, 900%) scale(.8)
    }

    31% {
        transform: translate(330%, 900%)
    }

    42% {
        transform: translate(1500%, 1150%)
    }

    60% {
        opacity: 1;
        transform: translate(2350%, 1350%)
    }

    70%,
    100% {
        opacity: 0;
        transform: translate(2350%, 1350%)
    }
}

/* ---- 02 mobil uyum: aynı site masaüstü / tablet / telefona uyar ----
   Sahne 960×560 çizilir (hizmet.js [data-fit] dar ekranda ölçekler); içerik düzeni kapsayıcı sorgularıyla değişir. */
.wt-fitbox {
    position: relative;
    height: 560px;
    transition: none !important
}

.wt-stage {
    position: absolute;
    left: 50%;
    top: 0;
    width: 960px;
    height: 560px;
    display: grid;
    place-items: center;
    transform: translateX(-50%) scale(var(--fit, 1));
    transition: none !important; /* ölçek anında uygulanır (genel hareket-azaltma kuralı geçişe takmasın) */
    transform-origin: top center
}

.wt-dev {
    width: 960px;
    height: 560px;
    padding: 12px;
    border-radius: 22px;
    background: #222221;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(0, 0, 0, .8);
    transition: width .9s var(--ease), height .9s var(--ease), border-radius .9s var(--ease), padding .9s var(--ease)
}

.wt-resp[data-state="t"] .wt-dev {
    width: 460px;
    height: 560px;
    padding: 14px;
    border-radius: 30px
}

.wt-resp[data-state="m"] .wt-dev {
    width: 272px;
    height: 540px;
    padding: 10px;
    border-radius: 40px
}

.wt-scr {
    container-type: inline-size;
    display: grid;
    gap: 18px;
    align-content: start;
    height: 100%;
    padding: 20px 24px;
    border-radius: 12px;
    background: var(--paper);
    overflow: hidden;
    transition: border-radius .9s var(--ease)
}

.wt-resp[data-state="t"] .wt-scr {
    border-radius: 18px
}

.wt-resp[data-state="m"] .wt-scr {
    border-radius: 30px;
    padding-top: 26px
}

.wt-l-nav {
    display: flex;
    align-items: center;
    gap: 14px
}

.wt-l-nav b {
    width: 86px;
    height: 18px;
    border-radius: 5px;
    background: var(--k)
}

.wt-l-nav span {
    display: flex;
    gap: 14px;
    margin-left: auto
}

.wt-l-nav span i {
    width: 52px;
    height: 9px;
    border-radius: 5px;
    background: #CFCABD
}

.wt-l-nav span i:last-child {
    width: 88px;
    height: 28px;
    border-radius: 14px;
    background: var(--y)
}

.wt-l-nav em {
    display: none;
    margin-left: auto;
    gap: 4px;
    flex-direction: column
}

.wt-l-nav em i {
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--k)
}

.wt-l-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 26px;
    align-items: center
}

.wt-l-hero>div {
    display: grid;
    gap: 11px
}

.wt-l-hero s {
    height: 20px;
    width: 92%;
    border-radius: 6px;
    background: var(--k)
}

.wt-l-hero s:nth-child(2) {
    width: 70%
}

.wt-l-hero s.s {
    height: 10px;
    width: 80%;
    background: #BDB8AB
}

.wt-l-hero u {
    width: 140px;
    height: 36px;
    margin-top: 6px;
    border-radius: 18px;
    background: var(--y)
}

.wt-l-hero>span {
    aspect-ratio: 16/9;
    border-radius: 14px;
    background: radial-gradient(circle at 72% 32%, rgba(255, 255, 255, .55) 0 13%, transparent 14%), linear-gradient(160deg, var(--y) 55%, var(--yd) 56%)
}

.wt-l-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.wt-l-grid i {
    aspect-ratio: 2/1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 22px -14px rgba(55, 55, 54, .55)
}

/* tablet: görsel üste, kartlar iki sütun */
@container (max-width: 520px) {
    .wt-l-hero {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .wt-l-hero>span {
        order: -1;
        aspect-ratio: 16/8
    }

    .wt-l-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .wt-l-nav span i:not(:last-child) {
        display: none
    }
}

/* telefon: menü simgesi, tek sütun */
@container (max-width: 300px) {
    .wt-l-nav span {
        display: none
    }

    .wt-l-nav em {
        display: flex
    }

    .wt-l-hero s {
        height: 15px
    }

    .wt-l-hero u {
        width: 110px;
        height: 30px
    }

    .wt-l-grid {
        grid-template-columns: 1fr
    }

    .wt-l-grid i {
        aspect-ratio: 16/7
    }
}

/* ---- 04 üç temel: küçük canlı çizimler ---- */
/* hız: gösterge sarıyla dolar */
.wt-speed {
    display: grid;
    place-items: center
}

.wt-speed svg {
    width: 150px;
    overflow: visible
}

.wt-speed path {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round
}

.wt-speed .tr {
    stroke: rgba(255, 255, 255, .14)
}

.wt-speed .wt-fill {
    stroke: var(--y);
    stroke-dasharray: 100;
    stroke-dashoffset: 12
}

.wt-speed b {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    font: 700 13px var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--y)
}

.is-in .wt-speed .wt-fill {
    animation: wtGauge 4.5s var(--ease) infinite
}

@keyframes wtGauge {
    0% {
        stroke-dashoffset: 100
    }

    40%,
    85% {
        stroke-dashoffset: 12
    }

    100% {
        stroke-dashoffset: 100
    }
}

/* arama: sorgu yazılır, sonuçlar gelir; ilk sonuç sarı */
.wt-seo {
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 14px
}

.wt-seo .q {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    background: #fff;
    font: 600 12px var(--sans);
    color: var(--k);
    overflow: hidden
}

.wt-seo .q span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--k)
}

.wt-seo .r {
    display: grid;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    border-left: 3px solid transparent
}

.wt-seo .r b {
    width: 62%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .4)
}

.wt-seo .r s {
    width: 84%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .18)
}

.wt-seo .r.on {
    background: rgba(237, 196, 26, .14);
    border-left-color: var(--y)
}

.wt-seo .r.on b {
    background: var(--y)
}

.is-in .wt-seo .q span {
    animation: wtType 5s steps(26) infinite
}

.is-in .wt-seo .r {
    animation: wtRes 5s var(--ease) infinite
}

.is-in .wt-seo .r:nth-of-type(2) {
    animation-delay: .1s
}

.is-in .wt-seo .r:nth-of-type(3) {
    animation-delay: .2s
}

@keyframes wtType {
    0% {
        width: 0
    }

    40%,
    90% {
        width: 26ch
    }

    100% {
        width: 0
    }
}

@keyframes wtRes {

    0%,
    42% {
        opacity: 0;
        transform: translateY(6px)
    }

    50%,
    90% {
        opacity: 1;
        transform: none
    }

    100% {
        opacity: 0
    }
}

/* yönetim paneli: anahtarlar değişir, "Kaydet" nabız atar */
.wt-cms {
    display: grid;
    align-content: center;
    gap: 9px;
    padding: 16px 18px
}

.wt-cms p {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0
}

.wt-cms p i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .22)
}

.wt-cms p s {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .22)
}

.wt-cms u {
    position: relative;
    width: 28px;
    height: 15px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .2);
    transition: background .3s
}

.wt-cms u::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    transition: transform .3s var(--spring)
}

.wt-cms u.on {
    background: var(--y)
}

.wt-cms u.on::after {
    transform: translateX(13px)
}

.wt-cms b {
    justify-self: end;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--y);
    color: var(--k);
    font: 700 11px var(--sans)
}

.is-in .wt-cms p:nth-child(2) u {
    animation: wtTog 3.2s steps(1) infinite
}

.is-in .wt-cms p:nth-child(2) u::after {
    animation: wtKnob 3.2s var(--spring) infinite
}

.is-in .wt-cms b {
    animation: wtSave 3.2s var(--spring) infinite
}

@keyframes wtTog {

    0%,
    45% {
        background: rgba(255, 255, 255, .2)
    }

    50%,
    100% {
        background: var(--y)
    }
}

@keyframes wtKnob {

    0%,
    45% {
        transform: none
    }

    55%,
    100% {
        transform: translateX(13px)
    }
}

@keyframes wtSave {

    0%,
    60% {
        transform: none
    }

    70% {
        transform: scale(.9)
    }

    80%,
    100% {
        transform: none
    }
}

/* ---- telefon ---- */
@media (max-width:620px) {
    .wt-build {
        aspect-ratio: 16/12
    }
}

/* ---- hareketi azalt: sahneler bitmiş halleriyle durur ---- */
@media (prefers-reduced-motion: reduce) {

    html:not(.force-motion) .wt-build .k,
    html:not(.force-motion) .wt-cur,
    html:not(.force-motion) .wt-speed .wt-fill,
    html:not(.force-motion) .wt-seo .q span,
    html:not(.force-motion) .wt-seo .r,
    html:not(.force-motion) .wt-cms u,
    html:not(.force-motion) .wt-cms u::after,
    html:not(.force-motion) .wt-cms b {
        animation: none !important
    }

    html:not(.force-motion) .wt-dev,
    html:not(.force-motion) .wt-scr {
        transition: none
    }
}


/* =====================================================================
   GRAFİK TASARIM (gt-) — resources/views/site/hizmet/grafik-tasarim.blade.php
   Temsili logo #gt-mark (sarı daire + koyu çizgi) bütün çizimlerde aynı: "ortak tasarım dili".
   ===================================================================== */

/* ---- giriş: marka panosu (logo, palet, yazı, kartvizit, afiş) ---- */
.gt-board {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    aspect-ratio: 16/11
}

.gt-t {
    position: relative;
    display: grid;
    place-items: center;
    padding: 12px;
    border-radius: 14px;
    background: var(--paper);
    overflow: hidden
}

.gt-t small {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font: 700 10px var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted)
}

.gt-logo {
    grid-row: span 2
}

.gt-logo svg {
    width: 74%;
    overflow: visible
}

.gt-logo .gd {
    fill: none;
    stroke: rgba(55, 55, 54, .28);
    stroke-width: .6;
    stroke-dasharray: .015 .012;
    opacity: .7
}

.gt-logo .gc {
    fill: var(--y);
    transform-box: fill-box;
    transform-origin: center
}

.gt-logo .gs {
    fill: none;
    stroke: var(--k);
    stroke-width: 11;
    stroke-linecap: round;
    stroke-dasharray: 1
}

/* palet */
.gt-sw {
    display: flex;
    gap: 6px;
    place-items: stretch
}

.gt-sw i {
    position: relative;
    flex: 1;
    border-radius: 9px;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(55, 55, 54, .12);
    transform-origin: bottom
}

.gt-sw b {
    position: absolute;
    left: 6px;
    bottom: 6px;
    font: 700 8px var(--sans);
    letter-spacing: .04em;
    color: var(--k);
    writing-mode: vertical-rl;
    transform: rotate(180deg)
}

.gt-sw i:nth-child(2) b {
    color: #fff
}

/* yazı karakteri */
.gt-ty {
    grid-auto-flow: column;
    align-items: baseline;
    justify-content: center;
    gap: 4px
}

.gt-ty b {
    font: 700 clamp(30px, 3.4vw, 46px) var(--bold);
    color: var(--k)
}

.gt-ty span {
    font: 200 clamp(30px, 3.4vw, 46px) var(--thin);
    color: var(--k)
}

/* kartvizit: döner */
.gt-card {
    perspective: 600px
}

.gc-in {
    position: relative;
    width: 82%;
    aspect-ratio: 1.75;
    transform-style: preserve-3d
}

.gc-f,
.gc-b {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    backface-visibility: hidden;
    box-shadow: 0 10px 18px -10px rgba(55, 55, 54, .6)
}

.gc-f {
    display: grid;
    place-items: center;
    background: var(--k)
}

.gc-f .gt-m {
    width: 34%
}

.gc-f s {
    position: absolute;
    left: 10%;
    bottom: 14%;
    width: 26%;
    height: 3px;
    background: var(--y)
}

.gc-b {
    display: grid;
    align-content: end;
    gap: 5px;
    padding: 10%;
    background: #fff;
    transform: rotateY(180deg)
}

.gc-b s {
    width: 70%;
    height: 4px;
    border-radius: 2px;
    background: var(--k)
}

.gc-b s.s {
    width: 48%;
    background: #BDB8AB
}

/* afiş (panodaki) */
.gt-t.gt-post {
    align-content: center;
    justify-items: start;
    gap: 6px;
    background: var(--y)
}

.gt-t.gt-post .gt-m {
    width: 38%;
    position: relative;
    z-index: 1
}

.gt-t.gt-post s {
    width: 70%;
    height: 5px;
    border-radius: 2px;
    background: var(--k);
    position: relative;
    z-index: 1
}

.gt-t.gt-post s.s {
    width: 46%;
    opacity: .55
}

.gt-t.gt-post span {
    position: absolute;
    top: 0;
    right: -20%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, .22);
    transform: skewX(-20deg)
}

/* hareket: parçalar sırayla gelir; logo yardımcı çizgilerden inşa edilir; kartvizit döner (döngü 8 sn) */
.gt-board.is-in .gt-t {
    animation: gtIn .9s var(--spring) both;
    animation-delay: calc(var(--d, 0) * .14s)
}

.gt-board.is-in .gd {
    animation: gtGuide 8s var(--ease) infinite
}

.gt-board.is-in .gc {
    animation: gtCirc 8s var(--spring) infinite
}

.gt-board.is-in .gs {
    animation: gtSlash 8s var(--ease) infinite
}

.gt-board.is-in .gt-sw i {
    animation: gtSw 1s var(--spring) .4s both
}

.gt-board.is-in .gt-sw i:nth-child(2) {
    animation-delay: .5s
}

.gt-board.is-in .gt-sw i:nth-child(3) {
    animation-delay: .6s
}

.gt-board.is-in .gc-in {
    animation: gtFlip 6s var(--ease) 1.2s infinite
}

@keyframes gtIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.96)
    }
}

@keyframes gtGuide {
    0% {
        opacity: 0
    }

    12%,
    80% {
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

@keyframes gtCirc {

    0%,
    14% {
        transform: scale(0)
    }

    26%,
    90% {
        transform: none
    }

    100% {
        transform: scale(0)
    }
}

@keyframes gtSlash {

    0%,
    26% {
        stroke-dashoffset: 1
    }

    38%,
    90% {
        stroke-dashoffset: 0
    }

    100% {
        stroke-dashoffset: 1
    }
}

@keyframes gtSw {
    from {
        transform: scaleY(.15);
        opacity: 0
    }
}

@keyframes gtFlip {

    0%,
    38% {
        transform: none
    }

    50%,
    88% {
        transform: rotateY(180deg)
    }

    100% {
        transform: rotateY(360deg)
    }
}

/* ---- 02 uygulamalar: iki sıra, ters yönlere akar; üzerine gelince durur ---- */
.gt-apps {
    display: grid;
    gap: 16px;
    margin-top: clamp(30px, 4vw, 50px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
}

.gt-track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding-right: 16px
}

.gt-apps.is-in .gt-track {
    animation: gtMarq 50s linear infinite
}

.gt-apps.is-in .r2 .gt-track {
    animation-duration: 58s;
    animation-direction: reverse
}

.gt-apps:hover .gt-track {
    animation-play-state: paused
}

@keyframes gtMarq {
    to {
        transform: translateX(-50%)
    }
}

.gt-app {
    flex: none;
    width: clamp(170px, 18vw, 220px);
    margin: 0
}

.gt-app figcaption {
    margin-top: 10px;
    font: 700 12px var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6)
}

.gt-av {
    position: relative;
    height: 150px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden
}

.gt-av::before,
.gt-av::after,
.gt-av i,
.gt-av .gt-m {
    position: absolute;
    left: 50%;
    top: 50%
}

.gt-av::before,
.gt-av::after {
    content: ""
}

.gt-av .gt-m {
    z-index: 2;
    width: 30px;
    translate: -50% -50%
}

.gt-av i {
    z-index: 2;
    height: 4px;
    border-radius: 2px;
    background: var(--k)
}

/* kartvizit: önde açık kart, arkada koyu kart */
.gt-kartvizit::after {
    width: 124px;
    height: 72px;
    border-radius: 5px;
    background: var(--k);
    translate: -44% -60%;
    rotate: -9deg;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1)
}

.gt-kartvizit::before {
    z-index: 1;
    width: 124px;
    height: 72px;
    border-radius: 5px;
    background: var(--paper);
    translate: -56% -40%;
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .6)
}

.gt-kartvizit .gt-m {
    width: 22px;
    translate: -300% -110%
}

.gt-kartvizit i:nth-of-type(1) {
    width: 58px;
    translate: -56px 6px
}

.gt-kartvizit i:nth-of-type(2) {
    width: 38px;
    translate: -56px 14px;
    background: #BDB8AB
}

.gt-kartvizit i:nth-of-type(3) {
    display: none
}

/* antetli kâğıt */
.gt-antet::before {
    width: 92px;
    height: 124px;
    border-radius: 3px;
    background: var(--paper);
    translate: -50% -50%;
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .6)
}

.gt-antet .gt-m {
    width: 18px;
    translate: -150% -260%
}

.gt-antet i {
    width: 58px;
    height: 3px;
    translate: -50% -4px;
    background: #BDB8AB
}

.gt-antet i:nth-of-type(2) {
    translate: -50% 6px
}

.gt-antet i:nth-of-type(3) {
    width: 36px;
    translate: -79% 16px
}

/* ambalaj kutusu */
.gt-kutu::before {
    width: 78px;
    height: 84px;
    background: var(--y);
    translate: -70% -45%;
    border-radius: 3px
}

.gt-kutu::after {
    width: 34px;
    height: 84px;
    background: var(--yd);
    translate: 46% -55%;
    transform: skewY(-28deg);
    border-radius: 2px
}

.gt-kutu .gt-m {
    width: 34px;
    translate: -116% -44%
}

.gt-kutu i {
    display: none
}

/* tabela */
.gt-tabela::before {
    width: 150px;
    height: 54px;
    border-radius: 7px;
    background: var(--k);
    translate: -50% -78%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12)
}

.gt-tabela::after {
    width: 6px;
    height: 46px;
    background: #8C877B;
    translate: -50% 22%
}

.gt-tabela .gt-m {
    width: 30px;
    translate: -210% -116%
}

.gt-tabela i {
    width: 70px;
    height: 8px;
    background: var(--paper);
    translate: -12% -42px
}

.gt-tabela i:nth-of-type(2) {
    width: 46px;
    height: 5px;
    background: var(--y);
    translate: -12% -28px
}

.gt-tabela i:nth-of-type(3) {
    display: none
}

/* sosyal medya postu */
.gt-av.gt-post::before {
    width: 108px;
    height: 108px;
    border-radius: 10px;
    background: var(--y);
    translate: -50% -50%
}

.gt-av.gt-post .gt-m {
    width: 42px;
    translate: -50% -70%
}

.gt-av.gt-post i {
    width: 58px;
    height: 6px;
    translate: -50% 24px
}

.gt-av.gt-post i:nth-of-type(2) {
    width: 36px;
    translate: -50% 34px;
    opacity: .55
}

.gt-av.gt-post i:nth-of-type(3) {
    display: none
}

/* fuar standı */
.gt-stand::before {
    width: 170px;
    height: 88px;
    border-radius: 4px;
    background: var(--k);
    translate: -50% -66%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12)
}

.gt-stand::after {
    z-index: 1;
    width: 74px;
    height: 34px;
    border-radius: 3px;
    background: var(--paper);
    translate: -50% 30%
}

.gt-stand .gt-m {
    width: 34px;
    translate: -50% -110%
}

.gt-stand i:nth-of-type(1) {
    width: 170px;
    height: 12px;
    border-radius: 0;
    background: var(--y);
    translate: -50% -58px
}

.gt-stand i:nth-of-type(2) {
    width: 40px;
    height: 4px;
    translate: -50% 20px
}

.gt-stand i:nth-of-type(3) {
    display: none
}

/* broşür: üç kırımlı */
.gt-brosur::before,
.gt-brosur::after {
    display: none
}

.gt-brosur i {
    z-index: 1;
    width: 46px;
    height: 100px;
    border-radius: 2px;
    background: var(--paper);
    translate: -150% -50%;
    transform: skewY(6deg);
    box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6)
}

.gt-brosur i:nth-of-type(2) {
    translate: -50% -50%;
    transform: skewY(-6deg);
    background: #EFEBE0
}

.gt-brosur i:nth-of-type(3) {
    translate: 50% -50%;
    transform: skewY(6deg);
    background: var(--y)
}

.gt-brosur .gt-m {
    z-index: 3;
    width: 26px;
    translate: -50% -110%
}

/* promosyon bardağı */
.gt-bardak::before {
    width: 62px;
    height: 80px;
    background: var(--paper);
    translate: -50% -40%;
    clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%)
}

.gt-bardak::after {
    width: 72px;
    height: 12px;
    border-radius: 4px;
    background: var(--k);
    translate: -50% -440%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12)
}

.gt-bardak .gt-m {
    width: 30px;
    translate: -50% -26%
}

.gt-bardak i {
    display: none
}

/* afiş */
.gt-afis::before {
    width: 84px;
    height: 116px;
    border-radius: 3px;
    background: var(--y);
    translate: -50% -50%;
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .6)
}

.gt-afis .gt-m {
    width: 38px;
    translate: -50% -86%
}

.gt-afis i {
    width: 54px;
    height: 5px;
    translate: -50% 14px
}

.gt-afis i:nth-of-type(2) {
    width: 40px;
    translate: -50% 24px;
    opacity: .55
}

.gt-afis i:nth-of-type(3) {
    width: 26px;
    height: 10px;
    border-radius: 5px;
    background: var(--paper);
    translate: -50% 36px
}

/* araç giydirme: hafif ticari araç */
.gt-arac::before {
    width: 172px;
    height: 64px;
    border-radius: 12px 34px 8px 8px;
    background: var(--paper);
    translate: -50% -66%
}

.gt-arac::after {
    width: 172px;
    height: 10px;
    background: var(--y);
    translate: -50% -50%
}

.gt-arac .gt-m {
    z-index: 3;
    width: 30px;
    translate: -170% -96%
}

.gt-arac i {
    z-index: 3;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--k);
    box-shadow: 0 0 0 4px #8C877B;
    translate: -66px 6px
}

.gt-arac i:nth-of-type(2) {
    translate: 40px 6px
}

.gt-arac i:nth-of-type(3) {
    width: 38px;
    height: 20px;
    border-radius: 3px 18px 3px 3px;
    background: #CFD6DC;
    box-shadow: none;
    translate: 38px -50px
}

/* ---- 04 üç ilke ---- */
/* ortak dil: üç uygulama, aynı logo, sırayla sıçrar; aralarından sarı çizgi geçer */
.gt-p-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px
}

.gt-p-lang::before {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    top: 50%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--y) 0 6px, transparent 6px 12px)
}

.gt-p-lang span {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: var(--paper)
}

.gt-p-lang .b {
    width: 48px;
    height: 70px;
    border-radius: 4px
}

.gt-p-lang .c {
    background: var(--y)
}

.gt-p-lang .gt-m {
    width: 26px
}

.is-in .gt-p-lang span {
    animation: gtHop 3.6s var(--spring) infinite
}

.is-in .gt-p-lang .b {
    animation-delay: .3s
}

.is-in .gt-p-lang .c {
    animation-delay: .6s
}

@keyframes gtHop {

    0%,
    30%,
    100% {
        transform: none
    }

    15% {
        transform: translateY(-10px)
    }
}

/* demo usulü: taslak 1 → taslak 2 → onaylandı */
.gt-p-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    flex-wrap: wrap
}

.gt-p-demo i {
    padding: 8px 11px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .75);
    font: 700 11px var(--sans);
    font-style: normal
}

.gt-p-demo i.ok {
    border-color: var(--y);
    background: var(--y);
    color: var(--k)
}

.gt-p-demo i.ok::before {
    content: "✓ "
}

.is-in .gt-p-demo i:not(.ok) {
    animation: gtDraft 4.5s ease infinite
}

.is-in .gt-p-demo i:nth-child(2) {
    animation-delay: 1.2s
}

.is-in .gt-p-demo i.ok {
    animation: gtOk 4.5s var(--spring) infinite
}

@keyframes gtDraft {

    0%,
    30%,
    100% {
        background: transparent;
        border-color: rgba(255, 255, 255, .22)
    }

    10%,
    22% {
        background: rgba(237, 196, 26, .18);
        border-color: var(--y)
    }
}

@keyframes gtOk {

    0%,
    50% {
        transform: scale(.85);
        opacity: .35
    }

    62%,
    100% {
        transform: none;
        opacity: 1
    }
}

/* baskıya hazır: kesim işaretli sayfa + CMYK */
.gt-p-print {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px
}

.gt-p-print .pg {
    position: relative;
    width: 64px;
    height: 84px;
    background: var(--paper);
    border-radius: 2px
}

.gt-p-print .pg span {
    position: absolute;
    inset: 10px 10px 34px;
    background: var(--y)
}

.gt-p-print .pg i {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 0 solid rgba(255, 255, 255, .6)
}

.gt-p-print .pg i:nth-child(1) {
    left: -16px;
    top: -16px;
    border-width: 0 1px 1px 0
}

.gt-p-print .pg i:nth-child(2) {
    right: -16px;
    top: -16px;
    border-width: 0 0 1px 1px
}

.gt-p-print .pg i:nth-child(3) {
    left: -16px;
    bottom: -16px;
    border-width: 1px 1px 0 0
}

.gt-p-print .pg i:nth-child(4) {
    right: -16px;
    bottom: -16px;
    border-width: 1px 0 0 1px
}

.gt-p-print .cmyk {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 70px
}

.gt-p-print .cmyk b {
    width: 12px;
    height: 100%;
    border-radius: 3px;
    background: var(--c);
    transform-origin: bottom
}

.is-in .gt-p-print .cmyk b {
    animation: gtInk 3.6s var(--ease) infinite
}

.is-in .gt-p-print .cmyk b:nth-child(2) {
    animation-delay: .15s
}

.is-in .gt-p-print .cmyk b:nth-child(3) {
    animation-delay: .3s
}

.is-in .gt-p-print .cmyk b:nth-child(4) {
    animation-delay: .45s
}

@keyframes gtInk {
    0% {
        transform: scaleY(.1)
    }

    35%,
    85% {
        transform: none
    }

    100% {
        transform: scaleY(.1)
    }
}

/* ---- telefon ---- */
@media (max-width:620px) {
    .gt-board {
        aspect-ratio: 1/1;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1.3fr 1fr 1fr
    }

    .gt-logo {
        grid-row: auto;
        grid-column: span 2
    }

    .gt-logo svg {
        width: auto;
        height: 80%
    }

    .gt-av {
        height: 130px
    }
}

/* ---- hareketi azalt ---- */
@media (prefers-reduced-motion: reduce) {

    html:not(.force-motion) .gt-board *,
    html:not(.force-motion) .gt-track,
    html:not(.force-motion) .gt-p-lang span,
    html:not(.force-motion) .gt-p-demo i,
    html:not(.force-motion) .gt-p-print .cmyk b {
        animation: none !important
    }

    /* şerit kaymaz: yana kaydırılabilir */
    html:not(.force-motion) .gt-apps {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none
    }
}

/* logo sarı yüzeyde: daire kâğıt rengine döner (biçim aynı, yalnızca renk) */
.gt-t.gt-post .gt-m,
.gt-kutu .gt-m,
.gt-av.gt-post .gt-m,
.gt-afis .gt-m,
.gt-p-lang .c .gt-m {
    --mc: var(--paper)
}


/* =====================================================================
   SOSYAL MEDYA (sm-) — resources/views/site/hizmet/sosyal-medya.blade.php
   ===================================================================== */

/* ---- giriş: telefonda akış kayar, kalpler uçar, bildirimler gelir ---- */
.sm-scene {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16/11
}

.sm-phone {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    aspect-ratio: 9/18;
    border: 6px solid #222221;
    border-radius: 28px;
    background: var(--paper);
    overflow: hidden;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14), 0 30px 50px -24px rgba(0, 0, 0, .8)
}

.sm-ph-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 9px 7px;
    border-bottom: 1px solid var(--line)
}

.sm-ph-top b {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--y);
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--k)
}

.sm-ph-top span {
    display: grid;
    gap: 3px;
    flex: 1
}

.sm-ph-top s {
    width: 70%;
    height: 5px;
    border-radius: 3px;
    background: var(--k)
}

.sm-ph-top s.s {
    width: 46%;
    height: 4px;
    background: #BDB8AB
}

.sm-ph-top u {
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--k);
    color: #fff;
    font: 700 8px var(--sans);
    text-decoration: none;
    white-space: nowrap
}

.sm-feed {
    position: relative;
    flex: 1;
    overflow: hidden
}

.sm-track {
    display: grid;
    gap: 10px;
    padding: 8px 8px 10px
}

.sm-post {
    display: grid;
    gap: 5px
}

.sm-post .im {
    position: relative;
    aspect-ratio: 1;
    border-radius: 9px;
    overflow: hidden
}

.sm-post .im i {
    position: absolute
}

/* üç farklı post: sarı, koyu, kâğıt — hepsi aynı marka dilinde */
.sm-a .im {
    background: var(--y)
}

.sm-a .im i:first-child {
    left: 18%;
    top: 22%;
    width: 46%;
    height: 9%;
    border-radius: 3px;
    background: var(--k)
}

.sm-a .im i:last-child {
    left: 18%;
    top: 36%;
    width: 30%;
    height: 6%;
    border-radius: 3px;
    background: rgba(55, 55, 54, .5);
    box-shadow: 0 24px 0 4px rgba(255, 255, 255, .55)
}

.sm-b .im {
    background: var(--k)
}

.sm-b .im i:first-child {
    left: 50%;
    top: 50%;
    width: 44%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--y);
    translate: -50% -50%
}

.sm-b .im i:last-child {
    left: 47%;
    top: 26%;
    width: 7%;
    height: 48%;
    border-radius: 4px;
    background: var(--k);
    rotate: 22deg
}

.sm-c .im {
    background: #EFEBE0
}

.sm-c .im i:first-child {
    inset: 0 0 46% 0;
    background: linear-gradient(160deg, var(--y) 60%, var(--yd) 61%)
}

.sm-c .im i:last-child {
    left: 12%;
    bottom: 14%;
    width: 60%;
    height: 10%;
    border-radius: 3px;
    background: var(--k)
}

.sm-post .ac {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0
}

.sm-post .ac svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--k);
    stroke-width: 2
}

.sm-post .ac i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.8px solid var(--k)
}

.sm-post s {
    width: 80%;
    height: 5px;
    border-radius: 3px;
    background: var(--k)
}

.sm-post s.s {
    width: 54%;
    height: 4px;
    background: #BDB8AB
}

/* bildirimler */
.sm-toast {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 7px;
    border-radius: 14px;
    background: #fff;
    color: var(--k);
    font: 700 11px var(--sans);
    white-space: nowrap;
    box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .7)
}

.sm-toast b {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--y);
    font: 700 14px var(--bold)
}

.sm-toast b svg {
    width: 12px;
    height: 12px;
    fill: var(--k)
}

.sm-toast.t1 {
    left: 3%;
    top: 16%
}

.sm-toast.t2 {
    right: 3%;
    top: 42%
}

.sm-toast.t3 {
    left: 6%;
    bottom: 12%
}

/* uçan kalpler */
.sm-h {
    position: absolute;
    z-index: 2;
    right: 32%;
    bottom: 22%;
    width: 20px;
    opacity: 0
}

.sm-h svg {
    display: block;
    width: 100%;
    fill: var(--y);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4))
}

.sm-h.h2 {
    right: 28%;
    width: 15px
}

.sm-h.h3 {
    right: 35%;
    width: 13px
}

.sm-scene.is-in .sm-track {
    animation: smScroll 10s var(--ease) infinite
}

.sm-scene.is-in .sm-a .ac svg,
.sm-scene.is-in .sm-b .ac svg {
    animation: smLike 10s var(--spring) infinite
}

.sm-scene.is-in .sm-toast {
    animation: smToast 9s var(--spring) infinite both
}

.sm-scene.is-in .sm-toast.t2 {
    animation-delay: 3s
}

.sm-scene.is-in .sm-toast.t3 {
    animation-delay: 6s
}

.sm-scene.is-in .sm-h {
    animation: smFloat 3.2s ease-out infinite
}

.sm-scene.is-in .sm-h.h2 {
    animation-delay: .5s
}

.sm-scene.is-in .sm-h.h3 {
    animation-delay: 1.1s
}

@keyframes smScroll {

    0%,
    20% {
        transform: none
    }

    30%,
    50% {
        transform: translateY(-16.667%)
    }

    60%,
    80% {
        transform: translateY(-33.333%)
    }

    90%,
    100% {
        transform: translateY(-50%)
    }
}

@keyframes smLike {

    0%,
    10% {
        fill: none;
        stroke: var(--k);
        transform: none
    }

    13% {
        fill: var(--y);
        stroke: var(--y);
        transform: scale(1.35)
    }

    17%,
    100% {
        fill: var(--y);
        stroke: var(--y);
        transform: none
    }
}

@keyframes smToast {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.9)
    }

    6%,
    28% {
        opacity: 1;
        transform: none
    }

    34%,
    100% {
        opacity: 0;
        transform: translateY(-8px)
    }
}

@keyframes smFloat {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    15% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translate(-14px, -110px) scale(1.15)
    }
}

/* mecralar */
.sm-plat {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none
}

.sm-plat li {
    padding: 8px 14px;
    border-radius: 99px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-weight: 700;
    font-size: 14px
}

/* ---- 02 aylık içerik takvimi ---- */
.sm-cal {
    margin: 0;
    padding: clamp(16px, 2.4vw, 30px);
    border-radius: 28px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1)
}

.sm-cal-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 18px;
    margin-bottom: 18px
}

.sm-cal-hd b {
    font: 700 22px var(--bold);
    text-transform: uppercase;
    color: #fff
}

.sm-cal-hd span {
    font: 700 12px var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--y)
}

.sm-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none
}

.sm-grid li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    min-height: 76px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05)
}

.sm-grid li.dn {
    min-height: 0;
    padding: 0 0 4px;
    background: none;
    text-align: center;
    font: 700 11px var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5)
}

.sm-grid li.em {
    background: none
}

.sm-grid span {
    font: 600 12px var(--sans);
    color: rgba(255, 255, 255, .55)
}

.sm-grid i {
    display: block;
    padding: 4px 6px;
    border-radius: 6px;
    font: 700 10px var(--sans);
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sm-cal .c-post {
    background: var(--y);
    color: var(--k)
}

.sm-cal .c-hikaye {
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6)
}

.sm-cal .c-reklam {
    color: var(--y);
    box-shadow: inset 0 0 0 1.5px var(--y);
    background: repeating-linear-gradient(-45deg, rgba(237, 196, 26, .2) 0 4px, transparent 4px 8px)
}

.sm-cal .c-ozel {
    background: #fff;
    color: var(--k)
}

.sm-grid .c-ozel::before {
    content: "★ "
}

.sm-cal.is-in .sm-grid i {
    animation: smChip .6s var(--spring) both;
    animation-delay: calc(var(--i, 0) * 90ms + .3s)
}

@keyframes smChip {
    from {
        opacity: 0;
        transform: scale(.6) translateY(6px)
    }
}

.sm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none
}

.sm-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, .75)
}

.sm-legend i {
    width: 16px;
    height: 16px;
    border-radius: 5px
}

/* ---- 04 üç ilke ---- */
/* tasarım ajansı gücü: profil ızgarası tek dilde dolar */
.sm-p-grid {
    display: grid;
    place-items: center
}

.sm-p-grid div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 102px
}

.sm-p-grid i {
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--paper)
}

.sm-p-grid i:nth-child(3n+1) {
    background: var(--y)
}

.sm-p-grid i:nth-child(5),
.sm-p-grid i:nth-child(9) {
    background: #222221;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2)
}

.is-in .sm-p-grid i {
    animation: smTile 4.5s var(--spring) infinite
}

.is-in .sm-p-grid i:nth-child(2) { animation-delay: .1s }
.is-in .sm-p-grid i:nth-child(3) { animation-delay: .2s }
.is-in .sm-p-grid i:nth-child(4) { animation-delay: .3s }
.is-in .sm-p-grid i:nth-child(5) { animation-delay: .4s }
.is-in .sm-p-grid i:nth-child(6) { animation-delay: .5s }
.is-in .sm-p-grid i:nth-child(7) { animation-delay: .6s }
.is-in .sm-p-grid i:nth-child(8) { animation-delay: .7s }
.is-in .sm-p-grid i:nth-child(9) { animation-delay: .8s }

@keyframes smTile {
    0% {
        transform: scale(.4);
        opacity: 0
    }

    12%,
    85% {
        transform: none;
        opacity: 1
    }

    100% {
        transform: scale(.4);
        opacity: 0
    }
}

/* planlı: taslak → onay → yayında */
.sm-p-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px
}

.sm-p-flow i {
    padding: 8px 10px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .75);
    font: 700 11px var(--sans);
    font-style: normal;
    white-space: nowrap
}

.sm-p-flow b {
    width: 16px;
    height: 2px;
    background: rgba(255, 255, 255, .3)
}

.sm-p-flow i.ok {
    border-color: var(--y);
    background: var(--y);
    color: var(--k)
}

.is-in .sm-p-flow i:not(.ok) {
    animation: gtDraft 4.5s ease infinite
}

.is-in .sm-p-flow i:nth-child(3) {
    animation-delay: 1.2s
}

.is-in .sm-p-flow i.ok {
    animation: gtOk 4.5s var(--spring) infinite
}

/* ölçülebilir reklam: rapor grafiği yükselir */
.sm-p-ads {
    display: grid;
    place-items: center
}

.sm-p-ads .ch {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 74px
}

.sm-p-ads .ch i {
    width: 13px;
    height: calc(var(--h) * 100%);
    border-radius: 3px 3px 0 0;
    background: rgba(255, 255, 255, .25);
    transform-origin: bottom
}

.sm-p-ads .ch i:nth-last-child(-n+2) {
    background: var(--y)
}

.sm-p-ads span {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .75);
    font: 700 10px var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase
}

.is-in .sm-p-ads .ch i {
    animation: gtInk 4s var(--ease) infinite
}

.is-in .sm-p-ads .ch i:nth-child(2) { animation-delay: .1s }
.is-in .sm-p-ads .ch i:nth-child(3) { animation-delay: .2s }
.is-in .sm-p-ads .ch i:nth-child(4) { animation-delay: .3s }
.is-in .sm-p-ads .ch i:nth-child(5) { animation-delay: .4s }
.is-in .sm-p-ads .ch i:nth-child(6) { animation-delay: .5s }

/* ---- telefon ---- */
@media (max-width:620px) {
    .sm-scene {
        aspect-ratio: 1/1.05
    }

    .sm-phone {
        height: 100%
    }

    .sm-toast {
        font-size: 10px
    }

    .sm-grid {
        gap: 4px
    }

    .sm-grid li {
        min-height: 48px;
        padding: 5px
    }

    .sm-grid span {
        font-size: 10px
    }

    /* dar ekranda etiket yazısı yerine renkli şerit */
    .sm-grid i {
        height: 8px;
        padding: 0;
        font-size: 0
    }

    .sm-grid .c-ozel::before {
        content: none
    }
}

/* ---- hareketi azalt ---- */
@media (prefers-reduced-motion: reduce) {

    html:not(.force-motion) .sm-scene *,
    html:not(.force-motion) .sm-cal i,
    html:not(.force-motion) .sm-p-grid i,
    html:not(.force-motion) .sm-p-flow i,
    html:not(.force-motion) .sm-p-ads i {
        animation: none !important
    }
}


/* =====================================================================
   TANITIM FİLMİ (tf-) — resources/views/site/hizmet/tanitim-filmi.blade.php
   ===================================================================== */

/* ---- giriş: kurgu ekranı (önizleme + zaman çizelgesi). Döngü 9 sn; üç klip eşit uzunlukta,
   önizlemedeki sahne imlecin üstündeki klibe göre değişir ---- */
.tf-ed {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 10px;
    aspect-ratio: 16/11
}

.tf-mon {
    position: relative;
    border-radius: 12px;
    background: #1C1C1B;
    overflow: hidden
}

.tf-sc {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden
}

.tf-sc i,
.tf-sc b {
    position: absolute
}

/* sahne 1: arşiv videosu — gökyüzü, güneş, tepeler */
.tf-sc.s1 {
    opacity: 1;
    background: linear-gradient(#F7E3A0, var(--y) 70%)
}

.tf-sc.s1 i:nth-child(1) {
    left: 62%;
    top: 18%;
    width: 16%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--paper)
}

.tf-sc.s1 i:nth-child(2) {
    left: -10%;
    right: 30%;
    bottom: -40%;
    height: 80%;
    border-radius: 50%;
    background: var(--yd)
}

.tf-sc.s1 i:nth-child(3) {
    left: 30%;
    right: -20%;
    bottom: -50%;
    height: 85%;
    border-radius: 50%;
    background: var(--k)
}

/* sahne 2: ürün fotoğrafı */
.tf-sc.s2 {
    background: radial-gradient(circle at 50% 45%, #4A4945, var(--k) 70%)
}

.tf-sc.s2 i:nth-child(1) {
    left: 50%;
    top: 46%;
    width: 24%;
    aspect-ratio: .8;
    border-radius: 6px;
    background: var(--y);
    translate: -50% -50%;
    rotate: -8deg;
    box-shadow: inset -14px 0 0 var(--yd)
}

.tf-sc.s2 i:nth-child(2) {
    left: 50%;
    bottom: 14%;
    width: 34%;
    height: 8%;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    translate: -50% 0;
    filter: blur(3px)
}

/* sahne 3: kapanış kartı — logo ve marka adı */
.tf-sc.s3 {
    display: grid;
    place-items: center;
    background: var(--paper)
}

.tf-sc.s3 i {
    left: 50%;
    top: 34%;
    width: 15%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--y);
    translate: -50% -50%
}

.tf-sc.s3 i::after {
    content: "";
    position: absolute;
    left: 43%;
    top: 8%;
    width: 13%;
    height: 84%;
    border-radius: 4px;
    background: var(--k);
    rotate: 21deg
}

.tf-sc.s3 b {
    top: 56%;
    font: 700 clamp(14px, 1.8vw, 22px) var(--bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--k)
}

.tf-rec {
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font: 700 10px var(--sans);
    letter-spacing: .14em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5)
}

.tf-rec::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--y)
}

.tf-ctl {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 12px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .55))
}

.tf-ctl b {
    width: 10px;
    height: 12px;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%)
}

.tf-ctl s {
    position: relative;
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .3)
}

.tf-ctl u {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    border-radius: 2px;
    background: var(--y)
}

/* zaman çizelgesi: video, yazı ve ses izleri + oynatma imleci */
.tf-tl {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 8px;
    border-radius: 10px;
    background: #2A2A29
}

.tf-trk {
    display: flex;
    gap: 3px;
    height: 18px;
    margin: 0
}

.tf-trk i {
    display: flex;
    align-items: center;
    padding: 0 6px;
    border-radius: 4px;
    font: 700 8px var(--sans);
    font-style: normal;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden
}

.tf-trk.v i {
    flex: 1;
    background: var(--y);
    color: var(--k)
}

.tf-trk.v i:nth-child(2) {
    background: #D9B415
}

.tf-trk.v i:nth-child(3) {
    background: var(--paper)
}

.tf-trk.t i {
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    color: #fff
}

.tf-trk.t i:nth-child(1) {
    width: 22%;
    margin-left: 6%
}

.tf-trk.t i:nth-child(2) {
    width: 24%;
    margin-left: 26%
}

.tf-trk.a i {
    flex: 1;
    padding: 0;
    background: repeating-linear-gradient(90deg, rgba(237, 196, 26, .8) 0 2px, transparent 2px 4px);
    -webkit-mask-image: linear-gradient(90deg, #000 0 14%, rgba(0, 0, 0, .45) 14% 22%, #000 22% 41%, rgba(0, 0, 0, .55) 41% 52%, #000 52% 70%, rgba(0, 0, 0, .4) 70% 78%, #000 78%);
    mask-image: linear-gradient(90deg, #000 0 14%, rgba(0, 0, 0, .45) 14% 22%, #000 22% 41%, rgba(0, 0, 0, .55) 41% 52%, #000 52% 70%, rgba(0, 0, 0, .4) 70% 78%, #000 78%)
}

.tf-ph {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 30%;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .6)
}

.tf-ph::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -2px;
    width: 10px;
    height: 8px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 50% 100%)
}

.tf-ed.is-in .tf-ph {
    animation: tfHead 9s linear infinite
}

.tf-ed.is-in .tf-ctl u {
    animation: tfProg 9s linear infinite
}

.tf-ed.is-in .tf-sc.s1 {
    animation: tfS1 9s linear infinite
}

.tf-ed.is-in .tf-sc.s2 {
    animation: tfS2 9s linear infinite
}

.tf-ed.is-in .tf-sc.s3 {
    animation: tfS3 9s linear infinite
}

.tf-ed.is-in .tf-sc.s1 i:nth-child(3) {
    animation: tfDrift 9s linear infinite
}

@keyframes tfHead {
    from {
        left: 8px
    }

    to {
        left: calc(100% - 10px)
    }
}

@keyframes tfProg {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes tfS1 {

    0%,
    32% {
        opacity: 1
    }

    34%,
    98% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes tfS2 {

    0%,
    32% {
        opacity: 0
    }

    34%,
    65% {
        opacity: 1
    }

    67%,
    100% {
        opacity: 0
    }
}

@keyframes tfS3 {

    0%,
    65% {
        opacity: 0
    }

    67%,
    98% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

/* manzara sahnesinde hafif kayma (görüntü ilerliyor gibi) */
@keyframes tfDrift {
    0% {
        transform: translateX(0)
    }

    33% {
        transform: translateX(-8%)
    }

    100% {
        transform: translateX(-8%)
    }
}

/* ---- 02 formatlar: aynı kare 16:9 / 9:16 / 1:1 arasında yeniden kadrajlanır ----
   Sahne 760×470 çizilir (hizmet.js [data-fit] dar ekranda ölçekler); kare (.tf-shot) her biçimden büyüktür.
   Titremesin diye çerçevenin kutusu sabit (720×444) ve görüntü hiç kımıldamaz: yalnızca görünen pencere
   (clip-path) daralıp genişler. Pencerenin kenar boşlukları --tfx / --tfy, köşesi --tfr; @property ile kayıtlı
   oldukları için akıcı geçerler. Etiketler pencereyi translate ile izler (genişlik/konum animasyonu yok,
   bu yüzden her karede piksele yuvarlanıp titreyen bir şey de yok). */
@property --tfx {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px
}

@property --tfy {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px
}

@property --tfr {
    syntax: "<length>";
    inherits: true;
    initial-value: 16px
}
.tf-fitbox {
    position: relative;
    height: 470px;
    transition: none !important
}

.tf-stage {
    position: absolute;
    left: 50%;
    top: 0;
    width: 760px;
    height: 470px;
    display: grid;
    place-items: center;
    transform: translateX(-50%) scale(var(--fit, 1));
    transition: none !important; /* ölçek anında uygulanır (genel hareket-azaltma kuralı geçişe takmasın) */
    transform-origin: top center
}

/* 16:9 → 720×405 · 9:16 → 250×444 · 1:1 → 420×420 (kutu 720×444; boşluklar bunun farkı / 2) */
.tf-frame {
    --tfx: 0px;
    --tfy: 19.5px;
    --tfr: 16px;
    position: relative;
    width: 720px;
    height: 444px;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)) drop-shadow(0 30px 34px rgba(0, 0, 0, .55));
    transition: --tfx .9s var(--ease), --tfy .9s var(--ease), --tfr .9s var(--ease)
}

.tf-asp[data-state="d"] .tf-frame {
    --tfx: 235px;
    --tfy: 0px;
    --tfr: 26px
}

.tf-asp[data-state="k"] .tf-frame {
    --tfx: 150px;
    --tfy: 12px;
    --tfr: 18px
}

.tf-win {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(var(--tfy) var(--tfx) round var(--tfr))
}

.tf-shot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 760px;
    height: 460px;
    translate: -50% -50%;
    background: linear-gradient(#F7E3A0, var(--y) 62%)
}

.tf-shot i {
    position: absolute
}

.tf-shot .sun {
    left: 64%;
    top: 14%;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--paper)
}

.tf-shot .hill {
    left: -10%;
    right: 40%;
    bottom: -30%;
    height: 62%;
    border-radius: 50%;
    background: var(--yd)
}

.tf-shot .hill.b {
    left: 45%;
    right: -15%;
    bottom: -36%;
    height: 66%;
    background: #B8960C
}

/* konu: ortada bir kişi (her biçimde kadrajın ortasında) */
.tf-shot .sub {
    left: 50%;
    bottom: 0;
    width: 180px;
    height: 230px;
    translate: -50% 0;
    background: radial-gradient(circle at 50% 22%, var(--k) 0 34px, transparent 35px), radial-gradient(ellipse 88px 128px at 50% 100%, var(--k) 98%, transparent 100%)
}

.tf-cap {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 18px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font: 700 15px var(--sans);
    white-space: nowrap;
    translate: -50% calc(-1 * var(--tfy));
    transition: none !important /* pencereyi değişkenlerle izler; kendi geçişi olmasın */
}

.tf-plat {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 14px;
    margin: 0;
    translate: var(--tfx) var(--tfy);
    transition: none !important
}

.tf-plat span {
    display: none;
    padding: 5px 10px;
    border-radius: 99px;
    background: var(--k);
    color: #fff;
    font: 700 11px var(--sans);
    letter-spacing: .04em
}

.tf-asp[data-state="y"] .p-y,
.tf-asp[data-state="d"] .p-d,
.tf-asp[data-state="k"] .p-k {
    display: inline-block
}

/* ---- 04 üç ilke ---- */
/* dikey ve yatay: iki çerçeve sırayla öne çıkar */
.tf-p-fmt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.tf-p-fmt i {
    border-radius: 7px;
    border: 2px solid rgba(255, 255, 255, .4);
    background: linear-gradient(#F7E3A0, var(--y))
}

.tf-p-fmt .h {
    width: 112px;
    height: 63px
}

.tf-p-fmt .v {
    width: 44px;
    height: 78px
}

.is-in .tf-p-fmt i {
    animation: tfAlt 4s ease infinite
}

.is-in .tf-p-fmt .v {
    animation-delay: 2s
}

@keyframes tfAlt {

    0%,
    45%,
    100% {
        border-color: rgba(255, 255, 255, .4);
        transform: none
    }

    10%,
    35% {
        border-color: #fff;
        transform: scale(1.08)
    }
}

/* ilk saniyeden akıcı: kelimeler ritimle patlar */
.tf-p-kin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 10px
}

.tf-p-kin b {
    font: 700 26px var(--bold);
    text-transform: uppercase;
    color: #fff
}

.tf-p-kin b.y {
    color: var(--y)
}

.is-in .tf-p-kin b {
    animation: tfPop 3.6s var(--spring) infinite both
}

.is-in .tf-p-kin b:nth-child(2) {
    animation-delay: .25s
}

.is-in .tf-p-kin b:nth-child(3) {
    animation-delay: .5s
}

@keyframes tfPop {
    0% {
        opacity: 0;
        transform: scale(.4) rotate(-6deg)
    }

    10% {
        opacity: 1;
        transform: scale(1.12)
    }

    16%,
    80% {
        opacity: 1;
        transform: none
    }

    92%,
    100% {
        opacity: 0;
        transform: translateY(-8px)
    }
}

/* kurumsal kimlik: görüntünün üstüne logolu alt bant kayar */
.tf-p-low {
    background: linear-gradient(135deg, #5A5850, #2B2B2A)
}

.tf-p-low div {
    position: absolute;
    left: 14px;
    bottom: 16px;
    display: flex;
    align-items: stretch
}

.tf-p-low i {
    width: 40px;
    background: var(--y);
    border-radius: 6px 0 0 6px;
    position: relative
}

.tf-p-low i::after {
    content: "";
    position: absolute;
    left: 44%;
    top: 22%;
    width: 4px;
    height: 56%;
    border-radius: 2px;
    background: var(--k);
    rotate: 21deg
}

.tf-p-low span {
    display: grid;
    padding: 7px 14px 7px 10px;
    border-radius: 0 6px 6px 0;
    background: #fff
}

.tf-p-low b {
    font: 700 13px var(--bold);
    text-transform: uppercase;
    color: var(--k)
}

.tf-p-low small {
    font: 600 10px var(--sans);
    color: var(--muted)
}

.is-in .tf-p-low div {
    animation: tfLow 4.2s var(--ease) infinite
}

@keyframes tfLow {
    0% {
        clip-path: inset(0 100% 0 0)
    }

    18%,
    82% {
        clip-path: inset(0 0 0 0)
    }

    100% {
        clip-path: inset(0 100% 0 0)
    }
}

/* ---- telefon ---- */
@media (max-width:620px) {
    .tf-ed {
        aspect-ratio: 1/1
    }
}

/* ---- hareketi azalt: önizlemede ilk sahne, çerçeveler sabit ---- */
@media (prefers-reduced-motion: reduce) {

    html:not(.force-motion) .tf-ed *,
    html:not(.force-motion) .tf-p-fmt i,
    html:not(.force-motion) .tf-p-kin b,
    html:not(.force-motion) .tf-p-low div {
        animation: none !important
    }

    html:not(.force-motion) .tf-frame {
        transition: none !important
    }
}


/* =====================================================================
   SPONSORLU REKLAM (rk-) — resources/views/site/hizmet/sponsorlu-reklam.blade.php
   ===================================================================== */

/* ---- giriş: Adana merkezli hedefleme radarı + filtreler ---- */
.rk-target {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 16px;
    align-items: center;
    aspect-ratio: 16/11
}

.rk-radar {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237, 196, 26, .14), rgba(255, 255, 255, .03) 70%);
    overflow: hidden
}

.rk-radar .rg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18)
}

.rk-radar .rg.r2 {
    inset: 17%
}

.rk-radar .rg.r3 {
    inset: 34%;
    border-color: rgba(237, 196, 26, .5)
}

.rk-radar .sw {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(237, 196, 26, .42), transparent 70deg)
}

.rk-radar b {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--y)
}

.rk-radar .pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--y);
    box-shadow: 0 0 0 4px var(--k), 0 0 0 5.5px rgba(237, 196, 26, .6)
}

.rk-radar .pin em {
    position: absolute;
    left: 50%;
    top: 24px;
    padding: 3px 9px;
    border-radius: 99px;
    background: #fff;
    color: var(--k);
    font: 700 10px var(--sans);
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    translate: -50% 0
}

.rk-filters {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.rk-filters li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font: 600 12px var(--sans)
}

.rk-filters i {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--y);
    background: var(--y)
}

.rk-filters i svg {
    width: 12px;
    fill: none;
    stroke: var(--k);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round
}

.rk-filters small {
    display: block;
    font: 700 9px var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5)
}

.rk-filters .rk-ready {
    display: grid;
    gap: 7px;
    background: none;
    padding: 4px 2px 0
}

.rk-ready b {
    font: 700 11px var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--y)
}

.rk-ready s {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .12)
}

.rk-ready u {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: var(--y)
}

.rk-target.is-in .sw {
    animation: rkSweep 4s linear infinite
}

.rk-target.is-in .rk-radar b {
    animation: rkDot 4s ease infinite;
    animation-delay: var(--d)
}

.rk-target.is-in .pin {
    animation: rkPing 2s ease-out infinite
}

.rk-target.is-in .rk-filters i {
    animation: rkCheck 6s var(--spring) infinite;
    animation-delay: calc(var(--d, 0) * .6s + .3s)
}

.rk-target.is-in .rk-filters i svg {
    animation: rkTick 6s ease infinite;
    animation-delay: calc(var(--d, 0) * .6s + .3s)
}

.rk-target.is-in .rk-ready u {
    animation: rkFill 6s var(--ease) infinite
}

@keyframes rkSweep {
    to {
        transform: rotate(1turn)
    }
}

@keyframes rkDot {
    0% {
        background: #fff;
        opacity: .3;
        transform: none
    }

    8% {
        background: var(--y);
        opacity: 1;
        transform: scale(1.6);
        box-shadow: 0 0 0 6px rgba(237, 196, 26, .25)
    }

    40% {
        background: var(--y);
        opacity: 1;
        transform: none;
        box-shadow: none
    }

    100% {
        background: #fff;
        opacity: .3
    }
}

@keyframes rkPing {
    0% {
        box-shadow: 0 0 0 4px var(--k), 0 0 0 5.5px rgba(237, 196, 26, .6)
    }

    100% {
        box-shadow: 0 0 0 4px var(--k), 0 0 0 22px rgba(237, 196, 26, 0)
    }
}

@keyframes rkCheck {
    0% {
        background: transparent;
        border-color: rgba(255, 255, 255, .3);
        transform: scale(.85)
    }

    8%,
    80% {
        background: var(--y);
        border-color: var(--y);
        transform: none
    }

    92%,
    100% {
        background: transparent;
        border-color: rgba(255, 255, 255, .3)
    }
}

@keyframes rkTick {
    0% {
        opacity: 0
    }

    8%,
    80% {
        opacity: 1
    }

    92%,
    100% {
        opacity: 0
    }
}

@keyframes rkFill {

    0%,
    40% {
        width: 0
    }

    68%,
    86% {
        width: 100%
    }

    100% {
        width: 0
    }
}

/* ---- 02 reklamınız burada görünür: Google arama + Instagram ---- */
.rk-where {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    gap: clamp(16px, 2.4vw, 30px);
    align-items: start
}

.rk-where figure {
    margin: 0
}

.rk-where figcaption {
    margin-bottom: 12px;
    font: 700 12px var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6)
}

.rk-gwin {
    display: grid;
    gap: 18px;
    padding: clamp(16px, 2.2vw, 26px);
    border-radius: 20px;
    background: #fff;
    color: var(--k);
    box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8)
}

.rk-gwin .q {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 0;
    padding: 0 18px;
    border-radius: 22px;
    box-shadow: 0 1px 6px rgba(55, 55, 54, .28);
    font: 500 15px var(--sans);
    overflow: hidden
}

.rk-gwin .q i {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--muted);
    position: relative
}

.rk-gwin .q i::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 6px;
    height: 2px;
    background: var(--muted);
    rotate: 45deg
}

.rk-gwin .q span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--k)
}

.rk-gwin .ad {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 4px solid var(--y);
    background: var(--ys)
}

.rk-gwin .ad small {
    font: 500 12px var(--sans);
    color: var(--muted)
}

.rk-gwin .ad small b {
    color: var(--k)
}

.rk-gwin .ad strong {
    font: 700 clamp(15px, 1.5vw, 19px) var(--sans);
    color: var(--k)
}

.rk-gwin .ad p {
    margin: 0;
    font-size: 14px;
    color: var(--muted)
}

.rk-gwin .ad span {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px
}

.rk-gwin .ad span i {
    padding: 5px 11px;
    border-radius: 99px;
    border: 1px solid rgba(55, 55, 54, .2);
    background: #fff;
    font: 600 12px var(--sans);
    font-style: normal
}

.rk-gwin .org {
    display: grid;
    gap: 6px;
    padding: 0 4px
}

.rk-gwin .org s {
    width: 34%;
    height: 7px;
    border-radius: 4px;
    background: #E6E3DA
}

.rk-gwin .org s:nth-child(2) {
    width: 62%;
    height: 10px;
    background: #D6D2C6
}

.rk-gwin .org s.s {
    width: 86%
}

/* instagram sponsorlu gönderi */
.rk-post {
    max-width: 300px;
    border-radius: 18px;
    background: #fff;
    color: var(--k);
    overflow: hidden;
    box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8)
}

.rk-post .rk-phd {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 12px
}

.rk-post .rk-phd b {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--y);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--k)
}

.rk-post .rk-phd strong {
    display: block;
    font: 700 12px var(--sans)
}

.rk-post .rk-phd small {
    font: 500 10px var(--sans);
    color: var(--muted)
}

.rk-post .im {
    position: relative;
    aspect-ratio: 1;
    background: var(--y);
    overflow: hidden
}

.rk-post .im i {
    position: absolute;
    right: -14%;
    top: -10%;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--paper)
}

.rk-post .im i::after {
    content: "";
    position: absolute;
    left: 44%;
    top: 12%;
    width: 11%;
    height: 76%;
    border-radius: 6px;
    background: var(--k);
    rotate: 21deg
}

.rk-post .im em {
    position: absolute;
    left: 14px;
    bottom: 12px;
    font: 700 26px var(--bold);
    font-style: normal;
    text-transform: uppercase;
    line-height: 1;
    color: var(--k)
}

.rk-post .cta {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 10px 12px;
    background: var(--k);
    color: #fff;
    font: 700 12px var(--sans)
}

.rk-post .ac {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px
}

.rk-post .ac svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--k);
    stroke-width: 2
}

.rk-post .ac i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--k)
}

.rk-where.is-in .q span {
    animation: rkType 6s steps(22) infinite
}

.rk-where.is-in .ad {
    animation: rkAd 6s var(--spring) infinite
}

.rk-where.is-in .rk-post .ac svg {
    animation: smLike 6s var(--spring) infinite
}

.rk-where.is-in .rk-post .cta {
    animation: rkCta 6s ease infinite
}

@keyframes rkType {
    0% {
        width: 0
    }

    35%,
    92% {
        width: 22ch
    }

    100% {
        width: 0
    }
}

@keyframes rkAd {

    0%,
    36% {
        opacity: 0;
        transform: translateY(10px)
    }

    44%,
    92% {
        opacity: 1;
        transform: none
    }

    100% {
        opacity: 0
    }
}

@keyframes rkCta {

    0%,
    55%,
    75%,
    100% {
        background: var(--k);
        color: #fff
    }

    60%,
    70% {
        background: var(--y);
        color: var(--k)
    }
}

/* ---- 04 üç ilke ---- */
/* bütçe sizde: kaydırıcı */
.rk-p-bud {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px
}

.rk-p-bud small,
.rk-p-bud em {
    font: 700 10px var(--sans);
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6)
}

.rk-p-bud em {
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--y);
    color: var(--k)
}

.rk-p-bud div {
    position: relative;
    width: 180px;
    height: 18px
}

.rk-p-bud s {
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .15)
}

.rk-p-bud u {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60%;
    border-radius: 3px;
    background: var(--y)
}

.rk-p-bud b {
    position: absolute;
    top: 0;
    left: 60%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(237, 196, 26, .35)
}

.is-in .rk-p-bud u {
    animation: rkBudW 4s ease-in-out infinite alternate
}

.is-in .rk-p-bud b {
    animation: rkBudL 4s ease-in-out infinite alternate
}

@keyframes rkBudW {
    from {
        width: 28%
    }

    to {
        width: 76%
    }
}

@keyframes rkBudL {
    from {
        left: 28%
    }

    to {
        left: 76%
    }
}

/* doğru kitle: kalabalıktan hedef kişiler seçilir */
.rk-p-aud {
    display: grid;
    grid-template-columns: repeat(6, 16px);
    gap: 10px 14px;
    place-content: center
}

.rk-p-aud i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55)
}

.rk-p-aud i:nth-child(3),
.rk-p-aud i:nth-child(8),
.rk-p-aud i:nth-child(10),
.rk-p-aud i:nth-child(16) {
    background: var(--y)
}

.is-in .rk-p-aud i {
    animation: rkDim 4s ease infinite
}

.is-in .rk-p-aud i:nth-child(3),
.is-in .rk-p-aud i:nth-child(8),
.is-in .rk-p-aud i:nth-child(10),
.is-in .rk-p-aud i:nth-child(16) {
    animation: rkHit 4s var(--spring) infinite
}

@keyframes rkDim {

    0%,
    100% {
        opacity: 1
    }

    35%,
    85% {
        opacity: .18
    }
}

@keyframes rkHit {

    0%,
    100% {
        background: rgba(255, 255, 255, .55);
        transform: none
    }

    35%,
    85% {
        background: var(--y);
        transform: scale(1.25)
    }
}

/* ölçülebilir sonuç: rapor çizgisi yükselir */
.rk-p-rep {
    display: grid;
    place-items: center
}

.rk-p-rep svg {
    width: 76%;
    overflow: visible
}

.rk-p-rep .ln {
    fill: none;
    stroke: var(--y);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1
}

.rk-p-rep span {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .75);
    font: 700 10px var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase
}

.is-in .rk-p-rep .ln {
    animation: rkLine 4s var(--ease) infinite
}

@keyframes rkLine {
    0% {
        stroke-dashoffset: 1
    }

    45%,
    85% {
        stroke-dashoffset: 0
    }

    100% {
        stroke-dashoffset: 1
    }
}

/* ---- 05 süreç (açık zeminde dört kart) ---- */
.rk-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none
}

.rk-steps li {
    padding: clamp(20px, 2.4vw, 28px);
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .5s var(--spring), box-shadow .4s
}

.rk-steps li:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -30px rgba(55, 55, 54, .4)
}

.rk-steps span {
    display: block;
    margin-bottom: 10px;
    font: 200 54px var(--thin);
    line-height: 1;
    color: var(--yd)
}

.rk-steps h3 {
    margin: 0 0 8px;
    font: 700 22px var(--bold);
    line-height: 1.18;
    text-transform: uppercase
}

.rk-steps p {
    color: var(--muted)
}

/* ---- tablet / telefon ---- */
@media (max-width:960px) {
    .rk-steps {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:900px) {
    .rk-where {
        grid-template-columns: 1fr
    }

    .rk-post {
        margin-inline: auto
    }
}

@media (max-width:620px) {
    .rk-target {
        grid-template-columns: 1fr;
        aspect-ratio: auto
    }

    .rk-radar {
        width: 78%;
        margin-inline: auto
    }

    .rk-steps {
        grid-template-columns: 1fr
    }
}

/* ---- hareketi azalt ---- */
@media (prefers-reduced-motion: reduce) {

    html:not(.force-motion) .rk-target *,
    html:not(.force-motion) .rk-where *,
    html:not(.force-motion) .rk-p-bud *,
    html:not(.force-motion) .rk-p-aud i,
    html:not(.force-motion) .rk-p-rep .ln {
        animation: none !important
    }
}