/* Genel site stilleri.
   Astro'da her bileşenin kendi <style> bloğundaydı; PHP'de paketleyici
   olmadığı için hepsi burada toplandı.

   SIRA ÖNEMLİ: önce sayfalar, sonra layout'lar, en son bileşenler.
   Astro'nun yayınladığı sıra bu; aynı özgüllükteki kurallarda sonraki
   kazandığı için sıra değişirse görünüm bozulur. (Örnek: .bant__soz'ün
   alt boşluğu ile .beliren-baslik'in margin:0 kuralı çakışıyor.)

   Yönetim paneli stilleri buraya GİRMEZ — panelin kenar çubuğu da .gezinme
   sınıfını kullanıyor ve genel sitenin üst barını bozuyordu; onlar
   yonetim.css içinde. */


/* ===== src/pages/404.astro ===== */
.hata-sayfasi { padding-block: var(--b-6) var(--b-7); }
  .hata-sayfasi .etiket { margin-bottom: var(--b-2); }
  .hata-sayfasi .giris-metni { margin-top: var(--b-3); }
  .hata-sayfasi__dugmeler { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-4); }


/* ===== src/pages/atolye.astro ===== */
.atolye-giris { padding-block: var(--b-5) var(--b-4); }
  .atolye-giris .etiket { margin-bottom: var(--b-2); }
  .atolye-giris .giris-metni { margin-top: var(--b-3); max-width: 52ch; }

  .uyari {
    border: 1px solid var(--ates); border-left-width: 3px;
    padding: var(--b-2); margin-bottom: var(--b-3);
    background: var(--kagit); font-size: var(--t-kucuk);
  }

  /* ---------- İki sütunlu düzen ---------- */
  .atolye {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--b-5);
    align-items: start;
    padding-bottom: var(--b-6);
  }

  /* ---------- İlerleme rayı ---------- */
  .ray {
    display: flex; flex-wrap: wrap; gap: var(--b-2) var(--b-3);
    list-style: none; padding: 0 0 var(--b-4); margin: 0;
    border-bottom: 1px solid var(--cizgi);
  }
  .ray__ogesi {
    display: flex; align-items: baseline; gap: 0.5rem;
    font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--cizgi-koyu);
    transition: color var(--h-orta) var(--e-yumusak);
  }
  .ray__ogesi[data-ray-durum='aktif'] { color: var(--is); }
  .ray__ogesi[data-ray-durum='bitti'] { color: var(--ates); }
  .ray__ogesi[data-ray-durum='bitti'] .ray__no::after { content: ' ✓'; }

  /* ---------- Adım ---------- */
  .adim { border: 0; padding: var(--b-4) 0 0; margin: 0; min-inline-size: 0; }
  .adim[hidden] { display: none; }
  .adim__baslik { display: grid; gap: 0.75rem; padding: 0; margin-bottom: var(--b-2); }
  .adim__yardim { color: var(--is-yumusak); max-width: 54ch; margin-bottom: var(--b-3); }

  /* ---------- Plan kartları ---------- */
  .kart-agi { display: grid; gap: var(--b-2); }
  .kart-agi--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  .secim-kart input { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .secim-kart__ic {
    display: grid; gap: 0.5rem; cursor: pointer;
    padding: var(--b-2); height: 100%;
    border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
    background: var(--kagit);
    transition: border-color var(--h-hizli) var(--e-yumusak),
                background var(--h-hizli) var(--e-yumusak),
                transform var(--h-hizli) var(--e-yumusak);
  }
  .secim-kart__ic:hover { border-color: var(--cizgi-koyu); transform: translateY(-2px); }
  .secim-kart input:checked + .secim-kart__ic {
    border-color: var(--is); background: var(--kil);
  }
  .secim-kart input:focus-visible + .secim-kart__ic {
    outline: 2px solid var(--ates); outline-offset: 3px;
  }
  .secim-kart__cizim { width: 100%; height: auto; margin-bottom: 0.25rem; }
  .secim-kart__cizim .oda { fill: none; stroke: var(--cizgi-koyu); stroke-width: 1; }
  .secim-kart__cizim .tezgah-ikon { fill: var(--is-yumusak); }
  .secim-kart input:checked + .secim-kart__ic .tezgah-ikon { fill: var(--ates); }
  .secim-kart__ad { font-weight: 600; font-size: 1.125rem; }
  .secim-kart__not { font-size: var(--t-kucuk); color: var(--is-yumusak); line-height: 1.45; }

  /* ---------- Malzeme grupları ---------- */
  .grup { padding-block: var(--b-3); border-top: 1px solid var(--cizgi); }
  .grup:first-of-type { border-top: 0; padding-top: 0; }
  .grup__baslik { margin-bottom: var(--b-2); }
  .grup__ad {
    font-family: var(--f-display); font-weight: 600;
    font-size: 1.375rem; letter-spacing: -0.01em;
  }
  .grup__aciklama { font-size: var(--t-kucuk); color: var(--is-yumusak); max-width: 52ch; }

  .secenek-listesi { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .secenek input { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .secenek__ic {
    display: grid; gap: 0.125rem; cursor: pointer;
    min-height: 48px; padding: 0.75rem 1rem; height: 100%;
    border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
    background: var(--kagit);
    transition: border-color var(--h-hizli) var(--e-yumusak), background var(--h-hizli) var(--e-yumusak);
  }
  .secenek__ic:hover { border-color: var(--cizgi-koyu); }
  .secenek input:checked + .secenek__ic { border-color: var(--is); background: var(--kil); }
  .secenek input:focus-visible + .secenek__ic { outline: 2px solid var(--ates); outline-offset: 3px; }
  .secenek__ad { font-weight: 500; }
  .secenek__not { font-size: 0.8125rem; color: var(--is-yumusak); }

  /* ---------- Ekstra rozetleri ---------- */
  .rozet-listesi { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .rozet input { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .rozet__ic {
    display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
    min-height: 44px; padding: 0.625rem 1rem;
    border: 1px solid var(--cizgi); border-radius: 999px;
    background: var(--kagit); font-size: var(--t-kucuk);
    white-space: nowrap;
    transition: border-color var(--h-hizli) var(--e-yumusak), background var(--h-hizli) var(--e-yumusak);
  }
  .rozet__ic:hover { border-color: var(--cizgi-koyu); }
  .rozet__tik { width: 16px; height: 16px; opacity: 0; color: var(--ates); flex-shrink: 0;
                transition: opacity var(--h-hizli) var(--e-yumusak); }
  .rozet input:checked + .rozet__ic { border-color: var(--is); background: var(--kil); }
  .rozet input:checked + .rozet__ic .rozet__tik { opacity: 1; }
  .rozet input:focus-visible + .rozet__ic { outline: 2px solid var(--ates); outline-offset: 3px; }

  /* ---------- Form alanları ---------- */
  .alan-agi, .olcu-alani {
    display: grid; gap: var(--b-2);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .olcu-alani { margin-bottom: var(--b-3); }
  .alan { display: grid; gap: 0.375rem; align-content: start; }
  .alan--tam { grid-column: 1 / -1; }
  .alan--dar { max-width: 220px; }
  .alan__etiket { font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
                  text-transform: uppercase; letter-spacing: 0.12em; color: var(--is-yumusak); }
  .zorunlu { color: var(--ates); }
  .alan__girdi {
    min-height: 48px; padding: 0.75rem 1rem; width: 100%;
    background: var(--kagit); color: var(--is);
    border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
    transition: border-color var(--h-hizli) var(--e-yumusak);
  }
  textarea.alan__girdi { min-height: auto; resize: vertical; line-height: 1.5; }
  .alan__girdi:hover { border-color: var(--cizgi-koyu); }
  .alan__girdi:focus-visible { border-color: var(--is); outline: 2px solid var(--ates); outline-offset: 2px; }
  .alan__girdi[aria-invalid='true'] { border-color: var(--hata); }
  .alan__ipucu { font-size: 0.8125rem; color: var(--is-yumusak); }
  .alan__hata { font-size: 0.8125rem; color: var(--hata); font-weight: 500; }
  .alan__hata[hidden] { display: none; }

  /* Sayı girdilerindeki oklar sadeleşsin */
  input[type='number'] { appearance: textfield; -moz-appearance: textfield; }
  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button { appearance: none; margin: 0; }

  .onay { display: block; cursor: pointer; }
  .onay input { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .onay__ic { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--t-kucuk); }
  .onay__tik {
    width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
    border: 1px solid var(--cizgi-koyu); border-radius: var(--yuvarlak);
    padding: 2px; color: transparent; background: var(--kagit);
    transition: color var(--h-hizli) var(--e-yumusak), border-color var(--h-hizli) var(--e-yumusak);
  }
  .onay input:checked + .onay__ic .onay__tik { color: var(--ates-uzeri); background: var(--is); border-color: var(--is); }
  .onay input:focus-visible + .onay__ic .onay__tik { outline: 2px solid var(--ates); outline-offset: 3px; }

  .bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* ---------- Gezinme ---------- */
  .akis-gezinme {
    display: flex; flex-wrap: wrap; gap: var(--b-2);
    padding-top: var(--b-4); margin-top: var(--b-3);
    border-top: 1px solid var(--cizgi);
  }
  .akis-gezinme [data-ileri], .akis-gezinme [data-gonder] { margin-left: auto; }
  .ok--sol { transition: transform var(--h-orta) var(--e-yumusak); }
  .dugme:hover .ok--sol { transform: translateX(-4px); }

  .form-durum { margin-top: var(--b-2); font-size: var(--t-kucuk); min-height: 1.5em; }
  .form-durum[data-tip='hata'] { color: var(--hata); font-weight: 500; }
  .form-durum[data-tip='bekle'] { color: var(--is-yumusak); }

  /* ---------- Özet paneli ---------- */
  .ozet__yapisik {
    position: sticky; top: 6rem;
    border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
    background: var(--kagit); padding: var(--b-3);
    display: grid; gap: var(--b-2);
  }

  .cizim-kutusu { background: var(--kum); border-radius: var(--yuvarlak); padding: 0.5rem; }
  .cizim { width: 100%; height: auto; }
  .cizim .oda-hat { fill: none; stroke: var(--cizgi-koyu); stroke-width: 1; stroke-dasharray: 4 4; }
  /* Saydamlık yok: L ve U planlarında şeritler köşede üst üste biner,
     saydam olsalardı kesişim koyu bir leke gibi görünürdü. */
  .cizim .tezgah { fill: var(--ates); }
  .cizim .olcu-cizgi { stroke: var(--is-yumusak); stroke-width: 1; }
  .cizim .olcu-yazi {
    font-family: var(--f-etiket); font-size: 11px; fill: var(--is-yumusak);
    text-anchor: middle; dominant-baseline: middle;
  }
  .cizim .oda-yazi {
    font-family: var(--f-etiket); font-size: 10px; fill: var(--cizgi-koyu);
    text-transform: uppercase; letter-spacing: 0.1em;
  }

  .ozet__liste { display: grid; gap: 0.5rem; margin: 0; font-size: var(--t-kucuk); }
  .ozet__satir { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
  .ozet__satir dt { color: var(--is-yumusak); font-family: var(--f-etiket);
                    font-size: var(--t-etiket); text-transform: uppercase; letter-spacing: 0.12em;
                    flex-shrink: 0; }
  .ozet__satir dd { margin: 0; text-align: right; font-weight: 500; }

  .ozet__metraj {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding-top: var(--b-2); border-top: 1px solid var(--cizgi);
  }
  .ozet__sayi {
    font-family: var(--f-display); font-weight: 600;
    font-size: 2rem; line-height: 1;
  }
  .ozet__dipnot { font-size: 0.75rem; color: var(--is-yumusak); line-height: 1.45; }

  /* ---------- Başarı ---------- */
  .basari { padding-block: var(--b-7); }
  .basari[hidden] { display: none; }
  .basari__ic { display: grid; gap: var(--b-3); }
  .basari__dugmeler { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-2); }

  /* ---------- Duyarlı ---------- */
  @media (max-width: 1080px) {
    .atolye { grid-template-columns: 1fr; }
    .ozet { order: -1; }
    .ozet__yapisik { position: static; }
    .cizim-kutusu { max-width: 420px; margin-inline: auto; }
  }


/* ===== src/pages/hikaye.astro ===== */
.hikaye-giris { padding-block: var(--b-5) var(--b-4); }

  /* Tam genişlik bant — köşe yuvarlaması olmasın */
  .hikaye-gorsel { border-radius: 0; }
  .hikaye-giris .etiket { margin-bottom: var(--b-2); }
  .hikaye-giris .giris-metni { margin-top: var(--b-3); max-width: 56ch; }

  .hikaye-bolumler { display: grid; gap: var(--b-4); }
  .hikaye-bolum {
    display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--b-3);
    padding-top: var(--b-3); border-top: 1px solid var(--cizgi);
  }
  .hikaye-bolum__no { color: var(--ates); }
  .hikaye-bolum h2 { margin-bottom: var(--b-2); }
  .hikaye-bolum__metin {
    max-width: 62ch; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    line-height: 1.6; text-wrap: pretty;
  }
  @media (max-width: 700px) { .hikaye-bolum { grid-template-columns: 1fr; gap: var(--b-2); } }


/* ===== src/pages/iletisim.astro ===== */
/* ---------- Giriş ---------- */
  .iletisim-giris { padding-block: var(--b-5) var(--b-4); }
  .iletisim-giris__ic {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--b-5); align-items: center;
  }
  .iletisim-giris__metin { display: grid; gap: var(--b-2); justify-items: start; }
  /* Başlık artık display--xl; "KONUŞALIM"ın Ş kuyruğu alttaki paragrafa girmiyor */
  .iletisim-giris__metin h1 { margin-block: 0.25rem var(--b-1); }
  .iletisim-giris__metin .giris-metni { margin-bottom: var(--b-2); }

  .iletisim-giris__gorsel { margin: 0; display: grid; gap: 0.75rem; }


  /* ---------- Kanallar ---------- */
  .kanallar-bolumu { padding-block: var(--b-4) var(--b-6); }
  .kanallar {
    list-style: none; margin: 0; padding: 0;
    /* 260px'lik kartlarda e-posta adresi sığmıyordu; 320'nin altına
       inince üç sütun yerine iki sütuna düşüyor ve adres tek satırda
       kalıyor. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--b-2);
  }

  .kanal__ic {
    display: grid; gap: 0.375rem; height: 100%;
    padding: var(--b-3) var(--b-3) var(--b-3);
    background: var(--zemin-kart);
    border: 1px solid var(--cizgi-tema); border-radius: var(--yuvarlak);
    text-decoration: none; color: inherit;
    position: relative;
    transition: border-color var(--h-orta) var(--e-yumusak),
                transform var(--h-orta) var(--e-yumusak),
                box-shadow var(--h-orta) var(--e-yumusak);
  }
  a.kanal__ic:hover {
    border-color: var(--metin); transform: translateY(-3px);
    box-shadow: 0 14px 30px -22px rgba(22, 19, 15, 0.6);
  }
  a.kanal__ic:focus-visible { outline: 2px solid var(--ates); outline-offset: 3px; }

  .kanal__etiket { color: var(--metin-yumusak); }

  /* Değerler gövde fontunda ve doğal yazımda — e-posta adresi ağır display
     fontunda büyük harflerle basılınca okunmuyordu. */
  .kanal__deger {
    /* Üst sınır 1.5rem'di: geniş ekranda adres 372px yer istiyor, kutuda
       369px vardı — üç piksel yüzünden alt satıra kayıyordu. Sınırı
       düşürünce hem sığıyor hem telefon numarasıyla aynı ölçekte kalıyor. */
    font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
    font-weight: 500; line-height: 1.25;
    letter-spacing: -0.01em;
    /* anywhere kelimeyi rastgele kesiyordu ("gmail.co" + "m"). break-word
       yalnız başka çare kalmayınca kesiyor; asıl bölme noktasını
       değerin içine konan <wbr> veriyor (mm_bolunebilir). */
    overflow-wrap: break-word;
  }
  a.kanal__ic:hover .kanal__deger { color: var(--vurgu); }

  .kanal__not {
    font-size: var(--t-kucuk); color: var(--metin-yumusak);
    line-height: 1.45; margin-top: 0.25rem;
  }

  .kanal__ok {
    position: absolute; top: var(--b-3); right: var(--b-3);
    font-size: 1.125rem; color: var(--cizgi-tema-koyu);
    transition: transform var(--h-orta) var(--e-yumusak), color var(--h-orta) var(--e-yumusak);
  }
  a.kanal__ic:hover .kanal__ok { color: var(--vurgu); transform: translateX(4px); }

  /* Bilgi kartı: tıklanabilir değil, bu yüzden düz zeminde durur */
  .kanal__ic--bilgi { background: transparent; }
  .kanal__adres, .kanal__saat {
    font-style: normal; font-size: var(--t-kucuk);
    line-height: 1.5; color: var(--metin);
  }
  .kanal__ayrac {
    display: block; height: 1px; background: var(--cizgi-tema);
    margin-block: 0.625rem;
  }

  @media (max-width: 900px) {
    .iletisim-giris__ic { grid-template-columns: 1fr; gap: var(--b-4); }
    .iletisim-giris__gorsel { order: -1; }
    .iletisim-giris__gorsel .kayar { aspect-ratio: 16 / 10; }
  }


/* ===== src/pages/index.astro ===== */
/* ================= GİRİŞ ================= */
  .giris {
    position: relative; isolation: isolate;
    min-height: min(92vh, 820px);
    display: flex; align-items: flex-end;
    padding-block: var(--b-6) var(--b-5);
    overflow: hidden;
  }

  /* Fotoğraf katmanı — imleçle kayar (JS, --kx/--ky) */
  .giris__katman {
    position: absolute; inset: -6%;
    z-index: -2;
    transform: translate3d(var(--kx, 0), var(--ky, 0), 0);
    will-change: transform;
  }
  .giris__foto { width: 100%; height: 100%; object-fit: cover; }

  /* Okunurluk perdesi: metnin oturduğu sol tarafta koyu */
  .giris::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(100deg,
        color-mix(in srgb, var(--is) 90%, transparent) 0%,
        color-mix(in srgb, var(--is) 72%, transparent) 42%,
        color-mix(in srgb, var(--is) 34%, transparent) 100%),
      linear-gradient(to top,
        color-mix(in srgb, var(--is) 60%, transparent) 0%,
        transparent 45%);
  }

  .giris__ic { width: 100%; color: var(--kum); }
  .giris__rozet { color: color-mix(in srgb, var(--kum) 82%, transparent); margin-bottom: var(--b-3); }
  /* :global şart — bu eleman BelirenBaslik.astro tarafından basılıyor,
     index.astro'nun scope niteliğini almıyor. */
  .giris__baslik {
    margin: 0; color: var(--kum);
    /* Sadece hero bir tık ince: diğer başlıklar 622'de kalıyor.
       Fotoğraf üstünde açık renk metin optik olarak daha kalın görünür,
       bu yüzden koyu zeminlerdeki başlığın biraz inceltilmesi gerekir. */
    font-weight: 565;
    font-variation-settings: 'wght' 565;
  }


  .giris__alt {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: var(--b-3);
    margin-top: var(--b-4);
    padding-top: var(--b-3);
    border-top: 1px solid color-mix(in srgb, var(--kum) 30%, transparent);
  }
  .giris__metin {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.55; max-width: 46ch;
    color: color-mix(in srgb, var(--kum) 88%, transparent);
    text-wrap: pretty;
  }
  .giris__dugmeler { display: flex; flex-wrap: wrap; gap: var(--b-2); }

  /* ================= MANİFESTO ================= */
  .manifesto__ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--b-5); }
  .manifesto__metin { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; text-wrap: pretty; }

  .sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
             gap: var(--b-3); margin-top: var(--b-4); }
  .sayi { border-top: 1px solid var(--metin); padding-top: 0.75rem; }
  .sayi__deger {
    font-family: var(--f-display); font-weight: 600;
    font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.05;
  }
  .sayi__ek { font-size: 0.5em; color: var(--vurgu); }
  .sayi__etiket { margin: 0.375rem 0 0; font-size: var(--t-kucuk); color: var(--metin-yumusak); }

  /* ================= ATÖLYE BANDI ================= */
  .bant {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: var(--b-7);
    color: var(--kum);
    /* overflow:hidden burayı kaydırma kabı yapıyor; içerideki yazının
       view() ile kendi ilerlemesini okuyabilmesi için çizelge isimlendirilir */
    view-timeline-name: --bant-gorunum;
    view-timeline-axis: block;
  }
  .bant__soz { animation-timeline: --bant-gorunum; }
  .bant__katman {
    position: absolute; inset: -6%; z-index: -2;
    transform: translate3d(var(--kx, 0), var(--ky, 0), 0);
    will-change: transform;
  }
  .bant__foto { width: 100%; height: 100%; object-fit: cover; }
  .bant::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(95deg,
      color-mix(in srgb, var(--is) 88%, transparent) 0%,
      color-mix(in srgb, var(--is) 66%, transparent) 55%,
      color-mix(in srgb, var(--is) 40%, transparent) 100%);
  }
  .bant__ic { max-width: var(--en); }
  .bant__etiket { color: color-mix(in srgb, var(--kum) 80%, transparent); margin-bottom: var(--b-2); }
  .bant__soz { color: var(--kum); margin-bottom: var(--b-3); }
  .bant__metin {
    max-width: 48ch; line-height: 1.6;
    color: color-mix(in srgb, var(--kum) 86%, transparent);
    text-wrap: pretty;
  }

  /* ================= BÖLÜM BAŞLIĞI ================= */
  .bolum-basligi { display: grid; gap: 0.75rem; margin-bottom: var(--b-4); padding-bottom: var(--b-2); }
  .bolum-basligi__hepsi {
    justify-self: start; font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--metin-yumusak);
  }

  /* ================= ATÖLYE ÇAĞRISI ================= */
  .atolye-cagri { background: var(--zemin-kart); border-block: 1px solid var(--cizgi-tema); }
  .atolye-cagri__ic {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--b-5); align-items: center;
  }
  .atolye-cagri__metin { display: grid; gap: var(--b-2); justify-items: start; }
  .atolye-cagri__metin h2 { margin-block: 0.25rem; }

  .plan-ozet { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-2); }
  .plan-ozet__oge {
    display: grid; grid-template-columns: 5rem 1fr; gap: 0.25rem var(--b-2);
    align-items: center; padding-block: var(--b-2);
    border-top: 1px solid var(--cizgi-tema);
  }
  .plan-ozet__cizim { grid-row: span 2; width: 100%; }
  .plan-ozet__cizim .oda { fill: none; stroke: var(--cizgi-tema-koyu); stroke-width: 1; }
  .plan-ozet__cizim .dolu { fill: var(--vurgu); }
  .plan-ozet__ad {
    font-family: var(--f-display); font-weight: 600;
    font-size: 1.125rem; align-self: end; line-height: 1.15;
  }
  .plan-ozet__not { font-size: var(--t-kucuk); color: var(--metin-yumusak); align-self: start; }

  /* ================= SÜREÇ ================= */
  .surec__ic {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--b-5); align-items: start;
  }
  .surec__gorsel { position: sticky; top: 6rem; }

  .surec-listesi { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi-tema); }
  .surec-adim {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) 7rem;
    gap: var(--b-2) var(--b-3); align-items: baseline;
    padding-block: var(--b-3); border-bottom: 1px solid var(--cizgi-tema);
  }
  .surec-adim__no {
    font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
    letter-spacing: 0.12em; color: var(--vurgu);
  }
  .surec-adim__ad {
    font-family: var(--f-display); font-weight: 600;
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    line-height: 1.15; margin-bottom: 0.375rem;
  }
  .surec-adim__metin { color: var(--metin-yumusak); font-size: var(--t-kucuk); max-width: 56ch; }
  .surec-adim__sure { text-align: right; }

  /* ================= DUYARLI ================= */
  @media (max-width: 900px) {
    .manifesto__ic, .atolye-cagri__ic, .surec__ic { grid-template-columns: 1fr; gap: var(--b-4); }
    .surec__gorsel { position: static; aspect-ratio: 16 / 10; }
    .surec-adim { grid-template-columns: 2.5rem 1fr; }
    .surec-adim__sure { grid-column: 2; text-align: left; }
    .giris { min-height: auto; padding-block: var(--b-5) var(--b-4); }
  }


