/* ==========================================================================
   VV TABLO — USTALIK SERİSİ  (2026-09-04)
   --------------------------------------------------------------------------
   Serinin dili: her koleksiyonun kendi karakteri var; ortak başlık,
   altbilgi, eser ızgarası ve eser modalı DEĞİŞMİYOR.

     Eğlenceli      koyu mürekkep + neon + bantlı çıkartma  → şen
     Kids           gün ışığı + pastel + kemerli pencere    → masalsı
     Doğa & Yaşam   gece siyahı + altın saat + boşluk       → dingin
     Kültür & Miras sinema perdesi + yer künyesi            → görkemli
     İmza Serisi    gece laciverti + altın imza + plaka     → törensel
     İkonlar        grafit galeri duvarı + müze künyesi     → müzesel
     Modern Sanat   mürekkep zemin + varak altın            → atölye
     Maneviyat      gece mavisi + nur                       → sükûnet
     Motor & Tutku  asfalt grisi + krom                     → showroom
     Mutfak         koyu meşe + bakır                       → sofra
     USTALIK SERİSİ İS SİYAHI + TEK IŞIK HUZMESİ + PİRİNÇ   → atölye sabahı

   TASARIMIN DAYANDIĞI VERİ
   Bu koleksiyonun diğerlerinden tek farkı var: alıcı bir TÜKETİCİ değil,
   İŞLETME SAHİBİ. Eserler temaya göre değil MESLEĞE göre bölünmüş
   (12 alt koleksiyon: diş kliniği, klinik, eczane, lokanta, kafe, berber,
   hukuk, otel, metal-kaynak, otomotiv servis, ahşap, tekstil). Yani sayfaya
   gelen kişi "hangi tema hoşuma gider" diye değil "benim mesleğim hangisi"
   diye bakıyor. Bu yüzden hero'nun işi bir manzara göstermek değil,
   ZİYARETÇİYİ KENDİ MESLEĞİNE GÖTÜRMEK: meslek seçici hero'nun kendisidir.

   Zemin is siyahı: 12 sektörün 12'sinde de eserin ortak imzası TEK YÖNLÜ
   IŞIK (sol üstten düşen huzme) ve o huzmede asılı kalan zerre — un tozu,
   ahşap talaşı, kaynak kıvılcımı, kahve buharı. Açık zemin bu ışığı
   öldürürdü; koyu zemin huzmeyi sayfanın kendisine taşıyor.

   .us-huzme: hero'nun sol üstünden geçen ışık huzmesi (eserlerin ortak
   dili). .us-zerre: huzmede asılı toz. İkisi de saf CSS — görsel yok,
   sayfa ağırlaşmıyor.
   ========================================================================== */

.us{
  /* Gövde zemini de koyu: collection-page.css body'ye krem veriyor ve koyu
     bölümlerin (hero, ızgara, güvence) arasında açık şerit kalıyordu. */
  background:#15100C;

  --us-is:#15100C;        /* is siyahı — sayfa zemini */
  --us-derin:#0E0A07;     /* dip */
  --us-tezgah:#241C15;    /* tezgah kahvesi — kutu zeminleri */
  --us-pirinc:#C39A5A;    /* pirinç — vurgu */
  --us-isik:#F3E4C6;      /* huzme ışığı */
  --us-tebesir:#EFE8DC;   /* metin */
  --us-sis:rgba(239,232,220,.62);
}

/* ---------- HERO ---------- */
.us-hero{
  position:relative;
  padding:74px 0 0;
  background:var(--us-is);
  overflow:hidden;
  isolation:isolate;
}
/* TEK IŞIK HUZMESİ — sol üstten çapraz düşer, dip karanlıkta kaybolur.
   Eserlerin ortak görsel imzası; sayfanın kendisi de aynı ışığı taşır. */
.us-hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(122deg, rgba(243,228,198,.16) 0%, rgba(243,228,198,.05) 26%, transparent 46%),
    radial-gradient(46% 52% at 22% 8%, rgba(243,228,198,.20), transparent 70%),
    radial-gradient(92% 78% at 50% 116%, rgba(14,10,7,.96), transparent 62%);
}
/* Huzmede asılı zerre. */
.us-hero::after{
  content:"";
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(243,228,198,.85), transparent),
    radial-gradient(1.2px 1.2px at 27% 41%, rgba(243,228,198,.7), transparent),
    radial-gradient(1.8px 1.8px at 12% 58%, rgba(243,228,198,.55), transparent),
    radial-gradient(1.1px 1.1px at 34% 16%, rgba(243,228,198,.6), transparent),
    radial-gradient(1.4px 1.4px at 41% 63%, rgba(243,228,198,.45), transparent),
    radial-gradient(1.2px 1.2px at 8% 34%, rgba(243,228,198,.5), transparent);
}
@media (prefers-reduced-motion: no-preference){
  .us-hero::after{ animation:us-toz 26s ease-in-out infinite alternate; }
}
@keyframes us-toz{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(14px,-18px,0); } }

.us-hero-shell{
  position:relative; z-index:1;
  max-width:1440px; margin:0 auto;
  padding:44px 24px 52px;
  display:grid; gap:30px;
}
@media(min-width:1024px){
  .us-hero-shell{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; padding:64px 24px 64px; }
}

.us-kicker{
  display:inline-block;
  font:500 11px/1 'Inter',sans-serif;
  letter-spacing:.30em; text-transform:uppercase;
  color:var(--us-pirinc);
  padding-bottom:14px;
}
.us-baslik{
  margin:0 0 18px;
  color:var(--us-tebesir);
  font-size:clamp(34px,5.4vw,60px);
  line-height:1.04;
  font-weight:400;
  letter-spacing:-.01em;
}
.us-giris{
  margin:0;
  max-width:52ch;
  color:var(--us-sis);
  font:300 clamp(15px,1.5vw,17px)/1.72 'Inter',sans-serif;
}
.us-giris strong{ color:var(--us-tebesir); font-weight:500; }

