/* ============================================================
   DÜZELTME 3 — Çalışmalarımız / Referanslar / byUsta sayfaları
   Yalnız bu üç sayfa yükler. style.css ve main.js'e dokunulmaz;
   buradaki her kural gövdedeki s3-* sınıfıyla kapsanır.
   Tasarım dili aynı: #0E0E0C + #F4F3EE + #D8FF3E, Archivo + JetBrains Mono.
   ============================================================ */

/* ------------------------------------------------------------
   1) ÇALIŞMALARIMIZ
   ------------------------------------------------------------ */

/* Duvar başlığı: ipucu kutusu kaldırıldı, tek satır burada duruyor.
   Metin --muted'tan bir tık açıldı; kolaj üstünde okunsun. */
.s3-calismalar .td-baslik{background:rgba(14,14,12,.82)}
.s3-calismalar .td-baslik p:not(.crumb){color:var(--text);font-size:.6rem;letter-spacing:.11em;line-height:1.5}

/* "Profesyonel sistemler": rozet artık akışta, başlığın üstünde.
   Eski hâli bölüm sınırına yapışıp sağ üstte yalnız kalıyordu. */
.s3-calismalar #sistemler .tema-rozet{
  position:static;top:auto;right:auto;
  margin-bottom:.9rem;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;line-height:1;
  letter-spacing:.16em;
}
/* Çerçeve kare köşeli olsun: sayfadaki bütün kartlar 2px. */
.s3-calismalar #sistemler .tema-grid{
  border-radius:4px;
  box-shadow:0 0 34px -16px color-mix(in srgb,var(--acid) 55%,transparent);
}

/* Süreç kartları: dev "01" filigranı kartın altından taşıp
   paragrafın üstüne biniyordu. Küçült, içeride tut, metne yer aç. */
.s3-calismalar .h-track .step{padding-bottom:4.4rem}
.s3-calismalar .h-track .step::after{
  right:.5rem;bottom:.2rem;font-size:4.2rem;color:rgba(244,243,238,.05);
}
.s3-calismalar .h-track .step::before{margin-bottom:2.4rem}
@media (max-width:620px){
  .s3-calismalar .h-track .step{padding-bottom:3.6rem}
  .s3-calismalar .h-track .step::after{font-size:3.4rem}
}

/* Uyarı kutusunun satırları 150 karaktere uzuyordu. */
.s3-calismalar .tema-note p{max-width:92ch}

/* SSS: 1180 px'lik kapta 860 px'lik akordeon sağda 450 px boşluk
   bırakıyordu. Geniş ekranda başlık sola, sorular sağa. */
.s3-sss{display:block}
@media (min-width:1080px){
  .s3-sss{
    display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(2rem,5vw,4.5rem);align-items:start;
  }
  .s3-sss .sec-head{margin-bottom:0;position:sticky;top:112px}
  .s3-sss .faq{max-width:none}
}

/* ------------------------------------------------------------
   2) REFERANSLAR
   ------------------------------------------------------------ */

/* Vaka kartının üst bandı: marka adı h2 ile birebir aynıydı,
   arka arkaya iki kez okunuyordu. Artık teslim edilen ürünü gösteriyor.
   byKurye / byDükkan büyük harfe çevrilmesin — marka yazımı böyle. */
.s3-referanslar .vaka-marka{text-transform:none;letter-spacing:-.02em}
.s3-referanslar .vaka-marka .arti{color:var(--acid);font-weight:400;padding:0 .1em}
.s3-referanslar .vaka-marka small{text-transform:none;letter-spacing:.12em;color:var(--muted)}
.s3-referanslar .work-card.vaka .work-media{
  background:linear-gradient(180deg,color-mix(in srgb,var(--acid) 6%,var(--card)),var(--card));
}

/* Tam genişlik kartlarda paragraf 150 karakteri geçiyordu. */
.s3-referanslar .work-featured .work-body p{max-width:78ch}
.s3-referanslar .vaka-grid p{color:var(--text)}

/* Gifthoria kartı: telefonlar solda, sağda 700 px boş kalıyordu.
   Geniş ekranda metin sol kolona, telefonlar sağ kolona. */
