/* ==========================================================================
   Tüm Tasarımlar sayfası — site.css'in ÜSTÜNE binen katman.
   Renk, yazı tipi, düğme ve üst çubuk site.css'ten geliyor; burada yalnız bu
   sayfaya ait ızgara, araç çubuğu, seçim tepsisi ve büyütme penceresi var.
   Tek `<link>` silinince sayfa çıplak ama okunabilir kalır.
   ========================================================================== */

/* Sayfa başlığı. Bölüm dolgusu ana sayfadakiyle aynı ritimde ama üst çubuğun
   67px'i kadar fazladan pay var; bu sayfada üstte kahraman bölümü yok. */
.tg-bas{padding-top:calc(var(--ust-bosluk) + 46px);padding-bottom:0}
.tg-bas h1{font-size:clamp(2rem,6.4vw,3.6rem);line-height:1.06}
.tg-geri{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--metin-soluk);min-height:32px;
}
.tg-geri svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}
.tg-geri:hover{color:var(--altin-acik)}

/* --------------------------------------------------------------- araç çubuğu
   Yapışkan: kareler bir ekranı fazlasıyla aşıyor, süzgeç yukarıda kalırsa
   kullanıcı filtrelemek için her seferinde başa dönüyor. `top` üst çubuğun
   yüksekliği kadar; ikisi üst üste binmesin. */