/* ===== src/pages/showroom/[slug].astro ===== */
.vaka__ust { padding-block: var(--b-4) var(--b-4); }
  .geri-baglanti {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--is-yumusak); text-decoration: none; margin-bottom: var(--b-3);
    min-height: 44px;
  }
  .geri-baglanti:hover { color: var(--ates); }
  .geri-baglanti .ok--sol { transition: transform var(--h-orta) var(--e-yumusak); }
  .geri-baglanti:hover .ok--sol { transform: translateX(-4px); }

  .vaka__meta { margin-bottom: var(--b-2); }
  .vaka__ust .giris-metni { margin-top: var(--b-3); }

  .vaka__gorsel--sema {
    aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--yuvarlak); background: var(--kil);
  }

  .vaka__govde {
    display: grid; grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--b-5); padding-block: var(--b-5);
  }

  .kunye { margin: 0; display: grid; gap: 0.75rem; align-content: start; position: sticky; top: 6rem; }
  .kunye__satir { display: grid; gap: 0.125rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--cizgi); }
  .kunye__deger { margin: 0; font-size: var(--t-kucuk); font-weight: 500; }

  .vaka__metin { display: grid; gap: var(--b-4); }
  .vaka__bolum { display: grid; gap: var(--b-2); }
  .vaka__bolum p { max-width: 62ch; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; text-wrap: pretty; }

  .detaylar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--b-3); margin: 0; padding-top: var(--b-3); border-top: 1px solid var(--cizgi);
  }
  .detay { display: grid; gap: 0.375rem; }
  /* Display fontu başlıklar için; buradaki değerler "5 hafta" gibi kısa da
     olabiliyor "Köşe dolabı döner sepet" gibi cümle de. Ağır uppercase grotesk
     uzun olanı iki satıra kırıp hantallaştırıyordu — gövde fontu ikisini de taşıyor. */
  .detay__deger {
    margin: 0; font-size: 1.0625rem; font-weight: 600;
    line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty;
  }

  .vaka__cagri {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--b-3); padding-block: var(--b-5); border-top: 1px solid var(--cizgi);
  }

  @media (max-width: 900px) {
    .vaka__govde { grid-template-columns: 1fr; gap: var(--b-4); }
    .kunye { position: static; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  }


/* ===== src/pages/showroom/index.astro ===== */
.showroom-giris { padding-block: var(--b-5) var(--b-4); }
  .showroom-giris .etiket { margin-bottom: var(--b-2); }
  .showroom-giris__alt {
    display: flex; flex-wrap: wrap; gap: var(--b-4);
    align-items: flex-end; justify-content: space-between;
    margin-top: var(--b-4); padding-top: var(--b-3);
    border-top: 1px solid var(--cizgi-tema);
  }
  .sayim { display: flex; gap: var(--b-4); margin: 0; }
  .sayim__oge { display: grid; gap: 0.25rem; }
  .sayim__adet {
    margin: 0; font-family: var(--f-display); font-weight: 600;
    font-size: 2.25rem; line-height: 1;
  }
  .showroom-cagri {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--b-3); padding-top: var(--b-5);
  }


