/* Arka plan grafikleri — markadaki dünya: devre ızgarası, takımyıldız, ince altın
   geometri, zemin yansıması. Hepsi CSS/veri-URI; dış kaynak yok (CSP 'self').
   Süsleme katmanları daima aria-hidden ve pointer-events:none. */

/* ---- Gövde zemini: üç katman (ızgara + iki altın ışıma + vinyet) ---- */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    /* ince devre ızgarası */
    linear-gradient(rgb(var(--cizgi) / .035) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgb(var(--cizgi) / .035) 1px, transparent 1px) 0 0 / 56px 100%,
    /* köşelerden sızan altın ışık */
    radial-gradient(120% 80% at 8% -10%, rgb(var(--vurgu) / .13), transparent 55%),
    radial-gradient(100% 70% at 100% 0%, rgb(var(--vurgu) / .07), transparent 50%),
    radial-gradient(140% 100% at 50% 115%, rgb(var(--altin-derin) / .12), transparent 60%),
    rgb(var(--bg));
}
/* Takımyıldız: seyrek altın noktalar, çok yavaş süzülür. */
body::after {
  content: ''; position: fixed; inset: -10% -10% -10% -10%; z-index: -1; pointer-events: none;
  opacity: .42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23d4af4f'%3E%3Ccircle cx='34' cy='52' r='1.3'/%3E%3Ccircle cx='186' cy='24' r='.9'/%3E%3Ccircle cx='322' cy='92' r='1.4'/%3E%3Ccircle cx='118' cy='158' r='.9'/%3E%3Ccircle cx='392' cy='196' r='1.1'/%3E%3Ccircle cx='52' cy='254' r='1.3'/%3E%3Ccircle cx='242' cy='232' r='.9'/%3E%3Ccircle cx='356' cy='306' r='1.2'/%3E%3Ccircle cx='148' cy='356' r='1'/%3E%3Ccircle cx='282' cy='392' r='1.3'/%3E%3Ccircle cx='10' cy='378' r='.9'/%3E%3C/g%3E%3Cg stroke='%23d4af4f' stroke-width='.4' opacity='.22' fill='none'%3E%3Cpath d='M34 52 186 24'/%3E%3Cpath d='M118 158 52 254'/%3E%3Cpath d='M356 306 282 392'/%3E%3C/g%3E%3C/svg%3E");
  animation: suzul 180s linear infinite;
}
:root[data-theme="light"] body::before {
  background:
    linear-gradient(rgb(var(--cizgi) / .05) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgb(var(--cizgi) / .05) 1px, transparent 1px) 0 0 / 56px 100%,
    radial-gradient(120% 80% at 8% -10%, rgb(var(--vurgu) / .10), transparent 55%),
    radial-gradient(140% 100% at 50% 115%, rgb(var(--vurgu) / .07), transparent 60%),
    rgb(var(--bg));
}
:root[data-theme="light"] body::after { opacity: .18; }
@keyframes suzul { to { transform: translate3d(-420px, -420px, 0); } }

/* ---- Art deco köşe parantezleri ---- */
/* Kartın dört köşesine ince altın "L". Markadaki çerçeve dilinin küçük hâli. */
.deco { position: relative; }
.deco::before, .deco::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1px solid rgb(var(--vurgu) / .55); opacity: .8; transition: opacity var(--gecis);
}
.deco::before { inset-block-start: 7px; inset-inline-start: 7px; border-width: 1px 0 0 1px; }
.deco::after { inset-block-end: 7px; inset-inline-end: 7px; border-width: 0 1px 1px 0; }
.deco--dort { }
.deco--dort > .deco__kose { position: absolute; width: 14px; height: 14px; border: 1px solid rgb(var(--vurgu) / .55); pointer-events: none; }
.deco--dort > .deco__kose:nth-child(1) { inset-block-start: 7px; inset-inline-end: 7px; border-width: 1px 1px 0 0; }
.deco--dort > .deco__kose:nth-child(2) { inset-block-end: 7px; inset-inline-start: 7px; border-width: 0 0 1px 1px; }

/* ---- Altın hairline ayraç ---- */
.hat { height: 1px; border: 0; margin-block: var(--b-5); background: var(--altin-hat); }
.hat--kisa { max-width: 160px; }

/* ---- Deco etiket: küçük, büyük harf, geniş aralık, iki yanında çizgi ---- */
.deco-etiket {
  display: flex; align-items: center; gap: var(--b-3);
  font-size: var(--f-xs); font-weight: 700; letter-spacing: var(--deco-aralik);
  text-transform: uppercase; color: rgb(var(--vurgu));
}
.deco-etiket::before, .deco-etiket::after { content: ''; height: 1px; flex: 1; background: var(--altin-hat); }
.deco-etiket--sol::before { display: none; }
.deco-etiket--sol::after { flex: 1; }

