/* ========================================================================== 
   MG Work Studio — Refined Glass 2026
   Boxed editorial layout, legible glass surfaces and compact interactions.
   This is the final public-theme layer and intentionally resolves legacy rules.
   ========================================================================== */

:root {
    --ref-bg: #050b16;
    --ref-bg-deep: #030813;
    --ref-shell: rgba(9, 19, 34, .76);
    --ref-panel: rgba(17, 31, 52, .70);
    --ref-panel-strong: rgba(12, 25, 44, .90);
    --ref-panel-soft: rgba(255, 255, 255, .055);
    --ref-text: #f5f8fc;
    --ref-muted: #b6c3d4;
    --ref-dim: #8f9eb2;
    --ref-cyan: #79e7f5;
    --ref-violet: #a89dfd;
    --ref-coral: #ff9d8e;
    --ref-mint: #7ce8c0;
    --ref-line: rgba(203, 226, 255, .14);
    --ref-line-strong: rgba(203, 226, 255, .24);
    --ref-shadow: 0 26px 72px rgba(0, 3, 12, .34);
    --ref-shell-width: 1280px;
    --ref-content-width: 1160px;
    --ref-radius-shell: 34px;
    --ref-radius-card: 24px;
}

html {
    background: var(--ref-bg-deep);
    scroll-padding-top: 108px;
}

body {
    min-width: 320px;
    color: var(--ref-text);
    background:
        radial-gradient(circle at 8% 0%, rgba(42, 180, 201, .18), transparent 29rem),
        radial-gradient(circle at 96% 16%, rgba(105, 94, 219, .20), transparent 34rem),
        linear-gradient(145deg, #06101d 0%, #070b16 48%, #081124 100%);
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

body::before {
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.14) .55px, transparent .55px);
    background-size: 19px 19px;
    opacity: .16;
    content: '';
}

.sayfa-zemini {
    opacity: .62;
}

.zemin-grid {
    opacity: .04;
}

::selection {
    color: #06101a;
    background: var(--ref-cyan);
}

a,
button,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

a,
a:hover,
a:focus,
a:focus-visible,
.metin-buton,
.metin-buton:hover,
.metin-buton:focus-visible,
.ust-nav a,
.ust-nav a:hover,
.ust-nav a:focus-visible,
.footer-liste a,
.footer-liste a:hover {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(121, 231, 245, .28) !important;
}

.ust-nav a::before,
.ust-nav a::after,
.ust-nav a:hover::before,
.ust-nav a:hover::after,
.ust-nav a:focus-visible::before,
.ust-nav a:focus-visible::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}

h1,
h2,
h3,
h4,
.sayfa-baslik,
.baslik-kritik {
    color: var(--ref-text);
    font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
    font-weight: 570;
    letter-spacing: -.045em;
}

p,
li {
    color: var(--ref-muted);
}

.kapsayici {
    width: min(calc(100% - 64px), var(--ref-content-width));
    max-width: var(--ref-content-width);
    margin-inline: auto;
    padding-inline: 0;
}

/* Boxed site shell */
.ust-alan,
body.sayfa-anasayfa .ust-alan {
    position: sticky;
    top: 12px;
    z-index: 100;
    width: min(calc(100% - 32px), var(--ref-shell-width));
    margin: 12px auto 0;
    color: var(--ref-text);
    background: rgba(8, 17, 31, .78);
    border: 1px solid var(--ref-line);
    border-radius: 24px;
    box-shadow: 0 18px 52px rgba(0, 3, 12, .26), inset 0 1px 0 rgba(255,255,255,.07);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
}

body.sayfa-kaydirildi .ust-alan {
    background: rgba(6, 14, 27, .92);
    box-shadow: 0 20px 60px rgba(0, 3, 12, .42), inset 0 1px 0 rgba(255,255,255,.08);
}

.ust-cizgi {
    display: none !important;
}

.ust-alan-ic {
    width: 100%;
    max-width: none;
    min-height: 76px;
    padding: 10px 12px;
    gap: 18px;
}

.marka-alani,
.marka-alani-logolu {
    flex: 0 0 auto;
    min-height: 54px;
    padding: 7px 13px;
    background: rgba(248, 250, 253, .97);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

.marka-alani-logolu .marka-logo,
.marka-logo {
    display: block;
    width: clamp(122px, 11vw, 155px);
    height: auto;
    max-height: 48px;
    object-fit: contain;
}

.ust-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(207, 226, 250, .10);
    border-radius: 999px;
}

.ust-nav a {
    min-height: 42px;
    padding: 10px 16px;
    color: #c8d2e1 !important;
    border: 0 !important;
    border-radius: 999px;
    font-size: .89rem;
    font-weight: 700;
    line-height: 1.2;
    transition: color .22s ease, background-color .22s ease, transform .22s ease;
}

.ust-nav a:hover,
.ust-nav a:focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,.09);
    transform: translateY(-1px);
}

.ust-araclar {
    gap: 10px;
}

.dil-baglanti-grubu {
    padding: 3px;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--ref-line);
    border-radius: 999px;
}

.dil-baglanti-grubu a {
    display: grid;
    min-width: 38px;
    min-height: 38px;
    place-items: center;
    color: #b7c2d2 !important;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
}

.dil-baglanti-grubu a.aktif {
    color: #06101a !important;
    background: var(--ref-cyan);
}

.ust-cta,
.birincil-buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    color: #06101a !important;
    background: linear-gradient(135deg, #b4f5fb 0%, var(--ref-cyan) 100%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    box-shadow: 0 11px 28px rgba(74, 202, 222, .16), inset 0 1px 0 rgba(255,255,255,.75);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.2;
}

.ust-cta:hover,
.birincil-buton:hover {
    color: #06101a !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(74, 202, 222, .24), inset 0 1px 0 rgba(255,255,255,.8);
}

.ikincil-buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    color: #f4f8fd !important;
    background: rgba(255,255,255,.055);
    border: 1px solid var(--ref-line-strong);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.2;
}

.ikincil-buton:hover {
    color: #fff !important;
    background: rgba(255,255,255,.1);
    border-color: rgba(203, 226, 255, .34);
    transform: translateY(-2px);
}

main {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 32px), var(--ref-shell-width));
    margin: 12px auto 0;
    padding: 0;
    overflow: clip;
    color: var(--ref-text);
    background:
        radial-gradient(circle at 2% 5%, rgba(47, 194, 215, .11), transparent 25rem),
        radial-gradient(circle at 98% 17%, rgba(112, 99, 224, .13), transparent 30rem),
        rgba(5, 13, 25, .74);
    border: 1px solid var(--ref-line);
    border-radius: var(--ref-radius-shell);
    box-shadow: var(--ref-shadow), inset 0 1px 0 rgba(255,255,255,.055);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
}

.bolum,
.bolum-ilk,
body:not(.sayfa-anasayfa) .bolum,
body:not(.sayfa-anasayfa) .bolum-ilk {
    position: relative;
    padding: clamp(56px, 6vw, 84px) 0;
    background: transparent;
    border: 0 !important;
}