/* ===== src/layouts/Metin.astro ===== */
.metin-sayfasi { padding-block: var(--b-5) var(--b-6); }
  .metin-sayfasi__ust { display: grid; gap: var(--b-2); padding-bottom: var(--b-3);
                        border-bottom: 1px solid var(--cizgi); margin-bottom: var(--b-4); }

  .metin-govde { max-width: 68ch; }
  .metin-govde h2 {
    font-family: var(--f-display); font-weight: 600;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    line-height: 1.15; margin-top: var(--b-4); margin-bottom: var(--b-2);
  }
  .metin-govde p { margin-bottom: var(--b-2); text-wrap: pretty; }
  .metin-govde ul { margin: 0 0 var(--b-2); padding-left: 1.25rem; display: grid; gap: 0.5rem; }
  .metin-govde li { padding-left: 0.25rem; }
  .metin-govde a { color: var(--ates); }
  .metin-govde .taslak-uyari {
    border: 1px solid var(--ates); border-left-width: 3px;
    background: var(--kagit); padding: var(--b-2); margin-bottom: var(--b-3);
    font-size: var(--t-kucuk);
  }


/* ===== src/components/BelirenBaslik.astro ===== */
.beliren-baslik { margin: 0; }
  .bb__satir { display: block; }

  .bb__harf {
    display: inline-block;
    white-space: pre;      /* kelime araları korunur */
    opacity: 0.15;         /* referanstaki hayalet değeri */
  }

  @keyframes bb-yan {
    from { opacity: 0.15; }
    to   { opacity: 1; }
  }

  /* --- Açılışta --- */
  @media (prefers-reduced-motion: no-preference) {
    .beliren-baslik--acilis .bb__harf {
      /* Dalga gözle takip edilebilsin diye harf arası gecikme ve süre artırıldı:
         18ms/460ms çok hızlıydı, harfler neredeyse birlikte yanıyordu. */
      animation: bb-yan 620ms cubic-bezier(0.33, 1, 0.68, 1) both;
      animation-delay: calc(var(--bb-sira, 0) * 46ms + 260ms);
    }
  }

  /* --- Kaydırınca --- */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .beliren-baslik--kaydirma .bb__harf {
        animation-name: bb-yan;
        animation-duration: auto;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: var(--bb-cizelge, view());
      }
    }
  }

  /* Destek yoksa ya da hareket azaltılmışsa yazı tam görünür */
  @media (prefers-reduced-motion: reduce) {
    .bb__harf { opacity: 1; }
  }
  @supports not (animation-timeline: view()) {
    .beliren-baslik--kaydirma .bb__harf { opacity: 1; }
  }


