.whatsapp-float{position:fixed;right:calc(var(--rail,72px) + 18px);bottom:18px;z-index:97;display:flex;align-items:center;gap:.6rem;background:#171717;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.72rem 1rem;font:700 .72rem/1 Arial,Helvetica,sans-serif;letter-spacing:.07em;text-transform:uppercase;box-shadow:0 14px 40px rgba(0,0,0,.18);transition:transform .25s,background .25s,color .25s}
.whatsapp-float:hover{transform:translateY(-3px);background:#d3ff43;color:#171717}
.whatsapp-float i{width:.55rem;height:.55rem;background:#40c96b;border-radius:50%;box-shadow:0 0 0 .25rem rgba(64,201,107,.14)}
img.image-pending{opacity:.08;filter:blur(14px) saturate(.7)}
img.image-ready{opacity:1;filter:none;transition:opacity .72s ease,filter .9s ease}
@media(max-width:1080px){.whatsapp-float{right:18px;bottom:70px}}
@media(max-width:720px){.whatsapp-float{right:10px;bottom:66px;padding:.7rem}.whatsapp-float span{display:none}.hero-orb,.giant-logo-body,.living-particle{animation:none!important}}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}
.managed-item video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#111}


/* ==========================================================================
   MOBIL SAGLAMLASTIRMA — UI1 (alti sayfanin hepsi bu dosyayi yukler)
   ========================================================================== */
@media (max-width: 720px) {
  /* Dokunma hedefleri: olculdu, hepsi 44px esiginin altindaydi. */
  /* height:auto SART: pages.css .bottom-nav a icin height:34px veriyor ve acik
     height, min-height'i ezer. Yalnizca min-height yazmak hicbir sey degistirmiyordu. */
  .bottom-nav a,
  .bottom-nav .signal,
  .filter,
  .pill,
  .project-toolbar .filter,
  .cms-filters button {
    height: auto; min-height: 44px;
    display: inline-flex; align-items: center;
  }

  /* Iletisim formu 390px'de 405px'e tasiyordu: alanlar kutu modelini saymiyordu. */
  .field, .field input, .field textarea, .field select {
    max-width: 100%; box-sizing: border-box;
  }
  .contact-layout, .form-grid { min-width: 0; }

  /* Iletisim formu acilis animasyonu alanlari 35px SAGA kaydiriyor
     (pages.css: body[data-page="contact"] .field). Genis ekranda kap yeterince
     buyuk oldugu icin gorunmuyor; 390px'de alanin sag 15px'i KIRPILIYORDU.
     Dar ekranda kaydirmayi kaldirip solma efektini birakiyoruz. */
  body[data-page="contact"] .field,
  body[data-page="contact"] .brief-form.visible .field { transform: none; }

  .bottom-nav .signal {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: inline-flex; align-items: center; justify-content: center; background: none;
  }
  .bottom-nav .signal::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; display: block;
  }

  .whatsapp-float { min-width: 48px; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; }
}

/* --------------------------------------------------------------------------
   FIRMA ICERIK IZGARASI
   .managed-content-grid / .managed-item / .media-preview markup'ta uretiliyordu
   ama HICBIR stylesheet'te tanimli degildi: duz blok olarak, her genislikte tek
   sutun halinde ve boyut rezervasyonu olmadan cikiyordu.
   -------------------------------------------------------------------------- */
.managed-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.managed-item { min-width: 0; }
.managed-item .media-preview {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative;
}
.managed-item .media-preview img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #111;
}
.managed-item .media-preview span {
  display: block; padding: 8px 2px; font-size: 12px; opacity: .7;
  min-height: 44px; line-height: 28px;
}
@media (max-width: 560px) {
  .managed-content-grid { grid-template-columns: 1fr; }
}