.tg-arac{
  position:sticky;top:66px;z-index:30;
  margin-top:34px;padding:14px 0;
  background:rgba(5,5,5,.94);border-bottom:1px solid var(--cizgi-soluk);
}
.tg-arac-ic{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.tg-suz{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.tg-suz button{
  padding:9px 15px;min-height:38px;border:1px solid var(--cizgi);
  background:none;color:var(--metin-soluk);border-radius:2px;
  font-family:var(--govde);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;
  transition:color var(--gecis),border-color var(--gecis),background var(--gecis);
}
.tg-suz button:hover{color:var(--krem);border-color:var(--cizgi)}
.tg-suz button[aria-pressed="true"]{
  color:var(--siyah);background:var(--altin);border-color:var(--altin);
}
.tg-suz button b{font-weight:400;opacity:.6;margin-left:6px}

/* --------------------------------------------------------------- tırnak şekli
   Kategoriden ayrı bir eksen, ayrı satırda ve kendi adıyla duruyor. Görünüm
   dili kategoriyle AYNI; aynı çubukta iki farklı süzgeç dili kafa karıştırır.
   Ayrımı taşıyan şey renk değil KONUM ve başlık: şekil üstte, adıyla.
   Seçili düğme büyümez, yükselmez, gölge almaz. */
.tg-sekil-ic{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid var(--cizgi-soluk);
}
.tg-sekil-bas{
  font-family:var(--govde);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--metin-soluk);flex:0 0 auto;
}
.tg-sekil{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.tg-sekil button{
  padding:9px 15px;min-height:38px;border:1px solid var(--cizgi);
  background:none;color:var(--metin-soluk);border-radius:2px;
  font-family:var(--govde);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;
  transition:color var(--gecis),border-color var(--gecis),background var(--gecis);
}
.tg-sekil button:hover{color:var(--krem);border-color:var(--cizgi)}
.tg-sekil button[aria-pressed="true"]{
  color:var(--siyah);background:var(--altin);border-color:var(--altin);
}

/* Yalnız ekran okuyucuya. display:none etiketi erişilebilirlik ağacından da
   siler; input'un adı kaybolur. */
.tg-gizli{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Arama: 72 kare, ada göre süzmeden bulunmuyor. Ad üzerinden anlık süzme, kaydırarak
   aramaktan çok daha hızlı; klavyeden `/` ile de açılıyor. */
.tg-ara{position:relative;flex:0 0 auto}
.tg-ara input{
  width:min(230px,42vw);padding:10px 34px 10px 34px;min-height:38px;
  background:rgba(255,255,255,.03);border:1px solid var(--cizgi);
  border-radius:2px;color:var(--krem);font-family:var(--govde);
  font-size:.78rem;letter-spacing:.04em;
}
.tg-ara input::placeholder{color:var(--metin-soluk);letter-spacing:.1em;font-size:.7rem}
.tg-ara input:focus{border-color:var(--altin);outline:none;background:rgba(255,255,255,.05)}
.tg-ara svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;fill:none;stroke:var(--metin-soluk);stroke-width:1.4;
  pointer-events:none;
}
.tg-ara-sil{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;
  background:none;border:0;color:var(--metin-soluk);cursor:pointer;font-size:1rem;
}
.tg-ara-sil:hover{color:var(--altin-acik)}

.tg-sayi{
  flex:0 0 auto;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--metin-soluk);white-space:nowrap;
}
.tg-sayi b{color:var(--altin-acik);font-weight:400}

/* --------------------------------------------------------------------- ızgara
   Kareler birebir aynı oranda (1130×1685) üretiliyor; bu yüzden masonry değil
   düzenli ızgara doğru: satırlar hizalanınca göz tasarımları karşılaştırabiliyor.
   Sütun genişliği içerikten geliyor (auto-fill), böylece 390px'te 2, geniş
   ekranda 5 sütun çıkıyor ve ayrı kırılma noktası yazmaya gerek kalmıyor.
   Alt sınır 150px: 390px ekranda `.sar` dolgusu ve boşlukla birlikte tam 2
   sütun sığar (2×150+14 = 314 ≤ 346). 168px denendi, 1 sütuna düşüyordu. */
.tg-izgara{
  display:grid;gap:14px;margin-top:30px;padding-bottom:20px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
@media (min-width:700px){.tg-izgara{gap:18px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}

.tg-kart{
  position:relative;margin:0;background:#070707;
  border:1px solid var(--cizgi-soluk);border-radius:3px;overflow:hidden;
  transition:border-color var(--gecis),transform var(--gecis);
}
.tg-kart:hover{border-color:rgba(201,162,39,.42);transform:translateY(-3px)}
.tg-kart.gizli{display:none}
/* Seçili kart ızgarada da belli olmalı; tepsiye bakmadan görülebilsin. */
.tg-kart.secili{border-color:var(--altin)}
.tg-kart.secili::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--altin);
}

/* Oran küçük karenin KENDİ oranı: ayna_kur.py küçük kareyi 3/4'e sabitliyor.
   Büyük karenin oranı (1130×1684) verilseydi zaten kırpılmış küçük kare bir kez
   daha kırpılıyordu. */
.tg-ac{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  aspect-ratio:3/4;
}
.tg-ac img{width:100%;height:100%;object-fit:cover;display:block}

/* Künye kartın ALTINDA, üstünde değil: üstteki yazı tırnakları kapatıyor ve
   dokunmatikte "üzerine gelince görünen" bilgi hiç görünmüyor. */
.tg-kunye{
  padding:11px 12px 12px;border-top:1px solid var(--cizgi-soluk);
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.tg-ad{
  font-family:var(--ust);font-size:1.02rem;font-weight:400;color:var(--krem);
  line-height:1.15;margin:0;min-width:0;overflow-wrap:anywhere;
}
.tg-kat{
  font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--metin-soluk);white-space:nowrap;flex:0 0 auto;
}

/* Seçim düğmesi. 44px hedef, kartın köşesinde; görselin üstünde durduğu için
   kendi zemini var. */
.tg-sec{
  position:absolute;top:6px;right:6px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(230,205,139,.5);background:rgba(6,5,4,.6);
  color:var(--altin-acik);display:grid;place-items:center;cursor:pointer;
  transition:background var(--gecis),color var(--gecis),border-color var(--gecis);
}
.tg-sec svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.tg-sec:hover{background:rgba(201,162,39,.25);color:var(--krem)}
.tg-sec[aria-pressed="true"]{background:var(--altin);border-color:var(--altin);color:var(--siyah)}

.tg-bos{
  grid-column:1/-1;padding:60px 0;text-align:center;color:var(--metin-soluk);
}
.tg-bos b{display:block;font-family:var(--ust);font-size:1.5rem;color:var(--krem);margin-bottom:8px;font-weight:400}

/* ------------------------------------------------------------- seçim tepsisi
   Sayfanın asıl işi burada bitiyor: müşteri beğendiklerini işaretliyor ve tek
   mesajda gönderiyor. Adları tek tek yazdırmak yerine mesajı biz kuruyoruz,
   böylece uygulayıcıya karışmayan bir liste ulaşıyor. */
.tg-tepsi{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(6,5,5,.96);border-top:1px solid rgba(201,162,39,.35);
  transform:translateY(102%);transition:transform var(--gecis);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
}
.tg-tepsi.acik{transform:none}
.tg-tepsi-ic{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tg-tepsi-say{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--metin-soluk);
  flex:1 1 140px;min-width:0;
}
.tg-tepsi-say b{color:var(--altin-acik);font-weight:400}
.tg-tepsi-kucuk{display:flex;gap:6px;flex:0 0 auto}
.tg-tepsi-kucuk img{
  width:38px;height:38px;object-fit:cover;border-radius:2px;
  border:1px solid var(--cizgi);
}
.tg-tepsi-dg{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.tg-tepsi-dg .dg{margin:0}
.tg-temizle{
  background:none;border:0;color:var(--metin-soluk);cursor:pointer;
  font-family:var(--govde);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 6px;min-height:42px;
}
.tg-temizle:hover{color:var(--krem)}

/* ------------------------------------------------------------ büyütme (ışık kutusu)
   İki tasarım seçiliyse ikisi YAN YANA ve ikisi de TAM gösteriliyor; kare
   ortadan bölünmüyor. */
.tg-buyut{
  position:fixed;inset:0;z-index:90;display:none;
  background:rgba(3,3,3,.96);
  grid-template-rows:auto 1fr auto;
}
.tg-buyut.acik{display:grid}
.tg-b-ust{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--cizgi-soluk);
}
.tg-b-kunye{min-width:0}
.tg-b-kat{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--metin-soluk)}
.tg-b-ad{font-family:var(--ust);font-size:clamp(1.2rem,3.4vw,1.8rem);color:var(--krem);margin:2px 0 0;font-weight:400}
.tg-b-kapat{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--cizgi);background:none;color:var(--metin);
  display:grid;place-items:center;cursor:pointer;
}
.tg-b-kapat svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
.tg-b-kapat:hover{border-color:var(--altin);color:var(--altin-acik)}