/* ===== src/components/Footer.astro ===== */
.dipnot { padding-block: var(--b-6) var(--b-3); border-top: 1px solid var(--cizgi-tema); }

  .dipnot__ust {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: var(--b-4);
    padding-bottom: var(--b-5);
  }
  .dipnot__cagri { margin: 0; }

  .dipnot__ag {
    display: grid; gap: var(--b-4);
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    padding-block: var(--b-4);
  }
  .dipnot__sutun { display: grid; gap: 0.5rem; align-content: start; justify-items: start; }
  .dipnot__sutun .etiket { margin-bottom: 0.5rem; }
  /* E-posta gibi boşluksuz uzun değerler sütundan taşıyordu */
  .dipnot__sutun a { font-size: var(--t-kucuk); overflow-wrap: anywhere; }
  .dipnot__adres {
    font-style: normal; font-size: var(--t-kucuk);
    color: var(--metin-yumusak); white-space: pre-line;
  }

  .dipnot__sosyal {
    display: flex; align-items: center; gap: var(--b-2); flex-wrap: wrap;
    padding-bottom: var(--b-3);
  }
  .sosyal { list-style: none; display: flex; gap: 0.5rem; margin: 0; padding: 0; }
  .sosyal__ba {
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--cizgi-tema); border-radius: 999px;
    color: var(--metin-yumusak); text-decoration: none;
    transition: color var(--h-hizli) var(--e-yumusak),
                border-color var(--h-hizli) var(--e-yumusak),
                transform var(--h-hizli) var(--e-yumusak);
  }
  .sosyal__ba:hover {
    color: var(--vurgu); border-color: var(--vurgu); transform: translateY(-2px);
  }

  .dipnot__alt {
    display: flex; flex-wrap: wrap; gap: var(--b-2);
    justify-content: space-between;
    padding-top: var(--b-3); border-top: 1px solid var(--cizgi-tema);
  }


