/* Ana sayfa tema bolumu (Noel). Uretici: builder/tema_bolumu.py */
.nl { container-type: inline-size; position: relative; margin-top: 30px; border-radius: 10px; overflow: hidden; background: #0d1f16; color: #ead9b6;
  font-family: 'Cormorant Garamond', Georgia, serif; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.nl h2, .nl .cz { font-family: 'Cinzel', Georgia, serif; }

/* --- sahne --- */
/* arka plan 1942x809 (2.4:1); sahne biraz daha dar tutulup ortadan kirpilir, alttaki kar zemini gorunur kalir */
.nl-sahne { position: relative; aspect-ratio: 2.55 / 1; min-height: 330px; }
.nl-sahne::before { content: ""; position: absolute; inset: 0; background: url("/assets/tema/noel/background.webp") center 55% / cover no-repeat; }
.nl-sahne::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(0deg, #0d1f16, rgba(13,31,22,0)); pointer-events: none; }

/* --- sol yazi alani: parsomen panelin uzerinde --- */
/* yazilar dogrudan arka planin uzerinde durur; o bolge gokyuzu ve karli dag oldugu icin
   koyu yazi okunur, acik bir hale ile kenarlari ayrilir */
.nl-yazi { position: absolute; left: 12%; top: 4%; width: 40%; z-index: 3; text-align: center; color: #2a1a0e; }
.nl-plaka { display: inline-block; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 3px; font-size: clamp(10px, .72cqi, 13px);
  padding: 5px 20px; margin-bottom: 6px; color: #f6e7c4; background: linear-gradient(180deg, #a3261a, #76170f);
  border: 1px solid #c9a227; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
/* baslik: yuksek kontrastli, narin serifli Garamond; govdede derinlik veren degrade,
   kenarda ince altin kontur, altinda sicak isik halesi */
.nl-yazi h2 { margin: 0; line-height: .95; font-weight: 700; }
.nl-b1, .nl-b2 { display: block; font-family: 'Cormorant Garamond', Garamond, Georgia, serif; text-transform: uppercase;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .6px rgba(176,134,44,.65); paint-order: stroke fill; }
.nl-b1 { font-size: clamp(36px, 5.2cqi, 96px); font-weight: 700; letter-spacing: clamp(1px, .14cqi, 4px);
  background-image: linear-gradient(176deg, #c2402c 0%, #9d2416 38%, #7a1409 72%, #5e0f07 100%);
  filter: drop-shadow(0 1px 0 rgba(255,251,240,.95)) drop-shadow(0 3px 16px rgba(255,236,196,.9)) drop-shadow(0 6px 18px rgba(74,12,6,.35)); }
.nl-b2 { font-size: clamp(20px, 2.7cqi, 50px); font-weight: 600; letter-spacing: clamp(5px, .72cqi, 15px); margin-top: -1px;
  background-image: linear-gradient(176deg, #2d5540 0%, #1b3a27 45%, #102418 100%);
  filter: drop-shadow(0 1px 0 rgba(255,251,240,.95)) drop-shadow(0 3px 14px rgba(255,238,200,.85)) drop-shadow(0 5px 14px rgba(8,26,16,.3)); }
/* hazir baslik gorseli (title.webp) kullanildiginda yazi yerine bu gecer */
.nl-baslik { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 16px rgba(40,8,4,.45)); }
.nl-ayrac { display: block; width: 56%; height: auto; margin: 8px auto 4px; filter: drop-shadow(0 2px 6px rgba(255,245,220,.75)); }
.nl-slogan { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-size: clamp(16px, 1.45cqi, 28px); font-style: italic; font-weight: 700;
  margin: 2px 0 0; color: #130d06; text-shadow: 0 0 10px rgba(255,250,238,.95), 0 2px 7px rgba(255,248,232,.95), 0 1px 0 rgba(255,252,244,.9); }
.nl-yazi p.metin { font-size: clamp(12px, .95cqi, 18px); line-height: 1.4; margin: 0 auto; max-width: 470px; color: #33210f; }

/* --- Discover dugmesi: alttaki ilk kartla ayni genislikte ve hizada --- */
.nl-dugme { position: absolute; left: 26px; bottom: 16px; z-index: 4; width: calc((100% - 52px - 5 * 16px) / 6); }
.nl-btn { box-sizing: border-box; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(11px, .8cqi, 15px); letter-spacing: 1.1px; text-transform: uppercase; white-space: nowrap;
  color: #f6e7c4; background: linear-gradient(180deg, #a3261a, #6d150e); border: 1px solid #c9a227; border-radius: 2px;
  padding: 12px 8px; text-decoration: none; transition: box-shadow .3s, color .3s;
  box-shadow: inset 0 0 0 3px rgba(109,21,14,.85), inset 0 0 0 4px rgba(201,162,39,.55), 0 8px 18px rgba(0,0,0,.45); }
.nl-btn:hover { color: #fff6df; box-shadow: inset 0 0 0 3px rgba(109,21,14,.85), inset 0 0 0 4px rgba(236,199,99,.95), 0 0 26px rgba(224,182,74,.45); }
.nl-btn svg { width: 1em; height: 1em; }

/* --- sarkan Noel topu: yazi alaninin sagindaki bos gokyuzunden iner --- */
.nl-top { position: absolute; left: 57%; top: 0; width: clamp(46px, 3.4cqi, 72px); z-index: 4; transform-origin: 50% -140%;
  animation: nl-salla 5.5s ease-in-out infinite; }
.nl-top::before { content: ""; display: block; width: 1px; height: 5.5cqi; margin: 0 auto; background: linear-gradient(rgba(201,162,39,.25), #c9a227); }
.nl-top img { display: block; width: 100%; margin-top: -4px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
@keyframes nl-salla { 0%,100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }

/* --- sahnede gezen Noel Baba kizagi (sleigh.webp) --- */
/* yol, sol ustteki yazi alanindan uzak durur; yon degisince takim ters cevrilir */
.nl-kizak { position: absolute; left: -26%; top: 54%; width: clamp(160px, 17cqi, 340px); z-index: 5; display: block; cursor: pointer;
  animation: nl-ucus 30s linear infinite; }
.nl-yon { display: block; animation: nl-derinlik 30s linear infinite; }
/* arka plan kalabalik oldugu icin takim once koyu bir golge, sonra sicak bir hale ile ayrilir */
.nl-kizak img { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,214,140,.55));
  animation: nl-suzul 3.8s ease-in-out infinite; }
/* iki yonlu tur: once soldan saga yukselerek gecer, ekrandan cikar, EKRAN DISINDA ters cevrilir,
   sonra sagdan sola alcalarak geri gecer. Donus gorunmedigi icin sicrama fark edilmez. */
@keyframes nl-ucus {
  0%    { left: -28%; top: 56%; opacity: 0; }
  3%    { opacity: 1; }
  14%   { left: 10%;  top: 46%; }
  28%   { left: 46%;  top: 30%; }
  41%   { left: 86%;  top: 15%; }
  45%   { opacity: 1; }
  48%   { left: 118%; top: 9%;  opacity: 0; }
  52%   { left: 118%; top: 11%; opacity: 0; }   /* burada ters cevrilir */
  55%   { opacity: 1; }
  66%   { left: 80%;  top: 21%; }
  80%   { left: 40%;  top: 38%; }
  93%   { left: -2%;  top: 52%; }
  96%   { opacity: 1; }
  100%  { left: -28%; top: 56%; opacity: 0; } }
/* yon + derinlik: gidis yonune gore aynalanir, uzaktayken kucuk ve daha yatik durur */
@keyframes nl-derinlik {
  0%    { transform: scaleX(1) rotate(-5deg) scale(.70); }
  28%   { transform: scaleX(1) rotate(-8deg) scale(1.00); }
  48%   { transform: scaleX(1) rotate(-10deg) scale(1.18); }
  52%   { transform: scaleX(-1) rotate(10deg) scale(1.18); }
  72%   { transform: scaleX(-1) rotate(8deg) scale(1.00); }
  100%  { transform: scaleX(-1) rotate(5deg) scale(.70); } }
@keyframes nl-suzul { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* --- kar yagisi: alti kollu kristal tanecikler --- */
.nl-kar { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.nl-kar span { position: absolute; top: -40px; left: var(--x); width: var(--b); height: var(--b); opacity: var(--o);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round'><path d='M12 1.4v21.2M3.1 6.7l17.8 10.6M3.1 17.3L20.9 6.7'/><path d='M12 5.4 9.5 2.9M12 5.4 14.5 2.9M12 18.6 9.5 21.1M12 18.6l2.5 2.5'/><path d='M6.4 8.6 3.1 8.1M6.4 8.6 5.7 5.3M17.6 15.4l3.3.5M17.6 15.4l.7 3.3M6.4 15.4l-3.3.5M6.4 15.4l-.7 3.3M17.6 8.6l3.3-.5M17.6 8.6l.7-3.3'/></svg>") center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.75));
  animation: nl-dus var(--s) linear var(--g) infinite; }
@keyframes nl-dus {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(26px, 360px); }
  100% { transform: translate(0, 720px); } }

/* --- kart izgarasi --- */
.nl-grid-alan { position: relative; padding: 6px 26px 18px; }
.nl .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.nl .card { container-type: inline-size; position: relative; aspect-ratio: 600 / 900; border: 0; border-radius: 0; overflow: visible;
  background: url("/assets/tema/noel/card-frame.webp") center / 100% 100% no-repeat;
  box-shadow: 0 14px 28px rgba(0,0,0,.55); display: flex; flex-direction: column; }
/* cerceve olculeri: ic pencere y %3-65, parsomen %67'de basliyor, altin sus cizgisi %84'te */
.nl .card-media { position: absolute; left: 4.5%; top: 3%; width: 91%; height: 62%; overflow: hidden; background: #0a1a12; }
.nl .card-media img { width: 100%; height: 100%; object-fit: cover; background: #0a1a12; transition: transform .5s, filter .5s; }
.nl .card-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(0,0,0,.5)); }
.nl .card:hover .card-media img { transform: scale(1.05); filter: brightness(1.07) contrast(1.04); }

/* cift altin bant kenarlarda kalin: yazilar %12'den baslar, fiyat cerceveye binmez */
.nl .card-body { position: absolute; left: 12%; right: 12%; top: 67%; bottom: 5.5%; display: block; text-align: center; padding: 0; }
.nl .card-title { height: auto; max-height: 2.4em; margin-top: 1%; display: flex !important; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(10px, 5.2cqi, 15px); line-height: 1.2; color: #2a1a0e; overflow: hidden; }
.nl .card-title.uzun { font-size: clamp(9px, 4.3cqi, 12.5px); }
.nl .card-body .card-cat { position: absolute; left: 0; right: 0; top: 40%; margin: 0; }
.nl .card-cat { display: block; font-size: clamp(8px, 3.8cqi, 11px); letter-spacing: .15em; text-transform: uppercase; color: #6d5330;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* fiyat ve Buy, cercevedeki altin sus cizgisinin altinda kalir */
.nl .card-meta { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.nl .card-price { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(11px, 7cqi, 18px); color: #2a1a0e; }
.nl .card-buy { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(9px, 5.2cqi, 14px); min-height: 0; color: #f6e7c4;
  background: linear-gradient(180deg, #a3261a, #6d150e); border: 1px solid #c9a227; border-radius: 2px; padding: .35em .8em; gap: .35em; }
.nl .card-buy svg { width: 1em; height: 1em; }

/* hediye yigini izgaranin tamamen altinda durur, son satirin kartlarini ortmez */
.nl-hediye { position: absolute; width: 150px; left: -22px; bottom: -126px; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }

/* --- alt serit --- */
.nl-alt { position: relative; padding: 4px 26px 18px; }
.nl-alt img { display: block; width: 100%; height: auto; opacity: .9; }
.nl-alt .satir { display: flex; justify-content: space-between; margin-top: -6px; font-family: 'Cinzel', serif; letter-spacing: 4px;
  font-size: 12px; text-transform: uppercase; color: rgba(222,198,144,.8); }

@media (max-width: 1400px) { .nl .grid { grid-template-columns: repeat(4, 1fr); } .nl-dugme { width: calc((100% - 52px - 3 * 16px) / 4); } }
@media (max-width: 1100px) { .nl .grid { grid-template-columns: repeat(3, 1fr); } .nl-dugme { width: calc((100% - 52px - 2 * 16px) / 3); } }
@media (max-width: 860px) {
  .nl-sahne { aspect-ratio: auto; min-height: 0; padding: 24px 16px 62px; background-position: 70% center; }
  /* telefonda arka plan yazinin altinda koyu kalabiliyor; acik bir zemin okunurlugu garantiler */
  .nl-yazi { position: relative; left: auto; top: auto; width: 100%; padding: 24px 18px 22px;
    background: rgba(246,236,214,.92); border: 1px solid rgba(201,162,39,.6); border-radius: 4px; }
  /* krem zemin uzerinde isik halesine gerek yok, sadece govde degradesi kalir */
  .nl-b1 { filter: drop-shadow(0 2px 5px rgba(94,15,7,.25)); }
  .nl-b2 { filter: drop-shadow(0 2px 4px rgba(16,36,24,.25)); }
  .nl-slogan { text-shadow: none; }
  .nl-ayrac { filter: none; }
  .nl-yazi p.metin { font-size: 13px; line-height: 1.38; max-width: 268px; }
  .nl-top, .nl-kar, .nl-kizak { display: none; }
  .nl-grid-alan { padding: 6px 12px 18px; }
  .nl .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .nl-dugme { left: 12px; width: calc(100% - 24px); }
  .nl-hediye { width: 96px; bottom: -44px; }
  .nl .card-title { font-size: clamp(8.5px, 5.8cqi, 12px); } .nl .card-title.uzun { font-size: clamp(7.5px, 4.8cqi, 10.5px); }
  .nl .card-body .card-cat { display: none; }
  .nl .card-body { bottom: 6.5%; }
  .nl .card-meta { height: 42%; }
  .nl .card-price { font-size: clamp(9px, 6.8cqi, 13px); }
  .nl .card-buy { font-size: clamp(8px, 5.4cqi, 11px); padding: .3em .6em; }
  .nl-alt .satir { font-size: 10px; letter-spacing: 2px; gap: 12px; } }