/* Isik kutusu — enhancements.js ile birlikte calisir. */
.grovia-lightbox { border: 0; padding: 0; background: rgba(10,10,10,.94); max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.grovia-lightbox::backdrop { background: rgba(10,10,10,.9); }
.grovia-lightbox figure { margin: 0; display: grid; place-items: center; height: 100%; gap: 12px; padding: 16px; }
.grovia-lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.grovia-lightbox button { min-height: 44px; min-width: 44px; padding: 10px 18px; cursor: pointer; }


/* ==========================================================================
   MÜŞTERİ REFERANSLARI  (marka sayfası)
   Eski siteden taşınan metinler. Rozet kaynaktaki dürüst çerçeveyi koruyor:
   bunlar birebir alıntı değil, özetlenmiş deneyim. Yıldız/puan BİLEREK yok —
   kendi sitende kendine verdiğin puan okuyucuya bir şey söylemez.
   ========================================================================== */
.referans-bolumu { margin: 72px 0; }
.referans-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.referans {
  margin: 0; padding: 26px 24px;
  border: 1px solid var(--line, #e3e0d8); border-radius: 14px;
  background: rgba(0, 0, 0, .035);
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.referans--not { background: none; border-style: dashed; }
.referans blockquote {
  margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65;
  quotes: "\201C" "\201D";
}
.referans blockquote::before { content: open-quote; opacity: .35; margin-right: 2px; }
.referans blockquote::after  { content: close-quote; opacity: .35; }
.referans--not blockquote { quotes: none; }
.referans--not blockquote::before,
.referans--not blockquote::after { content: none; }
.referans figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 4px;
}
.referans figcaption strong { font-size: 13px; letter-spacing: .02em; }
.referans-rozet {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line, #e3e0d8); opacity: .72;
}
@media (max-width: 560px) {
  .referans-bolumu { margin: 48px 0; }
  .referans-listesi { grid-template-columns: 1fr; }
  .referans { padding: 22px 20px; }
}

/* ---------------------------------------------------------------------------
   Blog — liste ve yazi sayfasi.

   Liste ILK HALINDE yuvarlak beyaz kartlardi ve sitenin dilinden ayrisiyordu.
   Buradaki idiom .service-block: numarali, ince cizgiyle ayrilmis editoryal
   satirlar. Blog listesi de ona uyduruldu.

   Yazilar eski MarkoAgency sitesinden Wayback Machine uzerinden kurtarildi.
   --------------------------------------------------------------------------- */
.blog-listesi { border-top: 1px solid var(--line); }
.blog-satir {
  display: grid;
  grid-template-columns: 5rem .95fr 1.05fr;
  gap: 2rem;
  align-items: start;
  padding: 2.6rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: opacity .35s;
}
.blog-satir:hover { opacity: .62; }
.blog-satir .num {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: .55rem;
  color: #6c6963;
}
.blog-satir h3 {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.blog-satir-yan { display: flex; flex-direction: column; gap: .8rem; padding-top: .35rem; }
.blog-satir .micro { margin: 0; }
.blog-satir p { margin: 0; font-size: 1rem; line-height: 1.55; color: #55514a; }
.blog-satir .ok { font-size: .8rem; letter-spacing: .04em; }

/* Blog yazisinin basligi hero olcusunde degil.
   .page-hero h1 kisa basliklar icin tasarlandi ("Blog.", "Biz."); yazi
   basliklari cumle uzunlugunda ve o olcude birkac ekran kapliyordu. */
body[data-page="blog"] .page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 22ch;
}
body[data-page="blog"] .page-hero { min-height: auto; padding-bottom: 4rem; }
body[data-page="blog"] .page-hero .lead { width: min(46rem, 100%); font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.4; }

/* Yazi sayfasi: olcu satirda, sayfa genisliginde degil. 68 karakter civari. */
.blog-yazi { max-width: 68ch; }
.blog-ust { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.blog-ust .micro { margin: 0; }
.blog-tarih { font-size: 13px; color: #6c6963; }
.blog-yazi h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.03em; margin: 44px 0 14px; }
.blog-yazi h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; margin: 34px 0 10px; }
.blog-yazi h4 { font-size: 16px; margin: 24px 0 6px; }
.blog-yazi p  { margin: 0 0 16px; line-height: 1.75; }
.blog-yazi ul { margin: 0 0 18px; padding-left: 20px; }
.blog-yazi li { margin-bottom: 7px; line-height: 1.7; }

/* Kaynaktaki sayi kartlari (ornegin "%250 - Ortalama ROI artisi"). */
.blog-sayilar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 22px 0 26px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.blog-sayi { padding: 20px 16px 18px; border-right: 1px solid var(--line); }
.blog-sayi:last-child { border-right: 0; }
.blog-sayi strong { display: block; font-size: 32px; letter-spacing: -.045em; line-height: 1; font-weight: 900; }
.blog-sayi span { display: block; margin-top: .45rem; font-size: 12px; line-height: 1.4; color: #55514a; }

/* SSS: gorunur icerik ile FAQPage semasi ayni metinden besleniyor. */
.blog-sss { margin-top: 12px; }
.blog-sss h4 { margin-top: 20px; }

@media (max-width: 900px) {
  .blog-satir { grid-template-columns: 3rem 1fr; gap: 1.2rem; }
  .blog-satir-yan { grid-column: 2; }
}
@media (max-width: 560px) {
  .blog-satir { padding: 2rem 0; }
  .blog-yazi h2 { font-size: 24px; margin-top: 34px; }
  .blog-yazi h3 { font-size: 19px; }
  .blog-sayilar { grid-template-columns: 1fr 1fr; }
  .blog-sayi:nth-child(2n) { border-right: 0; }
}

/* ---------------------------------------------------------------------------
   SSS, sözlük ve sektör sayfaları (UI1 kanonik).

   İçerik App_Code/Knowledge.cs'ten geliyor; burada yalnız görünüm var.
   Gövde <details>/<summary> kullanıyor: JavaScript olmadan da açılıp kapanır.
   --------------------------------------------------------------------------- */
.sss-grup { padding-top: 3rem; padding-bottom: 0; }
.sss-grup .section-head { margin-bottom: 1.2rem; }
.sss-listesi { border-top: 1px solid var(--line); }

.sss { border-bottom: 1px solid var(--line); }
.sss > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  /* Varsayilan aciklama ucgeni: iki ayri isaret gorunmesin diye kapatiliyor. */
  list-style: none;
}
.sss > summary::-webkit-details-marker { display: none; }
.sss > summary::marker { content: ""; }
.sss > summary h3 {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.03em;
  font-weight: 700;
}
.sss > summary span {
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.sss[open] > summary span { transform: rotate(45deg); }
.sss > p {
  margin: 0 0 1.6rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.65;
  color: #55514a;
}

/* Sözlük */
.sozluk { margin: 0; border-top: 1px solid var(--line); }
.sozluk-madde {
  display: grid;
  grid-template-columns: minmax(180px, 22%) 1fr;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
}
.sozluk-madde dt {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.sozluk-madde dd { margin: 0; line-height: 1.6; color: #55514a; }
.sozluk-madde dd a { font-size: .85rem; letter-spacing: .02em; white-space: nowrap; }

/* Sektör sayfası girişi */
.sektor-giris { max-width: 62ch; }
.sektor-giris p { font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.6; margin: 0 0 1rem; }

@media (max-width: 720px) {
  .sss-grup { padding-top: 2rem; }
  .sss > summary { padding: 1.15rem 0; gap: 1rem; }
  .sozluk-madde { grid-template-columns: 1fr; gap: .4rem; padding: 1.1rem 0; }
  .sozluk-madde dd a { white-space: normal; }
}

.service-detail-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:18px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;font-size:1rem;font-weight:600;transition:gap .2s ease,border-color .2s ease,color .2s ease}
.service-detail-link:hover{gap:10px;color:var(--accent,#d3ff43);border-color:var(--accent,#d3ff43)}
.service-detail-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.service-row h3,.service-block h3{overflow-wrap:break-word}
@media(max-width:639.98px){.bottom-nav a{padding-left:7px;padding-right:7px;font-size:11px;letter-spacing:0}.bottom-nav{max-width:calc(100% - 18px)}}

.referans--not h3{margin:0;font-size:1.1rem}.referans--not p{margin:0;font-size:1rem;line-height:1.7}

/* UI1 ortak tipografi ve sayfa rehberi. Uzun başlıklar ayrı ölçek kullanır. */
:root{--ui1-font:Arial,Helvetica,sans-serif;--ui1-heading-tracking:-.045em}
body{font-family:var(--ui1-font)}
button,input,textarea,select{font-family:inherit}
.whatsapp-float{font-family:var(--ui1-font)}
.section-head h2,.service-row h3,.service-block h3,.story-panel h3,.cta h2,.contact-intro h2{letter-spacing:var(--ui1-heading-tracking);line-height:1.03;font-weight:700}
.page-hero .lead{line-height:1.25;letter-spacing:-.025em}
.page-hero-detail{min-height:78svh;gap:3rem}
.page-hero.page-hero-detail h1{font-size:clamp(2.8rem,7.5vw,8rem);line-height:1.04;letter-spacing:var(--ui1-heading-tracking);max-width:17ch;text-wrap:balance;overflow-wrap:normal}
.page-hero-detail .lead{width:min(44rem,100%);font-size:clamp(1.1rem,2vw,1.75rem);line-height:1.45}
.service-block{grid-template-columns:3rem minmax(0,1fr) minmax(0,1fr)}
.service-block h3{font-size:clamp(1.8rem,3.4vw,3.6rem);overflow-wrap:normal}
.service-block>h3:last-child{grid-column:2/-1;max-width:32ch}
.section-head>*{min-width:0}
.section-head h2{font-size:clamp(2.6rem,6vw,6rem)}
.footer{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.footer small{font-size:.75rem;letter-spacing:.06em}
.footer p{font-size:.95rem;line-height:1.7}
.footer-directory{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding-top:2rem;margin-top:1rem;border-top:1px solid #ffffff30}
.footer-directory h2{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#aaa;margin:0 0 .75rem}
.footer-directory a{display:block;width:fit-content;padding:.65rem 0;font-size:.95rem;line-height:1.5;color:#eeeae3}
.footer-directory a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:720px){
 .page-hero-detail{min-height:auto;gap:2rem;padding-top:5.5rem}
 .service-block{grid-template-columns:2rem minmax(0,1fr);gap:1rem}
 .service-block .service-detail{grid-column:2}
 .footer-directory{grid-template-columns:1fr;gap:1.5rem}
 .section-head h2{font-size:clamp(2.4rem,10vw,4rem)}
}

.explore h2{font-size:clamp(2.8rem,8vw,6rem);letter-spacing:-.045em;overflow-wrap:anywhere}
.case-title{font-size:clamp(3rem,7vw,8rem);line-height:1.02;letter-spacing:-.045em;overflow-wrap:anywhere}
.case-summary-copy p{line-height:1.55;letter-spacing:-.02em}

/* Ekran görüntülerindeki başlık kırılması ve bağlantı tutarsızlığı. */
.intro>div:first-child{min-width:0;container-type:inline-size}
.intro .display{font-size:clamp(2.5rem,9vw,8rem);font-size:clamp(2rem,18cqi,8rem);line-height:1.02;letter-spacing:-.045em}
.intro-name{white-space:nowrap}
.portfolio-evidence .evidence-link,.portfolio-evidence .evidence-more a{display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:.7rem 1rem;border:1px solid var(--line,rgba(23,23,23,.16));border-radius:999px;font-size:.85rem;line-height:1.35;font-weight:500;letter-spacing:0;text-decoration:none;transition:background .2s,color .2s}
.portfolio-evidence .evidence-more{text-decoration:none;font-weight:400}
.portfolio-evidence .evidence-link:hover,.portfolio-evidence .evidence-more a:hover{background:#171717;color:#fff}
.case-next a{font-size:clamp(2rem,7vw,7rem);line-height:1.1;letter-spacing:-.045em}
.case-next a span{max-width:100%;overflow-wrap:anywhere}
@media(max-width:720px){.explore .filters{display:flex;flex-wrap:wrap}.case-kicker{flex-wrap:wrap}.case-meta>*{min-width:0}.case-meta strong{overflow-wrap:anywhere}}

@media(max-width:720px){.bottom-nav .signal{margin:0}.bottom-nav a{flex-shrink:0}}

@media(max-width:360px){:root .bottom-nav .rail-btn.in-bottom-nav{position:absolute;right:0;bottom:calc(100% + 10px);background:#171717;color:#fff;border:1px solid #ffffff30}}

@media(max-width:360px){:root .bottom-nav a{padding-left:4px;padding-right:4px;font-size:11px;letter-spacing:0}}

@media(max-width:360px){:root .bottom-nav{flex-wrap:wrap;border-radius:24px}:root .whatsapp-float{bottom:120px}}

/* html üzerinde overflow tanımlamayın: body overflow-x:hidden ile birlikte
   ana sayfanın sticky animasyonlarını viewport yerine body'ye bağlar. */