/* ===== src/components/Kapak.astro ===== */
.kapak__foto, .kapak__cizim {
    width: 100%; height: 100%; object-fit: cover;
    display: block; background: var(--kil);
  }


/* ===== src/components/Kayar.astro ===== */
.kayar {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--kayar-oran);
    border-radius: var(--yuvarlak);
    background: var(--kil);
    /* Zaman çizelgesi ÇERÇEVEYE tanımlanır. Görselin üzerinde doğrudan view()
       kullanılamıyor: buradaki overflow:hidden çerçeveyi bir kaydırma kabı
       yapıyor, view() de en yakın kaydırma kabına bakıyor — görsel o kabın
       içinde hiç kaymadığı için ilerleme %50'de donup kalıyordu. */
    view-timeline-name: --kayar-gorunum;
    view-timeline-axis: block;
  }

  .kayar__gorsel {
    position: absolute;
    left: 0;
    top: -10%;           /* üstte ve altta %10 pay bırakır */
    width: 100%;
    height: 120%;
    object-fit: cover;
    will-change: transform;
  }

  /* --- Asıl yol: CSS scroll-driven animation --- */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .kayar__gorsel {
        /* Kısayol yerine uzun yazım: `animation` kısayolu animation-timeline
           ve animation-range'i sıfırlıyor. */
        animation-name: kayar-suzul;
        animation-duration: auto;      /* scroll-driven'da süreyi timeline verir */
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: --kayar-gorunum;
        /* Çerçeve ekrana girerken başlar, çıkarken biter */
        animation-range: cover 0% cover 100%;
      }
    }
  }

  /* --- Yedek yol: JS --kayma değişkenini sürer (Base.astro) --- */
  .kayar__gorsel[data-js-kayar] {
    transform: translate3d(0, var(--kayma, 0), 0);
  }

  @keyframes kayar-suzul {
    from { transform: translate3d(0, -6.5%, 0); }
    to   { transform: translate3d(0, 6.5%, 0); }
  }