/* Alt satır: ürünün işletmeye vaadi. Süs değil, satın alma gerekçesi. */
.us-vaat{
  list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 22px;
}
.us-vaat li{
  position:relative; padding-left:16px;
  font:400 12px/1.5 'Inter',sans-serif;
  letter-spacing:.03em;
  color:var(--us-sis);
}
.us-vaat li::before{
  content:""; position:absolute; left:0; top:7px;
  width:5px; height:5px; background:var(--us-pirinc); transform:rotate(45deg);
}

/* ---------- MESLEK SEÇİCİ (hero'nun sağ yarısı) ----------
   Bu koleksiyonun ana gezinme aracı. İçerik SABİT DEĞİL: ızgara kurulduktan
   sonra sayfadaki bölümlerden okunur (bkz. index.html sonundaki betik), yani
   panelden alt koleksiyon eklenince kendiliğinden büyür. Eser girmemiş
   meslekler "yakında" olarak sönük görünür — kutu asla boş kalmaz. */
.us-secici{ position:relative; }
.us-secici h2{
  margin:0 0 14px;
  font:500 11px/1 'Inter',sans-serif;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--us-pirinc);
}
.us-meslekler{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:600px){ .us-meslekler{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.us-meslek{
  display:flex; flex-direction:column; gap:4px;
  min-height:74px; padding:13px 14px;
  background:linear-gradient(160deg, rgba(36,28,21,.92), rgba(21,16,12,.92));
  border:1px solid rgba(195,154,90,.22);
  color:var(--us-tebesir);
  text-decoration:none;
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.us-meslek:hover,
.us-meslek:focus-visible{
  border-color:rgba(195,154,90,.75);
  background:linear-gradient(160deg, rgba(48,37,27,.96), rgba(28,21,15,.96));
  transform:translateY(-2px);
}
.us-meslek-ad{
  font:400 13.5px/1.28 'Fraunces',serif;
  letter-spacing:.005em;
}
.us-meslek-sayi{
  font:400 10.5px/1 'Inter',sans-serif;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--us-pirinc);
}
.us-meslek.bos{ opacity:.42; pointer-events:none; }
.us-meslek.bos .us-meslek-sayi{ color:var(--us-sis); }

/* ---------- AYIRICI ---------- */
.us-cizgi{
  border:0; height:1px; margin:0;
  background:linear-gradient(90deg, transparent, rgba(195,154,90,.4), transparent);
}

/* ---------- IZGARA ZEMİNİ ----------
   Eser ızgarası ortak collection-page.css'ten gelir; yalnız zemini ve
   bölüm başlıklarını bu koleksiyonun diline çekiyoruz. */
.us #personSections{ background:var(--us-is); padding-top:8px; }
.us #personSections .person-head h2{ color:var(--us-tebesir); }
.us #personSections .person-head p,
.us #personSections .person-head .order{ color:var(--us-sis); }
.us #personSections .catalog-state h2{ color:var(--us-tebesir); }

/* ---------- GÜVENCE ŞERİDİ ---------- */
.us-guvence{
  list-style:none; margin:0; padding:44px 24px 52px;
  max-width:1440px; margin-inline:auto;
  display:grid; gap:22px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--us-is);
}
@media(min-width:900px){ .us-guvence{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.us-guvence h3{
  margin:0 0 5px;
  font:500 12px/1 'Inter',sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-pirinc);
}
.us-guvence p{ margin:0; font:300 13px/1.6 'Inter',sans-serif; color:var(--us-sis); }

/* ---------- ALT AÇIKLAMA ---------- */
.us .disclaimer{ background:var(--us-derin); }
.us .disclaimer p{ color:var(--us-sis); }

/* ---------- KOYU ZEMİNDE OKUNABİLİRLİK (2026-09-05) ----------
   Sayfaya koyu kimlik verilirken ortak bileşenlerin AÇIK ZEMİN varsayımı
   gözden kaçtı ve canlıda üç yer okunmaz hâle geldi (ölçüldü, kontrast 1.0):
     1. .person.tint — collection-page.css dönüşümlü bölümlere krem zemin
        (#F1F1EE) veriyor; başlık ve açıklama ise bu sayfada krem. 12 meslek
        bölümünün 6'sı krem üstüne krem yazıyordu.
     2. footer.site — altbilginin kendi zemini YOK, krem gövdeden geliyordu.
        Gövde koyu olunca koyu yazı koyu zeminde kaldı.
     3. .orientation-chip — pasif süzgeç düğmeleri koyu gri (#4C4944).
   Çözüm sayfa kapsamında (.us) tutulur; ortak dosyalara dokunulmaz. */
.us .person.tint{ background:rgba(255,255,255,.035); }

.us footer.site{ background:var(--us-derin); border-top:1px solid rgba(239,232,220,.12); }
.us footer.site,
.us footer.site .footer-brand .name,
.us footer.site li{ color:var(--us-tebesir); }
.us footer.site a{ color:var(--us-sis); }
.us footer.site a:hover,
.us footer.site a:focus-visible{ color:var(--us-isik); }
.us footer.site h3,
.us footer.site .footer-brand .links,
.us footer.site small,
.us footer.site .footer-bottom{ color:var(--us-sis); }

.us .orientation-chip{ color:var(--us-sis); border-color:rgba(239,232,220,.22); }
.us .orientation-chip:hover,
.us .orientation-chip:focus-visible{ color:var(--us-tebesir); border-color:rgba(195,154,90,.5); }