.bolum + .bolum,
.mg-work,
.mg-services,
.mg-process,
.mg-team,
.mg-faq,
.mg-final,
.mg-manifesto,
.bolum-studio {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.bolum::before,
.bolum::after,
.mg-work::before,
.mg-work::after,
.mg-services::before,
.mg-services::after {
    display: none !important;
    content: none !important;
}

/* Compact editorial hero */
body.sayfa-anasayfa .mg-hero,
.sayfa-anasayfa .mg-hero {
    padding: 30px 0 52px !important;
}

.mg-hero-shell {
    display: grid;
    gap: 22px;
}

.mg-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px !important;
    color: var(--ref-dim);
    border: 0 !important;
    font-size: .72rem;
    font-weight: 760;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mg-hero-copy {
    display: grid;
    gap: 0 !important;
    padding: 22px 0 10px !important;
}

.mg-hero .rozet,
.mg-section-no,
.ajans-kicker,
.blog-liste-kicker,
.hata-etiket,
.studio-rozet {
    display: inline-flex;
    width: fit-content !important;
    max-width: 100%;
    min-height: 32px;
    align-items: center;
    padding: 7px 12px;
    color: #dffbff !important;
    background: rgba(121, 231, 245, .085) !important;
    border: 1px solid rgba(121, 231, 245, .23) !important;
    border-radius: 999px !important;
    font-size: .69rem;
    font-weight: 790;
    line-height: 1.15;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.mg-hero .baslik-kritik,
body.sayfa-anasayfa .baslik-kritik {
    max-width: 11.5ch;
    margin: 16px 0 0;
    color: var(--ref-text) !important;
    background: linear-gradient(118deg, #fff 4%, #cff9ff 43%, #d3ceff 73%, #ffd9d3 100%);
    background-clip: text;
    font-size: clamp(4.3rem, 8.2vw, 7.4rem) !important;
    line-height: .88 !important;
    letter-spacing: -.075em !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-wrap: balance;
}

.mg-hero-bottom {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: 16px;
    align-items: stretch;
    padding: 0;
    border: 0 !important;
}

.mg-hero-intro,
.mg-hero-poster {
    min-width: 0;
    border: 1px solid var(--ref-line) !important;
    border-radius: 26px !important;
    box-shadow: 0 20px 52px rgba(0, 4, 16, .22), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.mg-hero-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(26px, 3.2vw, 40px) !important;
    background: linear-gradient(145deg, rgba(22, 39, 64, .66), rgba(11, 23, 42, .78)) !important;
}

.mg-hero-intro .kahraman-metin {
    max-width: 48ch;
    margin: 0;
    color: #c7d3e1 !important;
    font-size: clamp(.98rem, 1.25vw, 1.1rem) !important;
    line-height: 1.72;
}

.kahraman-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mg-hero-poster {
    position: relative;
    min-height: 356px !important;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 78% 22%, rgba(108, 226, 242, .34), transparent 25%),
        radial-gradient(circle at 18% 92%, rgba(255, 157, 142, .25), transparent 34%),
        linear-gradient(145deg, rgba(117, 104, 224, .76), rgba(20, 51, 89, .88)) !important;
}

.mg-hero-poster::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,.11), transparent 35%, rgba(255,255,255,.025) 66%, transparent);
    content: '';
}

.mg-poster-mark {
    top: 28px;
    left: 30px;
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.mg-hero-poster > strong {
    top: 18px;
    right: 28px;
    color: #eafbff !important;
    font-size: clamp(4.5rem, 9vw, 7.7rem) !important;
    line-height: .9;
}

.mg-poster-list {
    right: 30px;
    bottom: 26px;
    left: 30px;
    color: #fff;
    gap: 8px 20px;
    font-size: .68rem;
}

.mg-hero-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px !important;
    margin: 0 !important;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
}

.mg-hero-proof > div {
    min-width: 0;
    min-height: 118px;
    padding: 22px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 20px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.mg-hero-proof strong {
    color: #fff !important;
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
}

.mg-hero-proof span {
    color: var(--ref-dim) !important;
    font-size: .68rem;
}

/* Shared section language */
.mg-section-head {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.65fr) minmax(180px, .45fr);
    gap: 24px;
    align-items: end;
    margin: 0 0 32px !important;
    padding: 0 !important;
    border: 0 !important;
}

.mg-section-head .mg-section-no {
    align-self: start;
}

.mg-section-head h2,
.mg-manifesto h2,
.mg-team-intro h2,
.mg-faq-intro h2,
.mg-final-card h2 {
    margin: 0;
    color: var(--ref-text) !important;
    font-size: clamp(2.2rem, 4.2vw, 3.65rem);
    line-height: .98;
    text-wrap: balance;
}

.mg-section-head p,
.mg-manifesto-note p,
.mg-team-intro p,
.mg-faq-intro p,
.mg-final-card p {
    color: var(--ref-muted) !important;
}

.mg-section-head .ikincil-buton {
    justify-self: end;
}

.mg-manifesto-grid,
.mg-team-layout,
.mg-faq-layout,
.mg-final-card {
    position: relative;
    padding: clamp(30px, 4vw, 50px) !important;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255,255,255,.065), rgba(10, 23, 41, .68)) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 28px !important;
    box-shadow: 0 22px 60px rgba(0,4,15,.24), inset 0 1px 0 rgba(255,255,255,.065) !important;
}

.mg-manifesto-grid {
    display: grid;
    grid-template-columns: .55fr 1.65fr .75fr;
    gap: 32px;
    align-items: start;
}

.mg-manifesto-note {
    display: grid;
    gap: 22px;
}

.mg-manifesto-note p {
    margin: 0;
    font-size: .98rem;
}

.metin-buton {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    color: #dffbff !important;
    font-weight: 770;
    line-height: 1.35;
    border-bottom: 0 !important;
}

.metin-buton::after {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #06101a;
    background: var(--ref-cyan);
    border-radius: 50%;
    font-size: .7rem;
    content: '↗';
    transition: transform .2s ease;
}

.metin-buton:hover::after {
    transform: translate(2px, -2px);
}

/* CMS studio blocks: always contained, padded and high-contrast */
.bolum-studio,
.sayfa-anasayfa .bolum-studio {
    padding: 0 0 clamp(56px, 6vw, 84px) !important;
    background: transparent !important;
}

.studio-bolumler,
.studio-satir {
    gap: 14px !important;
}

.studio-blok,
.studio-arkaplan-cam,
.studio-arkaplan-kuzey,
.studio-arkaplan-amber,
.studio-arkaplan-safir,
.studio-arkaplan-gunes,
.studio-arkaplan-mesh,
.studio-arkaplan-gece {
    min-width: 0;
    min-height: 210px;
    padding: clamp(26px, 3.5vw, 42px) !important;
    color: var(--ref-text) !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(121, 231, 245, .10), transparent 28%),
        linear-gradient(145deg, rgba(29, 48, 74, .72), rgba(10, 23, 42, .88)) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 26px !important;
    box-shadow: 0 20px 54px rgba(0,4,15,.21), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.studio-arkaplan-amber,
.studio-arkaplan-gunes {
    background:
        radial-gradient(circle at 88% 10%, rgba(255, 157, 142, .14), transparent 30%),
        linear-gradient(145deg, rgba(54, 42, 58, .76), rgba(13, 24, 42, .90)) !important;
}