/* ===== src/components/Nav.astro ===== */
.ustbar {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--zemin) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--h-orta) var(--e-yumusak);
  }
  .ustbar[data-kaydi] { border-bottom-color: var(--cizgi-tema); }

  .ustbar__ic {
    max-width: var(--en); margin-inline: auto;
    padding: 1rem var(--kenar);
    display: flex; align-items: center; gap: var(--b-3);
  }

  /* Logo dikey bir kilit; üst barda alt satırı okunmuyordu.
     Monogram ve MASAL kelimesi logodan kesiliyor, "Mobilya & Mutfak"
     ise bu ölçekte okunsun diye site fontuyla yazılıyor. */
  .marka {
    display: flex; align-items: center; gap: 0.7rem;
    text-decoration: none; color: inherit; padding: 0.25rem 0;
    transition: opacity var(--h-hizli) var(--e-yumusak);
  }
  .marka:hover { opacity: 0.72; }
  .marka__monogram { height: 40px; width: auto; }
  /* Logo is siyahı — koyu temada görünmez olurdu */
  :root[data-tema='koyu'] .marka__monogram,
  :root[data-tema='koyu'] .marka__ad { filter: invert(1) brightness(1.85); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema='acik']) .marka__monogram,
    :root:not([data-tema='acik']) .marka__ad { filter: invert(1) brightness(1.85); }
  }
  .marka__kilit { display: grid; gap: 3px; }
  .marka__ad { height: 17px; width: auto; }
  .marka__alt {
    font-family: var(--f-etiket); font-size: 0.625rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.16em; color: var(--is-yumusak);
  }

  @media (max-width: 560px) {
    .marka__monogram { height: 34px; }
    .marka__ad { height: 15px; }
    .marka__alt { font-size: 0.5625rem; letter-spacing: 0.14em; }
  }

  .gezinme { margin-left: auto; display: flex; gap: var(--b-3); }
  .gezinme__ba {
    font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    text-decoration: none; color: var(--metin-yumusak);
    padding: 0.5rem 0; position: relative;
    transition: color var(--h-hizli) var(--e-yumusak);
  }
  .gezinme__ba::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: right;
    transition: transform var(--h-orta) var(--e-yumusak);
  }
  .gezinme__ba:hover, .gezinme__ba--aktif { color: var(--metin); }
  .gezinme__ba:hover::after { transform: scaleX(1); transform-origin: left; }
  .gezinme__ba--aktif::after { transform: scaleX(1); background: var(--vurgu); }

  .ustbar__cta {
    position: relative; overflow: hidden; isolation: isolate;
    font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    text-decoration: none; color: var(--zemin); background: var(--metin);
    padding: 0.75rem 1.375rem; border-radius: var(--yuvarlak-dugme);
    min-height: 44px; display: inline-flex; align-items: center;
    white-space: nowrap;
    transition: background var(--h-orta) var(--e-yumusak),
                box-shadow var(--h-orta) var(--e-yumusak);
  }
  .ustbar__cta::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 25%,
      rgba(255, 214, 170, 0.55) 38%, rgba(168, 226, 255, 0.65) 50%,
      rgba(226, 176, 255, 0.55) 62%, transparent 75%);
    transform: translateX(-130%); opacity: 0;
    transition: none;
  }
  .ustbar__cta:hover::before, .ustbar__cta:focus-visible::before {
    transform: translateX(130%); opacity: 1;
    transition: transform 850ms var(--e-yumusak), opacity var(--h-orta) linear;
  }
  .ustbar__cta:hover {
    background: var(--ates);
    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--ates) 70%, transparent);
  }
  @media (prefers-reduced-motion: reduce) { .ustbar__cta::before { display: none; } }

  /* --- Tema anahtarı --- */
  .tema-anahtari {
    flex-shrink: 0; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 999px;
    transition: background var(--h-hizli) var(--e-yumusak);
  }
  .tema-anahtari:hover { background: var(--zemin-dolgu); }

  .tema-anahtari__yuva {
    display: block; width: 40px; height: 22px; border-radius: 999px;
    border: 1px solid var(--cizgi-tema-koyu);
    background: var(--zemin-kart);
    position: relative;
    transition: background var(--h-orta) var(--e-yumusak),
                border-color var(--h-orta) var(--e-yumusak);
  }

  /* Kayan top: açıkta solda, koyuda sağda */
  .tema-anahtari__top {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 999px;
    background: var(--metin); color: var(--zemin);
    display: grid; place-items: center;
    transition: transform var(--h-orta) var(--e-giris),
                background var(--h-orta) var(--e-yumusak);
  }
  .tema-anahtari[aria-pressed='true'] .tema-anahtari__top { transform: translateX(18px); }

  /* İkonlar topun içinde: biri çıkarken diğeri döner */
  .tema-anahtari__gunes,
  .tema-anahtari__ay {
    position: absolute; width: 10px; height: 10px;
    transition: opacity var(--h-orta) var(--e-yumusak),
                transform var(--h-orta) var(--e-giris);
  }
  .tema-anahtari__gunes { opacity: 1; transform: rotate(0) scale(1); }
  .tema-anahtari__ay { opacity: 0; transform: rotate(-70deg) scale(0.5); }
  .tema-anahtari[aria-pressed='true'] .tema-anahtari__gunes { opacity: 0; transform: rotate(70deg) scale(0.5); }
  .tema-anahtari[aria-pressed='true'] .tema-anahtari__ay { opacity: 1; transform: rotate(0) scale(1); }

  @media (prefers-reduced-motion: reduce) {
    .tema-anahtari__top, .tema-anahtari__gunes, .tema-anahtari__ay { transition-duration: 1ms; }
  }

  /* --- mobil --- */
  .menu-dugmesi {
    display: none; margin-left: auto;
    width: 48px; height: 48px; padding: 0;
    background: none; border: 1px solid var(--cizgi-tema); border-radius: var(--yuvarlak-dugme);
    cursor: pointer; place-content: center; gap: 5px;
  }
  .menu-dugmesi__cizgi {
    display: block; width: 18px; height: 1.5px; background: var(--metin);
    margin-inline: auto;
    transition: transform var(--h-orta) var(--e-yumusak), opacity var(--h-hizli) linear;
  }
  /* :first-child düğmenin ilk çocuğunu arıyordu; orada ekran okuyucu için
     gizli bir span var, çizgi değil. Kural hiç tutmuyor, yalnızca alt çizgi
     dönüyor ve X yerine tek eğik çizgi çıkıyordu. Üst çizgiyi o gizli
     span'in hemen ardından seçiyoruz. */
  .menu-dugmesi[aria-expanded='true'] .gizli-erisim + .menu-dugmesi__cizgi { transform: translateY(3.25px) rotate(45deg); }
  .menu-dugmesi[aria-expanded='true'] .menu-dugmesi__cizgi:last-child      { transform: translateY(-3.25px) rotate(-45deg); }

  .mobil-menu { display: none; }

  @media (max-width: 900px) {
    .gezinme, .ustbar__cta { display: none; }
    .tema-anahtari { margin-left: auto; }
    .menu-dugmesi { display: grid; }

    .mobil-menu {
      display: block;
      border-top: 1px solid var(--cizgi);
      padding: var(--b-3) var(--kenar) var(--b-4);
      background: var(--zemin);
    }
    .mobil-menu[hidden] { display: none; }
    /* 01–04 numaraları kaldırıldı: menüde dört madde var, sıra numarası
       bilgi katmıyor ve yazının önünde gereksiz bir sütun açıyordu. */
    .mobil-menu__no { display: none; }
    .mobil-menu__ba {
      display: flex; align-items: baseline; gap: 1rem;
      /* Başlık fontu (Anek Latin) sitenin her yerinde büyük harfle
         kullanılıyor; burada küçük harfle yazılınca tek başına kalıyor ve
         okunaklılığı düşüyordu. Masaüstü menüsüyle aynı dile getirildi:
         Inter, büyük harf, harf aralıklı — yalnızca puntosu büyük. */
      font-family: var(--f-etiket); font-weight: 600;
      font-size: clamp(1.0625rem, 4.6vw, 1.375rem);
      text-transform: uppercase; letter-spacing: 0.09em;
      line-height: 1.2; text-decoration: none; color: var(--is);
      padding: 0.375rem 0; border-bottom: 1px solid var(--cizgi);
      opacity: 0; transform: translateY(12px);
      animation: menu-gir var(--h-orta) var(--e-giris) forwards;
      animation-delay: var(--gecikme);
    }
    .mobil-menu__no {
      font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
      letter-spacing: 0.12em; color: var(--ates);
    }
    .mobil-menu__cta { margin-top: var(--b-3); width: 100%; justify-content: center; }
  }

  @keyframes menu-gir { to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .mobil-menu__ba { opacity: 1; transform: none; animation: none; }
  }


