@charset "UTF-8";
/* ==========================================================================
   serviyet.com — ÖLÇÜ ETİKETİ + FİLİGRAN (görsel üstü katman)
   public/css/olcu-etiket.css

   NE İŞE YARAR
   160 ürün aynı şablon görselle görünüyor. Bu katman ölçüyü fotoğrafın
   üstüne basarak kartları birbirinden ayırt edilebilir kılar.

   NEDEN CSS, NEDEN GD DEĞİL
   Sunucuda 160 ayrı görsel üretmek yerine katman kullanıyoruz:
     - ölçü panelden değişince etiket kendiliğinden güncellenir
     - üretilen dosyaların cache/temizlik derdi yok
     - retina ekranda keskin kalır (raster değil, metin)

   İKİ YOĞUNLUK
     .olc-katman--sade → ürün kartı
     .olc-katman--tam  → ürün detayı (daha büyük punto)
   Artık ikisi de sadece üst başlığı basıyor; kenar ok/ölçüleri kaldırıldı.

   Önek: "olc-"
   ========================================================================== */

:root {
  --olc-koyu:  #33505C;   /* etiket metin rengi */

  /* Üstteki "30×45" başlığının tepeden boşluğu.
     Büyütürsen aşağı iner, küçültürsen yukarı çıkar. */
  --olc-baslik-ust: 9%;

  /* ====================================================================
     FİLİGRAN ŞEFFAFLIĞI — BURADAN AYARLANIR
     0 = tamamen görünmez, 1 = tam koyu.
     ==================================================================== */
  --olc-filigran-solukluk: .25;

  /* Filigran eğimi. -45deg sol alttan sağ üste. 0 yaparsan düz yatay. */
  --olc-filigran-aci: -45deg;
}

/* --------------------------------------------------------------------------
   KATMAN
   inset:0 → kapsayıcıyı tam kaplar. Kapsayıcı .ukart-resim / .urn-galeri-ana
   zaten position:relative; ek düzenleme gerekmez.
   pointer-events:none → alttaki link/zoom tıklamaları engellenmez.
   -------------------------------------------------------------------------- */
.olc-katman {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--olc-koyu);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   ÜST BAŞLIK — "30×45"

   TİPOGRAFİ NOTU: Bu tek eleman Cormorant Garamond kullanır — projedeki
   "Cormorant SADECE logo" kuralına bilinçli istisna. Gerekçe: referans
   görseldeki ince/geniş serif görünüm. Syne'a dönmek istersen aşağıdaki
   font-family satırını var(--srv-font-baslik) yapıp font-weight'i 700 yap.
   Font header.php'de zaten yüklü (600 ve 800 ağırlıkları).
   -------------------------------------------------------------------------- */
.olc-baslik {
  position: absolute;
  top: var(--olc-baslik-ust);
  left: 50%;
  transform: translateX(-50%);

  display: inline-block;
  width: max-content;
  padding: 8px 18px;

  border: 2px solid #111;
  box-sizing: border-box;

  background-color: #fff;   /* Beyaz zemin */
  border: 2px solid #111;   /* Siyah çerçeve */
  border-radius: 3px;       /* İsteğe bağlı */


  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .03em;
}
/* --------------------------------------------------------------------------
   FİLİGRAN — görselin üstünde çapraz (sol alt → sağ üst)
   Ölçü katmanının İÇİNDE DEĞİL: gerçek ürün fotoğrafı yüklendiğinde de
   basılsın diye doğrudan görsel kapsayıcısına konumlanır.
   -------------------------------------------------------------------------- */
.olc-filigran {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--olc-filigran-aci));
  transform-origin: center;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  font-family: var(--srv-font-govde);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--olc-koyu);
  opacity: var(--olc-filigran-solukluk);
}

/* Ürün kartında gizli — 186px'lik kutuda çapraz yazı görseli boğuyor.
   Kartlarda da istersen SADECE bu kuralı sil. */
.ukart-resim .olc-filigran { display: none; }

/* --------------------------------------------------------------------------
   DUYARLI
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .olc-katman--tam .olc-baslik { font-size: 36px; }
}

@media (max-width: 900px) {
  .olc-katman--sade .olc-baslik { font-size: 18px; }
  .olc-katman--tam  .olc-baslik { font-size: 32px; }
  .olc-filigran { font-size: 17px; }
}

@media (max-width: 576px) {
  .olc-katman--sade .olc-baslik { font-size: 16px; }
  .olc-katman--tam  .olc-baslik { font-size: 27px; }
  .olc-filigran { font-size: 14px; letter-spacing: .1em; }
}

/* Yazdırmada katman gereksiz */
@media print {
  .olc-katman, .olc-filigran { display: none; }
}