/* ---- Ufuk: hero alanlarında zemin ızgarası + yansıma (rozetteki taban) ---- */
.ufuk { position: relative; overflow: hidden; }
.ufuk__zemin {
  position: absolute; inset-inline: -20%; inset-block-end: 0; height: 30%; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgb(var(--cizgi) / .16) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(rgb(var(--cizgi) / .13) 0 1px, transparent 1px 40px),
    linear-gradient(rgb(var(--vurgu) / .08), transparent 70%);
  transform: perspective(340px) rotateX(62deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(transparent, #000 30%, transparent 92%);
  opacity: .4;
}
/* Ufuk çizgisi: keskin altın hat. */
.ufuk__cizgi { position: absolute; inset-inline: 50%; inset-block-end: 30%; width: min(420px, 60%); translate: -50% 0; height: 1px; background: var(--altin-hat); opacity: .5; pointer-events: none; z-index: 0; }
/* Hero içeriği zeminin üstünde kalır. */
.ufuk > *:not(.ufuk__zemin):not(.ufuk__cizgi) { position: relative; z-index: 1; }

/* ---- Devre deseni: F harfindeki hat/pad dili. Panel zeminlerinde. ---- */
.devre {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23d4af4f' stroke-width='.9' opacity='.5'%3E%3Cpath d='M20 0v34a8 8 0 0 0 8 8h30M90 0v18M150 0v52h-28'/%3E%3Cpath d='M0 70h44a8 8 0 0 1 8 8v40M180 96h-36a8 8 0 0 0-8 8v40M20 180v-36a8 8 0 0 1 8-8h26'/%3E%3Ccircle cx='58' cy='42' r='3.2'/%3E%3Ccircle cx='122' cy='52' r='3.2'/%3E%3Ccircle cx='52' cy='118' r='3.2'/%3E%3Ccircle cx='136' cy='144' r='3.2'/%3E%3Ccircle cx='54' cy='136' r='3.2'/%3E%3Ccircle cx='90' cy='18' r='3.2'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* Süsleme katmanı olarak kullanımı: kartın içinde soluk, kırpılmış. */
.devre-kat {
  position: absolute; inset: 0; pointer-events: none; opacity: .16;
  mask-image: radial-gradient(120% 100% at 100% 0%, #000 10%, transparent 68%);
}
:root[data-theme="light"] .devre-kat { opacity: .12; }

/* ---- Takımyıldız katmanı: Y harfindeki üçgen ağ. Boş durum ve hero'larda. ---- */
.takim-kat {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1;
  mask-image: radial-gradient(120% 90% at 50% 50%, #000, transparent 72%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none'%3E%3Cg stroke='%23d4af4f' stroke-width='.7' opacity='.7'%3E%3Cpath d='M30 44 96 20 168 62 128 130 46 118Z'/%3E%3Cpath d='M96 20 128 130M30 44 128 130M168 62 46 118'/%3E%3Cpath d='M46 118 70 196 150 178 128 130'/%3E%3C/g%3E%3Cg fill='%23eccd8b'%3E%3Ccircle cx='30' cy='44' r='2.4'/%3E%3Ccircle cx='96' cy='20' r='2'/%3E%3Ccircle cx='168' cy='62' r='2.6'/%3E%3Ccircle cx='128' cy='130' r='2.2'/%3E%3Ccircle cx='46' cy='118' r='2.4'/%3E%3Ccircle cx='70' cy='196' r='2'/%3E%3Ccircle cx='150' cy='178' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ---- Altın kenarlı cam panel: ana kart yüzeyi ---- */
.cam {
  background:
    linear-gradient(rgb(var(--yuzey) / .96), rgb(var(--yuzey) / .88)),
    radial-gradient(120% 120% at 0% 0%, rgb(var(--vurgu) / .07), transparent 55%);
  border: 1px solid rgb(var(--cizgi) / .16);
  box-shadow: var(--golge-2), inset 0 1px 0 rgb(var(--vurgu) / .10);
  backdrop-filter: blur(10px) saturate(1.2);
}

/* ---- Parlama sweep: üstten geçen ince altın ışık (hover/yükleniyor) ---- */
.sweep { position: relative; overflow: hidden; }
.sweep::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgb(var(--vurgu-2) / .16), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.sweep:hover::after { animation: sweepGec 900ms ease-out; }
@keyframes sweepGec { 0% { inset-inline-start: -60%; opacity: 1; } 100% { inset-inline-start: 120%; opacity: 0; } }

/* ---- Grain: çok hafif doku, düz siyahın "ucuz" görünmesini engeller ---- */
.grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}