/* ===== src/components/ProjeListesi.astro ===== */
.proje-listesi { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi-tema); }

  .proje__ic {
    display: grid;
    grid-template-columns: 3.5rem 8rem minmax(0, 1fr) 12rem 2rem;
    align-items: center; gap: var(--b-3);
    padding: var(--b-2) 0;
    border-bottom: 1px solid var(--cizgi-tema);
    text-decoration: none; color: inherit;
    position: relative;
    transition: background var(--h-orta) var(--e-yumusak),
                padding-inline var(--h-orta) var(--e-yumusak);
  }
  .proje__ic--acilabilir { cursor: pointer; }
  .proje__ic--acilabilir:hover {
    background: var(--zemin-kart);
    padding-inline: var(--b-2);
  }

  .proje__no {
    font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
    letter-spacing: 0.12em; color: var(--metin-yumusak);
  }
  .proje__ic--acilabilir:hover .proje__no { color: var(--vurgu); }

  .proje__gorsel {
    display: block; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: var(--yuvarlak); background: var(--cizgi-tema);
  }
  .proje__gorsel img, .proje__gorsel svg {
    transition: transform var(--h-yavas) var(--e-yumusak);
  }
  .proje__ic--acilabilir:hover .proje__gorsel img,
  .proje__ic--acilabilir:hover .proje__gorsel svg { transform: scale(1.04); }

  .proje__govde { display: grid; gap: 0.375rem; min-width: 0; }
  .proje__ad {
    font-family: var(--f-display); font-weight: 600;
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    line-height: 1.05; letter-spacing: -0.01em;
  }
  .proje__ozet {
    font-size: var(--t-kucuk); color: var(--metin-yumusak);
    line-height: 1.5; max-width: 52ch;
  }

  .proje__meta { display: grid; gap: 0.25rem; }
  .proje__meta-satir {
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: var(--t-kucuk); border-bottom: 1px solid var(--cizgi-tema);
    padding-bottom: 0.25rem;
  }
  .proje__meta-satir:last-child { border-bottom: 0; }

  .proje__ok { font-size: 1.25rem; color: var(--metin-yumusak); justify-self: end; }
  .proje__ic--acilabilir:hover .proje__ok { color: var(--vurgu); transform: translateX(4px); }

  @media (max-width: 900px) {
    .proje__ic {
      grid-template-columns: 3rem 1fr;
      grid-template-areas: 'no gorsel' 'govde govde' 'meta meta';
      align-items: start; gap: var(--b-2); padding: var(--b-3) 0;
    }
    .proje__no { grid-area: no; }
    .proje__gorsel { grid-area: gorsel; }
    .proje__govde { grid-area: govde; }
    .proje__meta { grid-area: meta; }
    .proje__ok { display: none; }
    .proje__ic--acilabilir:hover { padding-inline: 0; }
  }