.studio-arkaplan-safir,
.studio-arkaplan-mesh {
    background:
        radial-gradient(circle at 88% 10%, rgba(168, 157, 253, .16), transparent 30%),
        linear-gradient(145deg, rgba(38, 42, 77, .76), rgba(12, 24, 44, .90)) !important;
}

.studio-blok,
.studio-blok h2,
.studio-blok h3,
.studio-blok h4,
.studio-arkaplan-gece h3 {
    color: var(--ref-text) !important;
}

.studio-blok p,
.studio-arkaplan-gece p {
    max-width: 64ch;
    color: var(--ref-muted) !important;
}

.studio-blok-icerik {
    width: min(100%, 760px);
    margin-inline: auto;
}

/* Services */
.mg-service-index,
.mg-services .servis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.mg-service-row,
.mg-services .servis-kart,
#hizmetler .mg-service-row {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    grid-template-areas: 'no title link' 'no text link';
    gap: 8px 18px;
    min-height: 166px;
    align-content: center;
    padding: 24px !important;
    color: var(--ref-text) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(10,24,43,.72)) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
    transition: transform .24s ease, background-color .24s ease, border-color .24s ease;
}

.mg-service-row:hover {
    transform: translateY(-3px);
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(11,28,49,.82)) !important;
    border-color: var(--ref-line-strong) !important;
}

.mg-service-row .servis-numara {
    grid-area: no;
    align-self: start;
    color: var(--ref-cyan) !important;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.mg-service-row h3 {
    grid-area: title;
    margin: 0;
    color: var(--ref-text) !important;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.12;
}

.mg-service-row p {
    grid-area: text;
    margin: 0;
    color: var(--ref-muted) !important;
    font-size: .88rem;
    line-height: 1.55;
}

.mg-service-row > a {
    grid-area: link;
    align-self: center;
    padding: 9px 12px;
    color: #dffbff !important;
    background: rgba(121,231,245,.08);
    border: 1px solid rgba(121,231,245,.18);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
}

/* Selected work: editorial mosaic, no oversized template cards */
.mg-work-grid,
.mg-work .proje-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.mg-work-card,
.mg-work .proje-kart {
    position: relative;
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: 150px 1fr;
    grid-column: span 3;
    min-width: 0;
    min-height: 352px;
    gap: 0 !important;
    overflow: hidden;
    color: var(--ref-text);
    background: rgba(9, 22, 40, .86) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 52px rgba(0,4,15,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.mg-work-card:nth-child(1),
.mg-work-card:nth-child(2) {
    grid-column: span 6;
    grid-template-columns: minmax(180px, .82fr) minmax(0, 1.18fr) !important;
    grid-template-rows: 1fr;
    min-height: 330px;
}

.mg-work-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--ref-line-strong) !important;
    box-shadow: 0 28px 68px rgba(0,4,15,.31), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.mg-work-visual {
    position: relative;
    min-width: 0;
    min-height: 0 !important;
    padding: 20px !important;
    overflow: hidden;
    color: #fff !important;
    background:
        radial-gradient(circle at 78% 18%, rgba(121,231,245,.35), transparent 27%),
        linear-gradient(145deg, rgba(116,102,222,.82), rgba(20,49,86,.94)) !important;
    border: 0 !important;
}

.mg-work-card:nth-child(3n + 2) .mg-work-visual {
    background:
        radial-gradient(circle at 20% 80%, rgba(255,204,137,.3), transparent 30%),
        linear-gradient(145deg, rgba(205,108,111,.78), rgba(91,52,108,.92)) !important;
}

.mg-work-card:nth-child(3n + 3) .mg-work-visual {
    background:
        radial-gradient(circle at 78% 20%, rgba(123,236,194,.3), transparent 28%),
        linear-gradient(145deg, rgba(40,151,168,.76), rgba(17,47,80,.94)) !important;
}

.mg-work-visual::after {
    position: absolute;
    right: -36px;
    bottom: -72px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 50%;
    content: '';
}

.mg-work-visual span {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.9) !important;
    font-size: .7rem;
    font-weight: 800;
}

.mg-work-visual strong {
    position: absolute;
    z-index: 1;
    right: 22px;
    bottom: 14px;
    color: #fff !important;
    font-size: clamp(3rem, 6.4vw, 5.8rem) !important;
    font-weight: 520;
    line-height: 1;
    letter-spacing: -.08em;
}

.mg-work-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 24px !important;
    color: var(--ref-text) !important;
    background: transparent !important;
}

.mg-work-copy .proje-kategori,
.proje-kategori {
    width: fit-content;
    padding: 6px 9px;
    color: #dffbff !important;
    background: rgba(121,231,245,.075) !important;
    border: 1px solid rgba(121,231,245,.18) !important;
    border-radius: 999px !important;
    font-size: .64rem !important;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mg-work-copy h3 {
    margin: 0;
    color: var(--ref-text) !important;
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    line-height: 1.06;
}

.mg-work-copy p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ref-muted) !important;
    font-size: .86rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mg-work-copy .metin-buton {
    margin-top: auto;
    font-size: .8rem;
}

/* Process and team */
.mg-process-grid,
.surec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.mg-process-card,
.mg-process .surec-kart {
    display: flex;
    min-height: 260px !important;
    flex-direction: column;
    padding: 24px !important;
    color: var(--ref-text) !important;
    background: linear-gradient(150deg, rgba(255,255,255,.052), rgba(10,23,42,.76)) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.mg-process-card > span {
    color: var(--ref-cyan) !important;
    font-size: .7rem;
    font-weight: 800;
}

.mg-process-card h3 {
    margin: auto 0 10px;
    color: var(--ref-text) !important;
    font-size: 1.38rem;
    line-height: 1.08;
}

.mg-section-head h2,
.mg-work-copy h3,
.mg-service-row h3,
.mg-faq .sss-dugme span {
    overflow-wrap: anywhere;
}

.mg-process-card p {
    margin: 0;
    color: var(--ref-muted) !important;
    font-size: .84rem;
    line-height: 1.55;
}

.mg-team-layout {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 38px;
}

.mg-team-intro {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.mg-team-intro h2 {
    font-size: clamp(2.2rem, 4.4vw, 3.7rem);
}

.mg-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
}

.mg-team-card {
    display: flex;
    min-width: 0;
    min-height: 180px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 20px !important;
}

.mg-team-card > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #06101a !important;
    background: var(--ref-cyan) !important;
    border-radius: 12px !important;
    font-size: .68rem;
    font-weight: 850;
}

.mg-team-card h3 {
    margin: 0 0 6px;
    color: var(--ref-text) !important;
    font-size: 1.08rem;
    line-height: 1.12;
}

.mg-team-card p {
    margin: 0;
    color: var(--ref-muted) !important;
    font-size: .8rem;
    line-height: 1.5;
}

/* FAQ: card grid, no rules, guaranteed contrast */
.mg-faq-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
}

.mg-faq-intro {
    display: grid;
    grid-template-columns: .55fr 1.45fr;
    gap: 28px;
    align-items: start;
    padding: 0 !important;
}

.mg-faq-intro h2 {
    max-width: 14ch;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
}

.mg-faq .sss-grid,
.sss-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
}

.mg-faq .sss-oge,
.sss-oge {
    min-width: 0;
    overflow: hidden;
    color: var(--ref-text) !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 20px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
    transition: background-color .22s ease, border-color .22s ease;
}