@media (min-width:1000px){
  .s3-referanslar .work-featured:not(.vaka) .work-body{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(2rem,4vw,3.5rem);row-gap:.9rem;align-items:start;
  }
  .s3-referanslar .work-featured:not(.vaka) .work-body>.work-tag{grid-column:1;grid-row:1}
  .s3-referanslar .work-featured:not(.vaka) .work-body>h2{grid-column:1;grid-row:2}
  .s3-referanslar .work-featured:not(.vaka) .work-body>p{grid-column:1;grid-row:3}
  .s3-referanslar .work-featured:not(.vaka) .work-body>.work-links{grid-column:1;grid-row:4;align-self:end}
  .s3-referanslar .work-featured:not(.vaka) .work-body>.work-phones{
    grid-column:2;grid-row:1 / span 4;margin:0;align-self:center;flex-wrap:nowrap;
  }
  .s3-referanslar .work-featured:not(.vaka) .work-body>.work-phones img{height:340px}
}

/* ------------------------------------------------------------
   3) BYUSTA (usta bul)
   ------------------------------------------------------------ */

/* 8 kutu 3 kolonda son satırda delik bırakıyordu: geniş ekranda 4 kolon,
   iki tam satır. */
@media (min-width:1100px){
  .sk-kutular{grid-template-columns:repeat(4,1fr)}
}
/* "Komisyonsuz · doğrudan usta" satırı her kartta farklı yükseklikteydi;
   artık kartın dibine yapışıyor, satır hizası bozulmuyor. */
.sk-kutu > span:not(.ikon){flex:1}
.sk-kutu em{margin-top:.6rem}

/* Kutular ile "Usta mısınız?" şeridi arasındaki çift bölüm dolgusu
   200 px'lik ölü boşluk yapıyordu; tek bölüme indi. */
.sk-serit{margin-top:clamp(2.4rem,5vw,3.6rem)}

/* Kutulara ikon: sekiz metin kutusu görsel destekten yoksundu. */
.sk-kutu{position:relative}
.sk-kutu .ikon{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:36px;height:36px;margin-bottom:.35rem;
  border:1px solid color-mix(in srgb,var(--acid) 32%,transparent);
  border-radius:var(--radius,2px);color:var(--acid);
  transition:border-color .25s ease,background .25s ease;
}
.sk-kutu .ikon svg{width:18px;height:18px;display:block}
.sk-kutu:hover .ikon{border-color:var(--acid);background:rgba(216,255,62,.08)}

/* ------------------------------------------------------------
   4) ÇALIŞMALARIMIZ — telefonda süzgeç şeridi
   12 düğme altı satıra yığılıp ızgarayı ekrandan atıyordu;
   tek satır, yana kaydırmalı. Dokunma hedefi 44 px kalıyor.
   ------------------------------------------------------------ */
@media (max-width:760px){
  .s3-calismalar .tema-filter{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    margin-inline:calc(-1 * clamp(1.25rem,4vw,3rem));
    padding-inline:clamp(1.25rem,4vw,3rem);
    padding-bottom:.4rem;
    scrollbar-width:none;
  }
  .s3-calismalar .tema-filter::-webkit-scrollbar{display:none}
  .s3-calismalar .tema-filter button{flex:0 0 auto;scroll-snap-align:start}
}


/* ------------------------------------------------------------
   ÇALIŞMALARIMIZ — giriş metninin sağında 515 px ölü alan kalıyordu
   (metin 717 px, kap 1280 px). Geniş ekranda metnin yanına dağılımı
   gösteren özet sütunu kondu; dar ekranda alt alta iniyor.
   ------------------------------------------------------------ */
.cal-giris{display:grid;gap:clamp(1.4rem,3vw,2.6rem)}
@media (min-width:1080px){
  .cal-giris{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
}
.cal-giris > p{margin:0;max-width:72ch}
.cal-ozet{margin:0;display:grid;gap:.55rem;align-content:start}
.cal-ozet > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.65rem .9rem;border:1px solid var(--line);background:var(--card);
}
.cal-ozet dt{margin:0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);max-width:19ch}
.cal-ozet dd{margin:0;font-family:var(--font-head);font-weight:800;font-size:1.5rem;
  letter-spacing:-.03em;color:var(--ink);line-height:1}
.cal-ozet .cal-ozet-not{border-color:color-mix(in srgb,var(--acid) 40%,transparent)}
.cal-ozet .cal-ozet-not dd{font-size:1rem;color:var(--acid)}