/* ===== src/components/Whatsapp.astro ===== */
.wa {
    position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
    z-index: 90; display: grid; justify-items: end; gap: 0.75rem;
  }

  /* --- Sabit balon --- */
  .wa__dugme {
    position: relative; width: 56px; height: 56px; border-radius: 999px;
    border: 0; cursor: pointer; display: grid; place-items: center;
    background: #25D366; color: #fff;
    box-shadow: 0 10px 26px -10px rgba(37, 211, 102, 0.75);
    transition: transform var(--h-hizli) var(--e-yumusak),
                box-shadow var(--h-hizli) var(--e-yumusak);
  }
  .wa__dugme:hover { transform: translateY(-2px) scale(1.04); }
  .wa__dugme:active { transform: translateY(0) scale(0.98); }

  .wa__logo, .wa__carpi {
    grid-area: 1 / 1;
    transition: opacity var(--h-orta) var(--e-yumusak), transform var(--h-orta) var(--e-giris);
  }
  .wa__carpi { opacity: 0; transform: rotate(-90deg) scale(0.5); }
  .wa__dugme[aria-expanded='true'] .wa__logo { opacity: 0; transform: rotate(90deg) scale(0.5); }
  .wa__dugme[aria-expanded='true'] .wa__carpi { opacity: 1; transform: rotate(0) scale(1); }

  /* --- Sohbet penceresi --- */
  .wa__pencere {
    width: min(330px, calc(100vw - 2rem));
    background: var(--zemin-kart); color: var(--metin);
    border: 1px solid var(--cizgi-tema); border-radius: 14px;
    overflow: hidden; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.55);
    animation: wa-gir 220ms var(--e-giris) both;
  }
  .wa__pencere[hidden] { display: none; }
  @keyframes wa-gir {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  .wa__ust {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.75rem 0.875rem; background: #075E54; color: #fff;
  }
  .wa__avatar {
    width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
    display: grid; place-items: center; background: rgba(255, 255, 255, 0.16);
  }
  .wa__kimlik { display: grid; line-height: 1.25; min-width: 0; }
  .wa__kimlik strong { font-size: 0.875rem; font-weight: 600; }
  .wa__kimlik em { font-style: normal; font-size: 0.6875rem; opacity: 0.85; }
  .wa__kapat {
    margin-left: auto; background: none; border: 0; color: inherit;
    cursor: pointer; padding: 4px; border-radius: 6px; opacity: 0.85;
  }
  .wa__kapat:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }

  .wa__govde { padding: 0.875rem; background: var(--zemin-dolgu); }
  .wa__balon {
    background: var(--zemin-kart); border-radius: 2px 12px 12px 12px;
    padding: 0.625rem 0.75rem; font-size: 0.8125rem; line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); max-width: 92%;
  }

  .wa__form {
    display: flex; align-items: flex-end; gap: 0.5rem;
    padding: 0.625rem; border-top: 1px solid var(--cizgi-tema);
  }
  .wa__girdi {
    flex: 1; min-height: 38px; max-height: 120px; resize: none;
    padding: 0.5rem 0.75rem; font: inherit; font-size: 0.8125rem; line-height: 1.45;
    color: var(--metin); background: var(--zemin);
    border: 1px solid var(--cizgi-tema); border-radius: 999px;
  }
  .wa__girdi:focus-visible { border-color: var(--metin); outline: 2px solid var(--vurgu); outline-offset: 1px; }
  .wa__gonder {
    width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 999px;
    background: #25D366; color: #fff; cursor: pointer; display: grid; place-items: center;
    transition: background var(--h-hizli) var(--e-yumusak);
  }
  .wa__gonder:hover { background: #1EBE5A; }

  @media (prefers-reduced-motion: reduce) {
    .wa__pencere { animation: none; }
    .wa__dugme, .wa__logo, .wa__carpi { transition-duration: 1ms; }
  }