.mg-faq .sss-oge.acik,
.sss-oge.acik {
    background: rgba(121,231,245,.065) !important;
    border-color: rgba(121,231,245,.22) !important;
}

.mg-faq .sss-oge h3,
.sss-oge h3 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.mg-faq .sss-dugme,
.sss-dugme {
    display: grid !important;
    width: 100%;
    min-height: 88px;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 16px;
    align-items: center;
    padding: 20px 20px 20px 22px !important;
    color: var(--ref-text) !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left;
    cursor: pointer;
}

.mg-faq .sss-dugme span,
.sss-dugme span {
    min-width: 0;
    color: var(--ref-text) !important;
    font-size: .98rem !important;
    font-weight: 720 !important;
    line-height: 1.38;
    letter-spacing: -.015em;
}

.mg-faq .sss-dugme strong,
.sss-dugme strong {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #06101a !important;
    background: var(--ref-cyan) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 1rem;
    transition: transform .22s ease;
}

.sss-oge.acik .sss-dugme strong {
    transform: rotate(45deg);
}

.sss-icerik {
    border: 0 !important;
}

.sss-icerik > div {
    padding: 0 22px 22px !important;
}

.mg-faq .sss-icerik p,
.sss-icerik p {
    margin: 0;
    color: var(--ref-muted) !important;
    font-size: .87rem !important;
    line-height: 1.62;
}

.mg-final-card {
    display: grid;
    grid-template-columns: .55fr 1.45fr .75fr;
    gap: 30px;
    align-items: end;
    background:
        radial-gradient(circle at 84% 14%, rgba(121,231,245,.18), transparent 28%),
        radial-gradient(circle at 12% 92%, rgba(255,157,142,.12), transparent 30%),
        linear-gradient(145deg, rgba(72,64,133,.25), rgba(10,24,43,.80)) !important;
}

.mg-final-card > span {
    align-self: start;
    color: var(--ref-cyan) !important;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mg-final-card h2 {
    font-size: clamp(2.35rem, 4.8vw, 4rem);
}

.mg-final-card p {
    margin: 0 0 20px;
}

/* Inner pages */
body:not(.sayfa-anasayfa) main {
    padding-top: 0 !important;
}

body:not(.sayfa-anasayfa) .bolum-ilk {
    padding-top: 30px !important;
}

body:not(.sayfa-anasayfa) .sayfa-vitrin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, .72fr);
    gap: 14px !important;
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
}