.tg-b-orta{
  position:relative;display:grid;place-items:center;min-height:0;padding:16px;
  container-type:size;
}
/* Boy İKİ sınırın küçüğü: alanın yüksekliği ve genişlikten orana göre düşen boy.
   Önce `height:100%;max-width:100%` yazılıydı; `max-width` genişliği kısınca CSS
   yüksekliği kendiliğinden KISMIYOR, `aspect-ratio` sessizce düşüyordu. Mobilde
   kutu 374×684 çıkıyor, her göz 187×684 oluyor ve `cover` elleri kırpıyordu. */
.tg-b-sahne{
  position:relative;width:auto;max-width:100%;
  height:min(100%, calc(100cqw * 1685 / 1130));
  aspect-ratio:1130/1685;
  border:1px solid rgba(201,162,39,.26);border-radius:3px;overflow:hidden;
  background:#070707;
  display:grid;grid-template-columns:1fr;
}
.tg-b-kare{position:relative;overflow:hidden}
.tg-b-kare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Karşılaştırma: TEK kare bölünmüyor, iki tam kare yan yana geliyor.
   Kutunun oranı ikiye katlanıyor (2×1130/1685), böylece her göz tam olarak
   kare oranında kalıyor ve `cover` hiçbir yerden kırpmıyor — tasarımın
   tamamı görünüyor. Aradaki altın saç teli iki baskıyı tek paspartuda tutuyor. */
.tg-b-ikinci{display:none;border-left:1px solid rgba(201,162,39,.26)}
.tg-b-sahne.ikili{
  aspect-ratio:2260/1685;grid-template-columns:1fr 1fr;
  height:min(100%, calc(100cqw * 1685 / 2260));
}
.tg-b-sahne.ikili .tg-b-ikinci{display:block}

.tg-b-ok{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--cizgi);background:rgba(6,5,4,.7);color:var(--metin);
  display:grid;place-items:center;cursor:pointer;
}
.tg-b-ok svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}
.tg-b-ok:hover{border-color:var(--altin);color:var(--altin-acik)}
.tg-b-ok.geri{left:10px}
.tg-b-ok.ileri{right:10px}
.tg-b-ok[hidden]{display:none}

.tg-b-alt{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--cizgi-soluk);
}
.tg-b-sayac{font-size:.6rem;letter-spacing:.18em;color:var(--metin-soluk)}
.tg-b-sayac b{color:var(--altin-acik);font-weight:400}

/* Karşılaştırma künyesi: hangi ad solda, hangisi sağda. */
.tg-b-cift{
  display:none;align-items:center;justify-content:center;gap:10px;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--metin);
}
.tg-buyut.karsi .tg-b-cift{display:inline-flex}
.tg-buyut.karsi .tg-b-sayac,.tg-buyut.karsi .tg-b-kunye{display:none}
.tg-b-cift i{width:14px;height:1px;background:var(--altin);display:inline-block}

body.tg-kilit{overflow:hidden}

@media (max-width:699px){
  .tg-arac{top:66px;padding:11px 0}
  .tg-arac-ic{gap:11px}
  .tg-ara input{width:100%}
  .tg-ara{flex:1 1 130px}
  .tg-sayi{order:3}
  .tg-tepsi-kucuk{display:none}
  .tg-b-orta{padding:8px}
  .tg-b-ok{width:40px;height:40px}
  /* Dokunma hedefi eşiği: masaüstünde 36px yeterli, parmakla değil. */
  .tg-sec{width:44px;height:44px}
  .tg-sec svg{width:18px;height:18px}
}

@media (prefers-reduced-motion:reduce){
  .tg-kart,.tg-tepsi,.tg-sec{transition:none}
  .tg-kart:hover{transform:none}
}