body:not(.sayfa-anasayfa) .sayfa-kahraman-karti,
body:not(.sayfa-anasayfa) .koleksiyon-kahraman,
.sayfa-kabugu,
.cam-yuzey,
.sayfa-yan-kutu,
.liste-kutusu,
.cta-panel,
.blog-kart,
.detay-sss-kart {
    color: var(--ref-text) !important;
    background:
        radial-gradient(circle at 92% 8%, rgba(121,231,245,.09), transparent 24%),
        linear-gradient(145deg, rgba(255,255,255,.06), rgba(10,23,42,.75)) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 54px rgba(0,4,15,.20), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

body:not(.sayfa-anasayfa) .sayfa-kahraman-karti,
body:not(.sayfa-anasayfa) .koleksiyon-kahraman {
    min-height: 440px !important;
    padding: clamp(28px, 4.5vw, 54px) !important;
}

body:not(.sayfa-anasayfa) .sayfa-kahraman-karti::before,
body:not(.sayfa-anasayfa) .sayfa-kahraman-karti::after,
body:not(.sayfa-anasayfa) .koleksiyon-kahraman::before,
body:not(.sayfa-anasayfa) .koleksiyon-kahraman::after {
    display: none !important;
    content: none !important;
}

.sayfa-vitrin-yan {
    display: grid;
    gap: 14px;
}

.sayfa-yan-kutu,
.sayfa-mini-cta {
    min-width: 0;
    min-height: 0 !important;
    padding: 24px !important;
    color: var(--ref-text) !important;
}

.sayfa-kabugu,
.liste-kutusu,
.cta-panel,
.blog-icerik,
.blog-yan-alan,
.detay-ozet {
    padding: clamp(26px, 4vw, 48px) !important;
}

.sayfa-baslik {
    max-width: 13ch;
    color: var(--ref-text) !important;
    font-size: clamp(2.75rem, 6vw, 5.4rem) !important;
    line-height: .94 !important;
    text-wrap: balance;
}

.sayfa-ozet,
.metin-akisi p,
.detay-ozet,
.sayfa-yan-kutu p,
.blog-kart p,
.detay-sss-kart p,
.cta-panel p {
    color: var(--ref-muted) !important;
}

.breadcrumb,
.breadcrumb a,
body:not(.sayfa-anasayfa) .breadcrumb,
body:not(.sayfa-anasayfa) .breadcrumb a {
    color: var(--ref-dim) !important;
}

.sayfa-bilgi-cips span,
.etiket-satir span,
.servis-rozet,
.blog-meta span,
.kucuk-kod {
    color: #dffbff !important;
    background: rgba(121,231,245,.07) !important;
    border: 1px solid rgba(121,231,245,.17) !important;
    border-radius: 999px !important;
}

.detay-grid,
.blog-detay-grid,
.ajans-contact-grid {
    gap: 14px !important;
}

.servis-grid:not(.mg-service-index),
.proje-grid:not(.mg-work-grid),
.blog-grid {
    gap: 14px !important;
}

.servis-kart,
.proje-kart,
.blog-kart {
    min-width: 0;
    padding: 24px !important;
}

.proje-grid:not(.mg-work-grid) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.proje-grid:not(.mg-work-grid) .proje-kart {
    min-height: 330px !important;
    color: var(--ref-text) !important;
    background:
        radial-gradient(circle at 86% 12%, rgba(168,157,253,.16), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(10,23,42,.80)) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 24px !important;
}

.proje-kart h2,
.proje-kart h3,
.blog-kart h2,
.blog-kart h3,
.servis-kart h2,
.servis-kart h3,
.detay-sss-kart h3,
.sayfa-yan-kutu h2,
.sayfa-yan-kutu h3,
.cta-panel h2,
.cta-panel h3,
.metin-akisi h2,
.metin-akisi h3 {
    color: var(--ref-text) !important;
}

.ajans-contact-form input,
.ajans-contact-form textarea,
.ajans-contact-form select {
    color: var(--ref-text) !important;
    background: rgba(3, 11, 22, .52) !important;
    border: 1px solid var(--ref-line-strong) !important;
    border-radius: 14px !important;
}

.ajans-contact-form label {
    color: #d8e2ef !important;
}

/* Footer also follows the centered shell */
.alt-alan {
    width: min(calc(100% - 32px), var(--ref-shell-width));
    margin: 12px auto 28px;
    overflow: hidden;
    color: var(--ref-text);
    background: rgba(7, 16, 29, .76) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: var(--ref-radius-shell) !important;
    box-shadow: 0 22px 60px rgba(0,3,12,.25), inset 0 1px 0 rgba(255,255,255,.045);
}

.alt-ust {
    gap: 42px;
    padding-top: 48px;
    padding-bottom: 38px;
}

.alt-tanitim {
    padding: 28px !important;
}

.alt-alan h3,
.alt-alan h4,
.alt-alan a {
    color: var(--ref-text) !important;
}

.alt-alan p,
.alt-alan li {
    color: var(--ref-muted) !important;
}

.alt-kapanis {
    padding-top: 22px;
    padding-bottom: 24px;
    border-top: 1px solid var(--ref-line);
}

.mobil-hizli-cta {
    color: #06101a !important;
    background: var(--ref-cyan) !important;
}

/* Tablet */
@media (max-width: 1080px) {
    .ust-alan,
    body.sayfa-anasayfa .ust-alan {
        top: 8px;
        width: min(calc(100% - 20px), var(--ref-shell-width));
        margin-top: 8px;
    }

    .ust-alan-ic {
        min-height: 68px;
        padding: 8px 10px;
    }

    .marka-alani,
    .marka-alani-logolu {
        min-height: 48px;
        padding: 5px 10px;
    }

    .marka-alani-logolu .marka-logo,
    .marka-logo {
        width: 120px;
    }

    .mobil-menu-dugme {
        display: inline-flex;
        min-height: 44px;
        padding: 9px 13px;
        color: var(--ref-text) !important;
        background: rgba(255,255,255,.06) !important;
        border: 1px solid var(--ref-line) !important;
        border-radius: 999px !important;
    }

    .ust-nav {
        position: absolute;
        top: calc(100% + 9px);
        right: 0;
        left: 0;
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 12px;
        background: rgba(6, 15, 28, .96);
        border: 1px solid var(--ref-line);
        border-radius: 20px;
        box-shadow: 0 22px 60px rgba(0,3,12,.45);
        -webkit-backdrop-filter: blur(26px);
        backdrop-filter: blur(26px);
    }

    body.mobil-menu-acik .ust-nav {
        display: grid;
    }

    .ust-nav a {
        justify-content: center;
        text-align: center;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.055) !important;
    }

    main,
    .alt-alan {
        width: min(calc(100% - 20px), var(--ref-shell-width));
    }

    .kapsayici {
        width: min(calc(100% - 40px), var(--ref-content-width));
    }

    .mg-section-head {
        grid-template-columns: .55fr 1.45fr;
    }

    .mg-section-head p,
    .mg-section-head .ikincil-buton {
        grid-column: 2;
        justify-self: start;
    }

    .mg-manifesto-grid,
    .mg-final-card {
        grid-template-columns: .48fr 1.52fr;
    }

    .mg-manifesto-note,
    .mg-final-card > p,
    .mg-final-card > .kahraman-dugmeler {
        grid-column: 2;
    }

    .mg-work-card,
    .mg-work .proje-kart {
        grid-column: span 6;
    }

    .mg-work-card:nth-child(1),
    .mg-work-card:nth-child(2) {
        grid-template-columns: 1fr;
        grid-template-rows: 180px 1fr;
        min-height: 410px;
    }

    .mg-process-grid,
    .surec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mg-process-card,
    .mg-process .surec-kart {
        min-height: 220px !important;
    }

    .mg-team-layout {
        grid-template-columns: 1fr;
    }

    .proje-grid:not(.mg-work-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile is intentionally denser and uses two-column component grids. */
@media (max-width: 720px) {
    :root {
        --ref-radius-shell: 24px;
        --ref-radius-card: 18px;
    }

    html {
        scroll-padding-top: 88px;
    }

    body {
        font-size: 15px;
    }

    .ust-araclar {
        display: none !important;
    }

    .ust-alan,
    body.sayfa-anasayfa .ust-alan,
    main,
    .alt-alan {
        width: calc(100% - 12px);
    }

    .ust-alan {
        border-radius: 19px;
    }

    .ust-alan-ic {
        min-height: 60px;
        padding: 6px 7px;
    }

    .marka-alani,
    .marka-alani-logolu {
        min-height: 44px;
        padding: 4px 8px;
        border-radius: 13px;
    }

    .marka-alani-logolu .marka-logo,
    .marka-logo {
        width: 104px;
        max-height: 38px;
    }

    .mobil-menu-dugme {
        margin-left: auto;
        min-height: 42px;
        padding: 8px 11px;
    }

    .ust-nav {
        top: calc(100% + 7px);
        border-radius: 17px;
    }

    .ust-nav a {
        min-height: 43px;
        padding: 10px 8px;
        font-size: .78rem;
    }

    main {
        margin-top: 7px;
        border-radius: 24px;
    }

    .kapsayici {
        width: calc(100% - 24px);
    }

    .bolum,
    .bolum-ilk,
    body:not(.sayfa-anasayfa) .bolum {
        padding: 42px 0;
    }

    body.sayfa-anasayfa .mg-hero,
    .sayfa-anasayfa .mg-hero {
        padding: 18px 0 36px !important;
    }

    .mg-hero-shell {
        gap: 14px;
    }

    .mg-hero-meta {
        font-size: .55rem;
        letter-spacing: .08em;
    }

    .mg-hero-meta span:last-child {
        display: none;
    }

    .mg-hero-copy {
        padding: 10px 0 4px !important;
    }

    .mg-hero .baslik-kritik,
    body.sayfa-anasayfa .baslik-kritik {
        margin-top: 12px;
        font-size: clamp(2.75rem, 14vw, 4.2rem) !important;
        line-height: .9 !important;
    }

    .mg-hero .rozet,
    .mg-section-no,
    .ajans-kicker,
    .blog-liste-kicker,
    .hata-etiket,
    .studio-rozet {
        min-height: 26px;
        padding: 5px 9px;
        font-size: .55rem;
        letter-spacing: .08em;
    }

    .mg-hero-bottom {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mg-hero-intro {
        min-height: 0 !important;
        justify-content: flex-start !important;
        gap: 18px;
        padding: 20px !important;
        border-radius: 19px !important;
    }

    .mg-hero-intro .kahraman-metin {
        font-size: .88rem !important;
        line-height: 1.58;
    }

    .kahraman-dugmeler {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .birincil-buton,
    .ikincil-buton,
    .ust-cta {
        min-height: 43px;
        padding: 10px 12px;
        font-size: .72rem;
        text-align: center;
    }

    .mg-hero-poster {
        min-height: 220px !important;
        border-radius: 19px !important;
    }

    .mg-poster-mark {
        top: 18px;
        left: 18px;
        font-size: 2rem;
    }

    .mg-hero-poster > strong {
        top: 17px;
        right: 18px;
        font-size: clamp(3.2rem, 19vw, 5.3rem) !important;
    }

    .mg-poster-list {
        right: 18px;
        bottom: 16px;
        left: 18px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        font-size: .52rem;
    }

    .mg-hero-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px !important;
    }

    .mg-hero-proof > div {
        min-height: 82px;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .mg-hero-proof strong {
        font-size: 1.35rem;
    }

    .mg-section-head,
    .mg-manifesto-grid,
    .mg-final-card,
    .mg-faq-intro {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mg-section-head {
        margin-bottom: 22px !important;
    }

    .mg-section-head p,
    .mg-section-head .ikincil-buton,
    .mg-manifesto-note,
    .mg-final-card > p,
    .mg-final-card > .kahraman-dugmeler {
        grid-column: auto;
    }

    .mg-section-head h2,
    .mg-manifesto h2,
    .mg-team-intro h2,
    .mg-faq-intro h2,
    .mg-final-card h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .mg-manifesto-grid,
    .mg-team-layout,
    .mg-faq-layout,
    .mg-final-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .bolum-studio,
    .sayfa-anasayfa .bolum-studio {
        padding-bottom: 42px !important;
    }

    .studio-satir {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .studio-blok,
    .studio-span-12,
    .studio-span-8,
    .studio-span-7,
    .studio-span-6,
    .studio-span-5,
    .studio-span-4 {
        grid-column: span 2 !important;
        min-height: 160px;
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .mg-service-index,
    .mg-services .servis-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .mg-service-row,
    .mg-services .servis-kart,
    #hizmetler .mg-service-row {
        display: flex;
        min-height: 184px;
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .mg-service-row h3 {
        font-size: 1rem;
    }

    .mg-service-row p {
        display: -webkit-box;
        overflow: hidden;
        font-size: .7rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .mg-service-row > a {
        margin-top: auto;
        padding: 7px 9px;
        font-size: .62rem;
    }

    .mg-service-row > a span {
        display: none;
    }

    .mg-work-grid,
    .mg-work .proje-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .mg-work-card,
    .mg-work .proje-kart,
    .mg-work-card:nth-child(1),
    .mg-work-card:nth-child(2) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 112px 1fr;
        grid-column: span 1;
        min-height: 300px;
        border-radius: 18px !important;
    }

    .mg-work-visual {
        padding: 13px !important;
    }

    .mg-work-visual strong {
        right: 13px;
        bottom: 9px;
        font-size: 2.7rem !important;
    }

    .mg-work-copy {
        gap: 8px;
        padding: 15px !important;
    }

    .mg-work-copy .proje-kategori {
        padding: 4px 7px;
        font-size: .48rem !important;
    }

    .mg-work-copy h3 {
        font-size: 1.13rem;
    }

    .mg-work-copy p {
        font-size: .68rem;
        -webkit-line-clamp: 3;
    }

    .mg-work-copy .metin-buton {
        font-size: .64rem;
    }

    .metin-buton::after {
        display: none;
    }

    .mg-process-grid,
    .surec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .mg-process-card,
    .mg-process .surec-kart {
        min-height: 180px !important;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .mg-process-card h3 {
        font-size: 1rem;
    }

    .mg-process-card p {
        font-size: .68rem;
    }

    .mg-team-layout {
        gap: 24px;
    }

    .mg-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .mg-team-card {
        min-height: 165px;
        padding: 14px !important;
        border-radius: 17px !important;
    }

    .mg-team-card > span {
        width: 32px;
        height: 32px;
        border-radius: 10px !important;
    }

    .mg-team-card h3 {
        font-size: .88rem;
    }

    .mg-team-card p {
        font-size: .65rem;
    }

    .mg-faq .sss-grid,
    .sss-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .mg-faq .sss-oge,
    .sss-oge {
        border-radius: 17px !important;
    }

    .mg-faq .sss-dugme,
    .sss-dugme {
        min-height: 100px;
        grid-template-columns: minmax(0, 1fr) 28px;
        gap: 8px;
        align-items: start;
        padding: 14px !important;
    }

    .mg-faq .sss-dugme span,
    .sss-dugme span {
        font-size: .72rem !important;
        line-height: 1.35;
    }

    .mg-faq .sss-dugme strong,
    .sss-dugme strong {
        width: 28px;
        height: 28px;
        border-radius: 9px !important;
        font-size: .8rem;
    }

    .sss-icerik > div {
        padding: 0 14px 14px !important;
    }

    .mg-faq .sss-icerik p,
    .sss-icerik p {
        font-size: .66rem !important;
        line-height: 1.5;
    }

    body:not(.sayfa-anasayfa) .bolum-ilk {
        padding-top: 18px !important;
    }

    body:not(.sayfa-anasayfa) .sayfa-vitrin-grid {
        grid-template-columns: 1fr;
        gap: 8px !important;
    }

    body:not(.sayfa-anasayfa) .sayfa-kahraman-karti,
    body:not(.sayfa-anasayfa) .koleksiyon-kahraman {
        min-height: 320px !important;
        padding: 22px !important;
        border-radius: 20px !important;
    }

    .sayfa-baslik {
        font-size: clamp(2.4rem, 13vw, 4rem) !important;
    }

    .sayfa-vitrin-yan {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sayfa-yan-kutu,
    .sayfa-mini-cta,
    .sayfa-kabugu,
    .liste-kutusu,
    .cta-panel,
    .blog-icerik,
    .blog-yan-alan,
    .detay-ozet {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .proje-grid:not(.mg-work-grid),
    .blog-grid,
    .servis-grid:not(.mg-service-index) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .proje-grid:not(.mg-work-grid) .proje-kart,
    .blog-kart,
    .servis-grid:not(.mg-service-index) .servis-kart {
        min-height: 260px !important;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .alt-alan {
        margin-top: 7px;
        margin-bottom: 10px;
        border-radius: 24px !important;
    }

    .alt-ust {
        gap: 12px;
        padding-top: 28px;
        padding-bottom: 24px;
    }

    .alt-tanitim {
        padding: 18px !important;
    }

    .alt-sutunlar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
    }

    .alt-kapanis {
        gap: 14px;
        padding-top: 18px;
        padding-bottom: 20px;
    }
}

@media (max-width: 390px) {
    .kapsayici {
        width: calc(100% - 18px);
    }

    .mg-hero-meta {
        font-size: .5rem;
    }

    .mg-hero .baslik-kritik,
    body.sayfa-anasayfa .baslik-kritik {
        font-size: clamp(2.55rem, 13.7vw, 3.55rem) !important;
    }

    .mg-service-row,
    .mg-services .servis-kart,
    #hizmetler .mg-service-row {
        min-height: 176px;
        padding: 13px !important;
    }

    .mg-work-card,
    .mg-work .proje-kart,
    .mg-work-card:nth-child(1),
    .mg-work-card:nth-child(2) {
        min-height: 286px;
    }

    .mg-faq .sss-dugme,
    .sss-dugme {
        min-height: 110px;
        padding: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ========================================================================== 
   Refined Glass 2026.2 — visual projects, balanced pages, line-free surfaces
   ========================================================================== */

/* Legacy divider and framed-grid cleanup */
.mg-process,
.mg-process-grid,
.mg-team,
.mg-team-layout,
.mg-team-grid,
.mg-faq,
.mg-faq-layout,
.mg-faq-intro,
.sss-grid,
.sss-oge,
.sayfa-vitrin-grid,
.sayfa-vitrin-yan,
.detay-grid,
.blog-detay-grid,
.detay-sss-grid,
.ajans-contact-grid,
.sayfa-icerik-tek,
.alt-kapanis {
    background-color: transparent !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
}

.mg-process::before,
.mg-process::after,
.mg-process-grid::before,
.mg-process-grid::after,
.mg-team::before,
.mg-team::after,
.mg-team-layout::before,
.mg-team-layout::after,
.mg-team-grid::before,
.mg-team-grid::after,
.mg-faq::before,
.mg-faq::after,
.mg-faq-layout::before,
.mg-faq-layout::after,
.mg-faq-intro::before,
.mg-faq-intro::after,
.sss-grid::before,
.sss-grid::after,
.sayfa-vitrin-grid::before,
.sayfa-vitrin-grid::after,
.detay-grid::before,
.detay-grid::after,
.ajans-contact-grid::before,
.ajans-contact-grid::after {
    display: none !important;
    content: none !important;
}

/* Opaque, isolated mobile navigation */
@media (max-width: 1080px) {
    .ust-nav,
    body.mobil-menu-acik .ust-nav {
        isolation: isolate;
        color: var(--ref-text) !important;
        background: #07111f !important;
        border: 1px solid rgba(203, 226, 255, .19) !important;
        box-shadow: 0 26px 72px rgba(0, 3, 12, .72) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        opacity: 1 !important;
    }

    body.mobil-menu-acik .ust-alan {
        background: #07111f !important;
    }

    .ust-nav a {
        color: #f4f8fd !important;
        background: #101d30 !important;
        border: 1px solid rgba(203, 226, 255, .10) !important;
    }
}

/* Home capabilities without decorative numbering */
.mg-service-row,
.mg-services .servis-kart,
#hizmetler .mg-service-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: 'title link' 'text link' !important;
}

.mg-service-row .servis-numara,
.servis-numara,
.proje-kart-kimlik {
    display: none !important;
}

/* Real project imagery */
.mg-work-grid,
.mg-work .proje-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.mg-work-card,
.mg-work .proje-kart,
.mg-work-card:nth-child(1),
.mg-work-card:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-column: auto !important;
    min-height: 0 !important;
}

.mg-work-visual {
    position: relative;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    background: #0b1728 !important;
}

.mg-work-visual::after {
    display: none !important;
    content: none !important;
}

.mg-work-visual img,
.proje-kart-gorsel img,
.proje-detay-gorsel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mg-work-copy {
    min-height: 238px;
    padding: 24px !important;
}

.mg-work-copy h3 {
    font-size: clamp(1.35rem, 2vw, 1.8rem) !important;
}

.mg-work-copy p {
    -webkit-line-clamp: 3;
}

.mg-work-card.proje-gorselsiz {
    grid-template-rows: 1fr !important;
}

.mg-work-card.proje-gorselsiz .mg-work-copy {
    min-height: 300px;
    justify-content: center;
}

/* Project collection */
.proje-grid:not(.mg-work-grid) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.proje-grid:not(.mg-work-grid) .proje-kart {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    text-align: left;
}

.proje-kart-gorsel {
    aspect-ratio: 16 / 10;
    margin: 0;
    overflow: hidden;
    background: #0b1728;
}

.proje-kart-icerik {
    display: flex;
    min-width: 0;
    min-height: 240px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
}

.proje-kart-icerik h3,
.proje-kart-icerik p {
    margin: 0;
}

.proje-kart-icerik .metin-buton {
    margin-top: auto;
}

.proje-kart.proje-gorselsiz {
    grid-template-rows: 1fr;
}

.proje-kart.proje-gorselsiz .proje-kart-icerik {
    min-height: 320px;
    justify-content: center;
}

.proje-detay-gorsel {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 28px;
    overflow: hidden;
    background: #0b1728;
    border: 1px solid var(--ref-line);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(0,3,12,.24);
}

/* Process and team: content-first, no counters or initials */
.mg-process-grid,
.surec-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

.mg-process-card,
.mg-process .surec-kart {
    min-height: 210px !important;
    justify-content: center !important;
    text-align: center;
}

.mg-process-card > span {
    display: none !important;
}

.mg-process-card h3 {
    margin: 0 0 12px !important;
}

.mg-team-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch;
}

.mg-team-intro {
    justify-content: center;
    padding: clamp(12px, 2vw, 24px);
    text-align: left;
}

.mg-team-card {
    min-height: 170px;
    justify-content: center;
    padding: 24px !important;
    text-align: left;
}

.mg-team-card > span {
    display: none !important;
}

.mg-team-card h3 {
    margin-bottom: 10px;
}

/* FAQ stays visually centered and no unfinished empty framed area */
.mg-faq-layout {
    padding: clamp(30px, 4vw, 50px) !important;
}

.mg-faq-intro {
    grid-template-columns: minmax(180px, .45fr) minmax(0, 1.55fr) !important;
    align-items: center;
}

.mg-faq-intro h2 {
    max-width: 16ch;
}

.mg-faq .sss-grid,
.sss-grid {
    align-items: start;
}

/* Balanced inner-page composition */
body:not(.sayfa-anasayfa) .sayfa-vitrin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
}

body:not(.sayfa-anasayfa) .sayfa-kahraman-karti,
body:not(.sayfa-anasayfa) .koleksiyon-kahraman {
    display: flex;
    min-height: 520px !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

body:not(.sayfa-anasayfa) .sayfa-kahraman-karti .breadcrumb,
body:not(.sayfa-anasayfa) .koleksiyon-kahraman .breadcrumb,
body:not(.sayfa-anasayfa) .sayfa-kahraman-karti .rozet,
body:not(.sayfa-anasayfa) .koleksiyon-kahraman .rozet {
    align-self: center;
}

body:not(.sayfa-anasayfa) .sayfa-kahraman-karti .sayfa-baslik,
body:not(.sayfa-anasayfa) .koleksiyon-kahraman .sayfa-baslik,
body:not(.sayfa-anasayfa) .sayfa-kahraman-karti .sayfa-ozet,
body:not(.sayfa-anasayfa) .koleksiyon-kahraman .sayfa-ozet {
    margin-right: auto;
    margin-left: auto;
}

.sayfa-bilgi-cips,
.sayfa-kahraman-aksiyon {
    justify-content: center;
}

.sayfa-vitrin-yan {
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    align-items: stretch;
}

.sayfa-vitrin-yan .sayfa-yan-kutu,
.sayfa-vitrin-yan .sayfa-mini-cta {
    display: flex;
    min-height: 0 !important;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 3.5vw, 44px) !important;
}

body:not(.sayfa-anasayfa) .detay-grid,
body:not(.sayfa-anasayfa) .blog-detay-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    align-items: stretch;
    gap: 14px !important;
}

body:not(.sayfa-anasayfa) .yan-bilgi-alani {
    position: static !important;
    top: auto !important;
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    gap: 14px !important;
    background: transparent !important;
    border: 0 !important;
}

body:not(.sayfa-anasayfa) .yan-bilgi-alani .liste-kutusu,
body:not(.sayfa-anasayfa) .yan-bilgi-alani .liste-kutusu:nth-child(even) {
    display: flex;
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    color: var(--ref-text) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(10,23,42,.78)) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 24px !important;
}

body:not(.sayfa-anasayfa) .yan-bilgi-alani li {
    border-top: 0 !important;
}

body:not(.sayfa-anasayfa) .sayfa-icerik-tek {
    width: min(calc(100% - 64px), 980px) !important;
    max-width: 980px !important;
    margin-inline: auto;
}

body:not(.sayfa-anasayfa) .sayfa-icerik-tek .metin-akisi {
    display: block !important;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
    padding: clamp(34px, 5vw, 62px) !important;
}

body:not(.sayfa-anasayfa) .sayfa-icerik-tek .metin-akisi h2,
body:not(.sayfa-anasayfa) .sayfa-icerik-tek .metin-akisi h3,
body:not(.sayfa-anasayfa) .sayfa-icerik-tek .metin-akisi p,
body:not(.sayfa-anasayfa) .sayfa-icerik-tek .metin-akisi ul,
body:not(.sayfa-anasayfa) .sayfa-icerik-tek .metin-akisi ol {
    grid-column: auto !important;
    max-width: 70ch;
    margin-right: auto;
    margin-left: auto;
}

body:not(.sayfa-anasayfa) .sayfa-icerik-tek .metin-akisi h2,
body:not(.sayfa-anasayfa) .sayfa-icerik-tek .metin-akisi h3 {
    text-align: center;
}

/* Contact: spacious form and icon-led options */
body.sayfa-sayfa .ajans-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch;
}

body.sayfa-sayfa .ajans-contact-info,
body.sayfa-sayfa .ajans-contact-form {
    min-width: 0;
    min-height: 680px;
    margin: 0 !important;
    padding: clamp(34px, 4.5vw, 58px) !important;
    border-radius: 28px !important;
}

body.sayfa-sayfa .ajans-contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.sayfa-sayfa .ajans-contact-info h1 {
    max-width: 11ch;
    margin: 22px 0 34px;
    font-size: clamp(3rem, 5vw, 4.8rem) !important;
    line-height: .96;
}

body.sayfa-sayfa .ajans-contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
}

body.sayfa-sayfa .ajans-contact-list a,
body.sayfa-sayfa .ajans-contact-list > div {
    display: grid;
    min-width: 0;
    min-height: 96px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 14px !important;
    overflow: hidden;
    color: var(--ref-text) !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: 18px !important;
}

.ajans-contact-icon {
    display: grid !important;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #06101a !important;
    background: var(--ref-cyan) !important;
    border-radius: 14px;
}

.ajans-contact-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ajans-contact-copy {
    display: grid !important;
    min-width: 0;
    gap: 4px;
}

.ajans-contact-copy small {
    color: var(--ref-dim) !important;
    font-size: .66rem;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ajans-contact-copy strong {
    min-width: 0;
    color: var(--ref-text) !important;
    font-size: .84rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body.sayfa-sayfa .ajans-contact-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

body.sayfa-sayfa .ajans-contact-form h2 {
    margin: 0 0 6px;
    color: var(--ref-text) !important;
    font-size: clamp(2rem, 3.5vw, 3rem);
}

body.sayfa-sayfa .ajans-contact-form label {
    display: grid;
    gap: 8px;
    margin: 0 !important;
    color: #e1e8f2 !important;
}

body.sayfa-sayfa .ajans-contact-form label > span {
    padding-left: 2px;
    font-size: .8rem;
    font-weight: 760;
}

body.sayfa-sayfa .ajans-contact-form input,
body.sayfa-sayfa .ajans-contact-form textarea,
body.sayfa-sayfa .ajans-contact-form select {
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 15px 18px !important;
    color: var(--ref-text) !important;
    background: rgba(3,11,22,.64) !important;
    border: 1px solid var(--ref-line-strong) !important;
    border-radius: 15px !important;
    font: inherit;
    line-height: 1.45;
}

body.sayfa-sayfa .ajans-contact-form textarea {
    min-height: 160px;
    resize: vertical;
}

body.sayfa-sayfa .ajans-contact-form input::placeholder,
body.sayfa-sayfa .ajans-contact-form textarea::placeholder {
    color: #7f8da0 !important;
    opacity: 1;
}

body.sayfa-sayfa .ajans-contact-form .ajans-shadow-button {
    min-height: 54px;
    margin-top: 4px;
    padding: 14px 22px;
    color: #06101a !important;
    background: var(--ref-cyan) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 999px !important;
    font-weight: 820;
}

@media (max-width: 1080px) {
    .mg-work-grid,
    .mg-work .proje-grid,
    .proje-grid:not(.mg-work-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:not(.sayfa-anasayfa) .sayfa-vitrin-grid,
    body.sayfa-sayfa .ajans-contact-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.sayfa-anasayfa) .sayfa-kahraman-karti,
    body:not(.sayfa-anasayfa) .koleksiyon-kahraman {
        min-height: 420px !important;
    }

    body.sayfa-sayfa .ajans-contact-info,
    body.sayfa-sayfa .ajans-contact-form {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .mg-work-grid,
    .mg-work .proje-grid,
    .proje-grid:not(.mg-work-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .mg-work-card,
    .mg-work .proje-kart,
    .mg-work-card:nth-child(1),
    .mg-work-card:nth-child(2) {
        min-height: 0 !important;
        grid-template-rows: auto 1fr !important;
    }

    .mg-work-copy,
    .proje-kart-icerik {
        min-height: 210px;
        padding: 14px !important;
    }

    .mg-work-copy h3,
    .proje-kart-icerik h3 {
        font-size: 1rem !important;
    }

    .mg-work-copy p,
    .proje-kart-icerik p {
        font-size: .68rem !important;
    }

    .mg-process-grid,
    .surec-grid,
    .mg-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mg-process-card,
    .mg-process .surec-kart,
    .mg-team-card {
        min-height: 150px !important;
        padding: 15px !important;
    }

    .mg-team-layout {
        grid-template-columns: 1fr !important;
    }

    .mg-team-intro {
        padding: 0;
    }

    .mg-faq-intro {
        grid-template-columns: 1fr !important;
    }

    body:not(.sayfa-anasayfa) .sayfa-kahraman-karti,
    body:not(.sayfa-anasayfa) .koleksiyon-kahraman {
        min-height: 0 !important;
        text-align: center;
    }

    body:not(.sayfa-anasayfa) .sayfa-vitrin-yan {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    body:not(.sayfa-anasayfa) .sayfa-vitrin-yan .sayfa-yan-kutu,
    body:not(.sayfa-anasayfa) .sayfa-vitrin-yan .sayfa-mini-cta {
        padding: 16px !important;
    }

    body:not(.sayfa-anasayfa) .detay-grid,
    body:not(.sayfa-anasayfa) .blog-detay-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.sayfa-anasayfa) .yan-bilgi-alani {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.sayfa-anasayfa) .sayfa-icerik-tek {
        width: calc(100% - 24px) !important;
    }

    body:not(.sayfa-anasayfa) .sayfa-icerik-tek .metin-akisi {
        padding: 20px !important;
    }

    .proje-detay-gorsel {
        margin-bottom: 18px;
        border-radius: 16px;
    }

    body.sayfa-sayfa .ajans-contact-info,
    body.sayfa-sayfa .ajans-contact-form {
        padding: 22px !important;
        border-radius: 20px !important;
    }

    body.sayfa-sayfa .ajans-contact-info h1 {
        margin: 16px 0 24px;
        font-size: clamp(2.5rem, 12vw, 3.7rem) !important;
    }

    body.sayfa-sayfa .ajans-contact-list {
        grid-template-columns: 1fr;
    }

    body.sayfa-sayfa .ajans-contact-list a,
    body.sayfa-sayfa .ajans-contact-list > div {
        min-height: 78px;
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 12px !important;
    }

    .ajans-contact-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    body.sayfa-sayfa .ajans-contact-form input,
    body.sayfa-sayfa .ajans-contact-form textarea {
        padding: 14px 15px !important;
    }
}