/* Lona Energy */

:root {
  --altin: #efcd5d;
  --altin-golge: rgba(239, 205, 93, 0.45);
  --led-kenar: #fff3dc;
  --dugme-metin: #06140c;
  --sari-acik: #6fd096;
  --cizgi-guclu: rgba(214, 224, 245, 0.22);
  --sonuk-1: #4a5368; /* yanmadan önceki soluk başlık rengi */
  --sonuk-2: #6a7388;
  --adim-1: #333b4f; /* sipariş adımları yanmadan önce */
  --adim-2: #3a4256;
  --adim-3: #2c3345;
  --logo-kutu: #222c48;
  --harita-suzgec: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(0.95);
  --led: 0 0 6px 1px rgba(255, 236, 200, 0.7), 0 0 22px 3px rgba(255, 214, 150, 0.26), inset 0 0 10px rgba(255, 228, 180, 0.22);
  --gece: #0a0f1c;
  --gece-2: #0f1628;
  --yuzey: #151d33;
  --cizgi: rgba(214, 224, 245, 0.13);
  --metin: #eef1f6;
  --soluk: #9aa4b8;
  --sari: #4dbe7d; /* Lona Energy logosundaki yeşil (değişken adı eski) */
  --turuncu: #e8704a;
  --lacivert: #1f2a4f;
  --isik: #fff3dc;
  --k3000: #ffae55;
  --k4000: #ffe6bd;
  --k6500: #c6dbff;
  /* Animasyon hızları (yönetim panelinden değiştirilebilir) */
  --hiz-giris: 2.2s;
  --hiz-kart: 0.85s;
  --hiz-serit: 2.6s;
  --hiz-tanitim: 0.25s;
  --hiz-serit-tekrar: 9s;
  --hiz-logolar: 17s;
  --hiz-projeler: 54s;
  --hiz-sayfa: 0.32s;

  --baslik: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --govde: "Archivo", system-ui, sans-serif;

  --kenar: clamp(16px, 4vw, 56px);
  --genislik: 1320px;
  --ust-boy: 72px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-boy) + 20px); -webkit-text-size-adjust: 100%; }
/* Sayfalar arası yumuşak geçiş: üst menü yerinde kalır, içerik hafifçe kayarak belirir */
@view-transition { navigation: auto; }
.ust { view-transition-name: ust; }
::view-transition-old(root) { animation: calc(var(--hiz-sayfa) * 0.55) ease-in both sayfa-cik; }
::view-transition-new(root) { animation: var(--hiz-sayfa) cubic-bezier(0.2, 0.7, 0.2, 1) both sayfa-gir; }
@keyframes sayfa-cik { to { opacity: 0; } }
@keyframes sayfa-gir { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
body {
  margin: 0;
  background: var(--gece);
  color: var(--metin);
  font: 400 1.0625rem/1.6 var(--govde);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--baslik); font-weight: 800; line-height: 0.95; letter-spacing: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a, button, input, select, textarea { touch-action: manipulation; }
::selection { background: var(--sari); color: var(--dugme-metin); }
:focus-visible { outline: 2px solid var(--sari); outline-offset: 3px; }
svg { flex: none; }

.atla { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--sari); color: var(--gece); }
.atla:focus { top: 12px; }

/* ---------- düğmeler ---------- */

.dugme {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 48px; padding: 0.75em 1.35em;
  background: var(--sari); color: var(--dugme-metin);
  border: 1px solid var(--sari); border-radius: 3px;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: background-color 0.2s, border-color 0.3s, color 0.2s, box-shadow 0.3s ease;
}
.dugme svg { width: 1.2em; height: 1.2em; }
/* Butonların üzerine gelince kenarında ince gün ışığı LED yanar */
.dugme:hover { background: var(--sari-acik); border-color: var(--led-kenar); box-shadow: var(--led); }
.dugme-cizgi { background: transparent; color: var(--metin); border-color: color-mix(in srgb, var(--metin) 35%, transparent); }
.dugme-cizgi:hover { background: color-mix(in srgb, var(--metin) 6%, transparent); border-color: var(--led-kenar); box-shadow: var(--led); }
.dugme-kucuk { min-height: 40px; padding: 0.5em 1em; font-size: 0.9rem; }

.bag { display: inline-flex; align-items: center; gap: 0.4em; color: var(--sari); font-weight: 600; text-decoration: none; }
.bag svg { width: 1.1em; height: 1.1em; transition: transform 0.2s; }
.bag:hover svg { transform: translateX(3px); }

/* ---------- logo ---------- */

.logo { flex: none; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
/* Lona Energy logosu: yeşil işaret + beyaz yazı (görseller) */
.logo-isaret { width: auto; height: 38px; }
.logo-yazi { width: auto; height: 23px; }
/* Açık renk temalarında logo yazısı beyaz logonun biçimiyle, yazı renginde gösterilir */
.logo-koyu {
  display: none; aspect-ratio: 851 / 240; background: var(--metin);
  -webkit-mask: url(../img/lona-yazi.png) center / contain no-repeat; mask: url(../img/lona-yazi.png) center / contain no-repeat;
}
:root:is([data-renk="bej"], [data-renk="orman"]) .logo-acik { display: none; }
:root:is([data-renk="bej"], [data-renk="orman"]) .logo-koyu { display: block; }

/* ---------- renk seçenekleri (logonun yanında) ---------- */

.renk-sec { position: relative; margin-left: -12px; }
.renk-ac {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px 0 10px;
  background: transparent; color: var(--soluk); cursor: pointer;
  border: 1px solid var(--cizgi-guclu); border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  transition: color 0.2s, border-color 0.3s, box-shadow 0.3s ease;
}
.renk-ac svg { width: 18px; height: 18px; }
.renk-ac:hover, .renk-ac[aria-expanded="true"] { color: var(--metin); border-color: var(--led-kenar); box-shadow: var(--led); }
.renk-panel {
  position: absolute; z-index: 60; top: calc(100% + 12px); left: 0; width: 300px;
  padding: 14px 8px 8px; background: var(--gece-2); color: var(--metin);
  border: 1px solid var(--cizgi-guclu); border-radius: 8px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}
.renk-panel[hidden] { display: none; }
/* Yönetim panelinden galeriden çıkarılan fotoğraflar hiçbir yerde görünmez */
li[hidden][data-gi], .urun-ana[hidden], .urun-foto-adi[hidden] { display: none !important; }
.renk-panel p { padding: 0 10px 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); }
.renk-panel button {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; width: 100%; padding: 10px;
  background: transparent; border: 1px solid transparent; border-radius: 6px; text-align: left; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.renk-panel button:hover { background: color-mix(in srgb, var(--metin) 6%, transparent); }
.renk-panel button[aria-pressed="true"] { border-color: var(--sari); background: color-mix(in srgb, var(--sari) 10%, transparent); }
.renk-ad { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 600; }
.renk-panel button[aria-pressed="true"] .renk-ad::after { content: "✓"; color: var(--sari); }
.renk-serit { display: flex; height: 16px; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--cizgi); }
.renk-serit i { flex: 1; }

/* Bej, sütlü kahve ve krem: açık, sıcak görünüm */
:root[data-renk="bej"] {
  --gece: #f7f1e5; --gece-2: #efe4cf; --yuzey: #e8d5b7;
  --cizgi: rgba(111, 78, 55, 0.2); --cizgi-guclu: rgba(111, 78, 55, 0.34);
  --metin: #2b1f17; --soluk: #6f4e37;
  --sari: #6f4e37; --sari-acik: #5a3d2a; --dugme-metin: #f7f1e5;
  --altin: #9c6b3c; --altin-golge: rgba(156, 107, 60, 0.28);
  --isik: #b08350; --led-kenar: #c9a06c;
  --led: 0 0 6px 1px rgba(201, 160, 108, 0.6), 0 0 20px 3px rgba(201, 160, 108, 0.28);
  --sonuk-1: #d8c6a8; --sonuk-2: #c2ab88;
  --adim-1: #e2d2b6; --adim-2: #dccaae; --adim-3: #e4d7c1;
  --logo-kutu: #e8d5b7;
  --harita-suzgec: sepia(0.2) saturate(0.85);
  color-scheme: light;
}
/* Açık zeminde ışık sahnesi kenarlardan solmaz; karanlık oda yuvarlak köşeli bir pencere gibi durur */
:root:is([data-renk="bej"], [data-renk="orman"]) .isik-sahne {
  -webkit-mask-image: none; mask-image: none;
  background: #0a0f1c; border-radius: 6px;
  box-shadow: 0 24px 60px rgba(43, 31, 23, 0.28);
}
/* Derin orman, adaçayı, kum taşı, ipek beji ve fildişi: açık, zamansız görünüm */
:root[data-renk="orman"] {
  --gece: #f8f5ef; --gece-2: #f0e9dd; --yuzey: #e8dfd0;
  --cizgi: rgba(38, 58, 54, 0.15); --cizgi-guclu: rgba(38, 58, 54, 0.3);
  --metin: #263a36; --soluk: #5b6c61; /* adaçayı, okunurluk için bir ton koyu */
  --sari: #263a36; --sari-acik: #65766b; --dugme-metin: #f8f5ef;
  --altin: #9a8166; --altin-golge: rgba(182, 161, 138, 0.35);
  --isik: #b6a18a; --led-kenar: #b6a18a;
  --led: 0 0 6px 1px rgba(182, 161, 138, 0.65), 0 0 20px 3px rgba(182, 161, 138, 0.3);
  --sonuk-1: #d9d1c2; --sonuk-2: #c3b9a7;
  --adim-1: #e1d9ca; --adim-2: #dbd2c2; --adim-3: #e5ded1;
  --logo-kutu: #e8dfd0;
  --harita-suzgec: sepia(0.15) saturate(0.75);
  color-scheme: light;
}
/* Zeytin ve eski altın: koyu, sakin görünüm */
:root[data-renk="zeytin"] {
  --gece: #141612; --gece-2: #1b1e18; --yuzey: #22261f;
  --cizgi: rgba(179, 176, 158, 0.14); --cizgi-guclu: rgba(179, 176, 158, 0.28);
  --metin: #ecebe2; --soluk: #b3b09e;
  --sari: #b89b5e; --sari-acik: #c8ad74; --dugme-metin: #141612;
  --altin: #b89b5e; --altin-golge: rgba(184, 155, 94, 0.4);
  --isik: #e6dcc0; --led-kenar: #d9c99c;
  --led: 0 0 6px 1px rgba(217, 201, 156, 0.65), 0 0 22px 3px rgba(184, 155, 94, 0.28), inset 0 0 10px rgba(217, 201, 156, 0.18);
  --sonuk-1: #3a4034; --sonuk-2: #555c4d;
  --adim-1: #2c3128; --adim-2: #32372d; --adim-3: #282c24;
  --logo-kutu: #3a4034;
}
/* Gece mavisi: koyu, teknik ve modern görünüm */
:root[data-renk="gece"] {
  --gece: #0b1320; --gece-2: #111a28; --yuzey: #16202e;
  --cizgi: rgba(169, 184, 201, 0.14); --cizgi-guclu: rgba(169, 184, 201, 0.28);
  --metin: #eef3f8; --soluk: #a9b8c9;
  --sari: #6fa3d6; --sari-acik: #8bb6e0; --dugme-metin: #0b1320;
  --altin: #6fa3d6; --altin-golge: rgba(111, 163, 214, 0.45);
  --isik: #e3eefa; --led-kenar: #cfe2f6;
  --led: 0 0 6px 1px rgba(207, 226, 246, 0.7), 0 0 22px 3px rgba(111, 163, 214, 0.3), inset 0 0 10px rgba(207, 226, 246, 0.18);
  --sonuk-1: #26354a; --sonuk-2: #3e5069;
  --adim-1: #1f2b3b; --adim-2: #243245; --adim-3: #1c2735;
  --logo-kutu: #26354a;
}
/* Bordo ve şampanya: koyu, klasik lüks görünüm */
:root[data-renk="bordo"] {
  --gece: #160e10; --gece-2: #1d1215; --yuzey: #24161a;
  --cizgi: rgba(194, 176, 168, 0.14); --cizgi-guclu: rgba(194, 176, 168, 0.28);
  --metin: #f5eeea; --soluk: #c2b0a8;
  --sari: #d4af7a; --sari-acik: #e0c293; --dugme-metin: #160e10;
  --altin: #d4af7a; --altin-golge: rgba(212, 175, 122, 0.45);
  --isik: #f3e3c8; --led-kenar: #ecd6b0;
  --led: 0 0 6px 1px rgba(236, 214, 176, 0.7), 0 0 22px 3px rgba(212, 175, 122, 0.3), inset 0 0 10px rgba(236, 214, 176, 0.18);
  --sonuk-1: #4a2630; --sonuk-2: #6a4049;
  --adim-1: #3a1f26; --adim-2: #42232b; --adim-3: #351c22;
  --logo-kutu: #4a2630;
}
/* Siyah, altın ve şampanya: koyu, lüks görünüm */
:root[data-renk="altin"] {
  --gece: #0f1115; --gece-2: #16191e; --yuzey: #1c2027;
  --cizgi: rgba(232, 217, 181, 0.12); --cizgi-guclu: rgba(232, 217, 181, 0.24);
  --metin: #f7f4ee; --soluk: #b8ad96;
  --sari: #c9a45c; --sari-acik: #d8b874; --dugme-metin: #0f1115;
  --altin: #c9a45c; --altin-golge: rgba(201, 164, 92, 0.45);
  --isik: #e8d9b5; --led-kenar: #e8d9b5;
  --led: 0 0 6px 1px rgba(232, 217, 181, 0.7), 0 0 22px 3px rgba(201, 164, 92, 0.3), inset 0 0 10px rgba(232, 217, 181, 0.2);
  --sonuk-1: #3b3e45; --sonuk-2: #575b63;
  --adim-1: #2b2f37; --adim-2: #31353d; --adim-3: #272b32;
  --logo-kutu: #1c2027;
}
/* Duman mavisi, gül kurusu ve taş grisi: koyu, sakin görünüm */
:root[data-renk="duman"] {
  --gece: #1e252b; --gece-2: #252d34; --yuzey: #2f3942;
  --cizgi: rgba(124, 141, 153, 0.28); --cizgi-guclu: rgba(124, 141, 153, 0.45);
  --metin: #eef0f1; --soluk: #a6a092;
  --sari: #a66f62; --sari-acik: #b98276; --dugme-metin: #fff;
  --altin: #d49a8b; --altin-golge: rgba(212, 154, 139, 0.4);
  --sonuk-1: #4a5560; --sonuk-2: #66727d;
  --adim-1: #36414b; --adim-2: #3b4650; --adim-3: #313b44;
  --logo-kutu: #3a4650;
}

/* ---------- üst kısım ---------- */

.ust { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.ust.dolu { background: color-mix(in srgb, var(--gece) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 32px; max-width: var(--genislik); height: var(--ust-boy); margin: 0 auto; padding: 0 var(--kenar); }
.menu { margin-left: auto; }
.menu ul { display: flex; gap: 4px; }
.menu a { display: block; padding: 8px 14px; text-decoration: none; font-size: 0.95rem; font-weight: 500; color: var(--soluk); transition: color 0.2s; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--metin); }
.ust-sag { display: flex; align-items: center; gap: 14px; }
.dil { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--soluk); padding: 6px 8px; border: 1px solid var(--cizgi); border-radius: 3px; }
.dil:hover { color: var(--metin); }
.menu-ac { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; }
.menu-ac span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--metin); transition: transform 0.25s, top 0.25s; }
.menu-ac span:first-child { top: 17px; }
.menu-ac span:last-child { top: 25px; }
.menu-ac[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-ac[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mobil-menu { max-height: calc(100dvh - var(--ust-boy)); overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--kenar) max(24px, env(safe-area-inset-bottom)); background: var(--gece); border-bottom: 1px solid var(--cizgi); }
.mobil-menu[hidden] { display: none; }
.mobil-menu ul { margin-bottom: 20px; }
.mobil-menu li a { display: block; padding: 12px 0; font: 800 1.9rem/1 var(--baslik); text-decoration: none; border-bottom: 1px solid var(--cizgi); }
.mobil-menu li a[aria-current="page"] { color: var(--sari); }

/* ---------- giriş ---------- */

.giris {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: min(100svh, 940px);
  overflow: hidden;
}
.giris-yazi {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding: calc(var(--ust-boy) + 40px) 0 80px max(var(--kenar), calc((100vw - var(--genislik)) / 2 + var(--kenar)));
  margin-right: -14vw;
}
.giris h1 {
  font-size: clamp(3.6rem, 8.6vw, 8.8rem);
  line-height: 0.86;
  max-width: 7.2ch;
  text-wrap: balance;
}
.giris-alt { max-width: 34ch; font-size: 1.125rem; color: var(--soluk); }
.giris h1.giris-uzun-baslik { font-size: clamp(2.75rem, 5vw, 5.4rem); line-height: 0.98; max-width: 11ch; }
.giris-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.giris-foto { position: relative; overflow: hidden; isolation: isolate; }
.giris-foto img { position: absolute; top: 0; bottom: 0; left: 3px; right: 0; width: calc(100% - 3px); height: 100%; object-fit: cover; object-position: 50% 30%; }
.giris-foto::after {
  /* Fotoğraflar geçerken kenarda ince bir çizgi kalmasın diye koyu geçiş resmin kenarından taşar */
  content: ""; position: absolute; inset: 0 0 0 -2px; z-index: 1;
  background:
    linear-gradient(90deg, var(--gece) 0%, color-mix(in srgb, var(--gece) 55%, transparent) 30%, color-mix(in srgb, var(--gece) 0%, transparent) 60%),
    linear-gradient(0deg, var(--gece) 0%, color-mix(in srgb, var(--gece) 0%, transparent) 25%),
    linear-gradient(180deg, color-mix(in srgb, var(--gece) 75%, transparent) 0%, color-mix(in srgb, var(--gece) 0%, transparent) 18%);
}
/* Açılış: çizgi soldan sağa uzanır, ulaştığında fotoğraftaki ışıklar yanar */
.giris-cizgi {
  position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--ust-boy) + 18px);
  height: 2px; background: var(--isik);
  box-shadow: 0 0 6px 1px rgba(255, 238, 205, 0.9), 0 0 28px 4px rgba(255, 214, 150, 0.35);
  transform-origin: left center;
  animation: cizgi-cek 1.1s cubic-bezier(0.65, 0, 0.25, 1) 0.2s both, cizgi-son 1.2s ease 2.3s forwards;
}
.giris-foto img { opacity: 0; transition: opacity 1.2s ease; }
.giris-foto img.aktif { opacity: 1; }
/* Yalnızca ilk fotoğraf parlayarak açılır; sonrakiler yumuşakça geçer */
.giris-foto img:first-child { animation: yan var(--hiz-giris) linear both; }
.giris h1 { animation: yazi-yan var(--hiz-giris) linear both; }
@keyframes cizgi-cek { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cizgi-son { to { opacity: 0.35; box-shadow: 0 0 4px rgba(255, 238, 205, 0.5); } }
@keyframes yan {
  0%, 58% { filter: brightness(0.12) saturate(0.3); }
  61% { filter: brightness(0.85) saturate(0.9); }
  64% { filter: brightness(0.25) saturate(0.4); }
  68%, 100% { filter: brightness(1) saturate(1); }
}
@keyframes yazi-yan {
  0%, 58% { color: var(--sonuk-1); }
  61% { color: var(--metin); }
  64% { color: var(--sonuk-2); }
  68%, 100% { color: var(--metin); }
}

/* ---------- bölümler ---------- */

.bolum { max-width: var(--genislik); margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--kenar) 0; }
.bolum h2 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.bolum-bas { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 16px 48px; margin-bottom: 36px; }
.bolum-bas p { max-width: 46ch; color: var(--soluk); padding-bottom: 6px; }
.bolum-bas .bag { padding-bottom: 8px; }
@media (min-width: 1081px) {
  .modeller .bolum-bas { align-items: center; }
  .modeller .bolum-bas p { padding-bottom: 0; }
}

/* şekil çizimleri */
.sekil { width: 44px; height: 44px; fill: none; stroke: var(--isik); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(255, 228, 180, 0.75)); transition: filter 0.25s; }
.sekil .tavan { stroke: var(--soluk); stroke-width: 1.5; filter: none; }
.sekil .kalin { stroke-width: 6; }

/* süzgeç */
.suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.suzgec button {
  min-height: 44px; padding: 8px 16px; line-height: 1.4;
  background: transparent; border: 1px solid var(--cizgi); border-radius: 999px;
  font-size: 0.95rem; font-weight: 500; color: var(--soluk); cursor: pointer;
  transition: color 0.2s, border-color 0.3s, background-color 0.2s, box-shadow 0.3s ease;
}
.suzgec button span { margin-left: 4px; font-size: 0.8em; opacity: 0.7; }
/* Seçim butonlarının üzerine gelince kenarında ince gün ışığı LED yanar */
.suzgec button:hover, .grup-atla a:hover, .secmeli label:hover span { color: var(--metin); border-color: var(--led-kenar); box-shadow: var(--led); }
.suzgec button[aria-pressed="true"] { color: var(--gece); background: var(--metin); border-color: var(--metin); }
.suzgec-alan .suzgec-mobil { display: none; }
.urun-arama { max-width: 600px; margin-bottom: 24px; }
.urun-arama label { display: block; margin-bottom: 8px; color: var(--metin); font-weight: 500; }
.arama-satiri { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px 0 16px; border: 1px solid var(--soluk); border-radius: 6px; background: var(--yuzey); }
.arama-satiri:focus-within { outline: 2px solid var(--metin); outline-offset: 3px; }
.arama-satiri svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--soluk); stroke-width: 1.8; stroke-linecap: round; }
.arama-satiri input { width: 100%; min-width: 0; min-height: 50px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--metin); font: inherit; }
.arama-satiri input::placeholder { color: var(--soluk); opacity: 1; }
.arama-satiri input::-webkit-search-cancel-button { display: none; }
.arama-temizle { flex-shrink: 0; min-height: 44px; padding: 8px 4px; border: 0; background: transparent; color: var(--metin); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.arama-temizle[hidden], .arama-bos[hidden] { display: none; }
.arama-var .suzgec-durum { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; margin: -12px 0 24px; color: var(--soluk); font-size: 0.85rem; }
.arama-bos { padding: 28px 0; max-width: 55ch; color: var(--soluk); }
.arama-var { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 12px 24px; max-width: 1000px; }
.arama-var .urun-arama { max-width: none; margin-bottom: 0; min-width: 0; }
.arama-var .suzgec { grid-column: 1 / -1; }
.js .arama-var .suzgec { display: none; }
.js .arama-var .suzgec-mobil { display: flex; gap: 8px; min-width: 0; }
.arama-var .suzgec-mobil label { color: var(--metin); font-size: 1rem; font-weight: 500; }
.arama-var .suzgec-mobil select { min-height: 52px; min-width: 0; border-color: var(--soluk); border-radius: 6px; background-color: var(--yuzey); text-overflow: ellipsis; }
.arama-var .suzgec-durum { grid-column: 1 / -1; margin: 0 0 28px; }
@media (max-width: 760px) {
  .arama-var { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}

/* model kartları: önde iç mekân, fare üstüne gelince dönüp ürün fotoğrafını gösterir */
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 32px 20px; }
.model-listeleri { display: grid; gap: 40px; }
.model-listeleri .kartlar:not(:has(.kart:not([hidden]))) { display: none; }
@media (min-width: 1081px) {
  .model-listeleri .kartlar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.kart[hidden] { display: none; }
.kart a { display: block; text-decoration: none; }
.kartlar .kart { position: relative; }
.kart-medya { position: relative; aspect-ratio: 4 / 5; perspective: 1400px; }
.kart-foto { position: absolute; inset: 0; }
.kart-ic { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--hiz-kart) cubic-bezier(0.3, 0.7, 0.2, 1); }
.kart-yuz { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: var(--yuzey); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kart-yuz img { width: 100%; height: 100%; object-fit: cover; }
.kart-arka { transform: rotateY(180deg); background: #f2f2f0; }
.kart-arka-sekil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at 50% 40%, #1b2440, var(--gece) 70%); color: #fff3dc; }
.kart-arka-sekil svg { width: 46%; height: auto; filter: drop-shadow(0 0 8px rgba(255, 236, 200, 0.7)); }
.kart-arka-sekil > span { font: 800 1.4rem/1 var(--baslik); color: #eef1f6; }
.kart-karart { position: absolute; inset: 0; z-index: 1; border-radius: 3px; background: rgba(7, 11, 21, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.kart-fotolar {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px;
  width: max-content; max-width: calc(100% - 20px); text-align: center; line-height: 1.25;
  background: color-mix(in srgb, var(--gece) 78%, transparent); color: var(--metin); border: 1px solid color-mix(in srgb, var(--metin) 45%, transparent); border-radius: 999px;
  font-size: 0.92rem; font-weight: 600; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transform: translate(-50%, -40%);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s, background-color 0.2s;
}
.kart-fotolar svg { width: 18px; height: 18px; }
.kart-fotolar:hover { background: color-mix(in srgb, var(--gece) 92%, transparent); border-color: var(--sari); }
.kart a.kart-alt { display: flex; align-items: center; gap: 14px; padding-top: 14px; }
.kart-yazi { display: flex; flex-direction: column; }
.kart-ad { font: 800 1.55rem/1.05 var(--baslik); }
.kart-olcu { font-size: 0.875rem; color: var(--soluk); }
.kart:hover .kart-alt .sekil, .kart-alt:focus-visible .sekil { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px rgba(255, 210, 140, 0.9)); }
@media (hover: hover) {
  .kartlar .kart:hover .kart-ic { transform: rotateY(180deg); }
  /* 1,5 saniye bekleyince kart kararır ve düğme çıkar */
  .kartlar .kart:hover .kart-karart { opacity: 1; transition-delay: 1.5s; }
  .kartlar .kart:hover .kart-fotolar { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition-delay: 1.5s; }
}
.kartlar .kart:focus-within .kart-fotolar { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
/* Dokunmatik ekranda düğme hep görünür, köşede durur */
@media (hover: none) {
  .kart-fotolar { left: auto; right: 8px; top: auto; bottom: 8px; padding: 10px; opacity: 1; visibility: visible; transform: none; }
  .kart-fotolar span { display: none; }
  .kartlar .kart:focus-within .kart-fotolar { transform: none; }
}

/* ışık rengi */
.secenek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.secenek-yazi { display: flex; flex-direction: column; gap: 28px; }
.secenek-yazi > p { max-width: 48ch; color: var(--soluk); }
.isik-sec { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--cizgi); border-radius: 3px; }
.isik-sec button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; background: transparent; border: 0; cursor: pointer;
  font: 800 1.6rem/1 var(--baslik); color: var(--soluk); text-align: left;
  position: relative; transition: color 0.2s, background-color 0.2s, box-shadow 0.3s ease;
}
.isik-sec button + button { border-left: 1px solid var(--cizgi); }
.isik-sec button small { font: 500 0.82rem/1.3 var(--govde); }
.isik-sec button:hover { z-index: 1; color: var(--metin); box-shadow: inset 0 0 0 1px var(--led-kenar), var(--led); }
.isik-sec button[aria-pressed="true"] { color: var(--metin); background: var(--yuzey); box-shadow: inset 0 -2px 0 var(--sari); }
.isik-sec button[aria-pressed="true"]:hover { box-shadow: inset 0 -2px 0 var(--sari), inset 0 0 0 1px var(--led-kenar), var(--led); }
/* Her rengin yanında o renkte yanan küçük bir LED noktası */
.isik-sec [data-k="3000"] { --kr: var(--k3000); }
.isik-sec [data-k="4000"] { --kr: var(--k4000); }
.isik-sec [data-k="6500"] { --kr: var(--k6500); }
.isik-sec button small::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; vertical-align: middle;
  background: var(--kr); box-shadow: 0 0 4px 1px color-mix(in srgb, var(--kr) 70%, transparent), 0 0 12px 2px color-mix(in srgb, var(--kr) 30%, transparent);
}

/* LED şerit: bölüm görününce düğmelerin çevresini hızla dolanır, tamamlanınca güçlü parlar, sonra söner.
   Renk soldan sağa sıcaktan soğuğa geçer; bir renk seçilene kadar arada bir tekrarlar (site.js) */
.isik-sec { position: relative; --s1: var(--k3000); --s2: var(--k4000); --s3: var(--k6500); }
:root:is([data-renk="bej"], [data-renk="orman"]) .isik-sec { --s1: #c9803f; --s2: #b8925f; --s3: #6f8fbf; }
.isik-serit { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; z-index: 2; opacity: 0; }
.isik-serit stop:nth-child(1) { stop-color: var(--s1); }
.isik-serit stop:nth-child(2) { stop-color: var(--s2); }
.isik-serit stop:nth-child(3) { stop-color: var(--s3); }
.isik-serit rect {
  x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 3px;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100;
}
.isik-sec.serit { animation: serit-kutu var(--hiz-serit) both; }
.isik-sec.serit .isik-serit { animation: serit-isik var(--hiz-serit) both; }
.isik-sec.serit .isik-serit rect { animation: serit-ilerle var(--hiz-serit) both; }
/* Tanıtımda sırayla yanan düğme: kendi ışık renginde parlar (site.js, 0,25 sn'de bir) */
.isik-sec button.tanitim {
  z-index: 1; color: var(--metin); background: color-mix(in srgb, var(--kr) 12%, var(--yuzey));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kr) 80%, #fff), 0 0 8px 1px color-mix(in srgb, var(--kr) 70%, transparent), 0 0 28px 4px color-mix(in srgb, var(--kr) 35%, transparent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--kr) 70%, transparent);
  transition-duration: 0.08s;
}
.isik-sec button.tanitim small::before { box-shadow: 0 0 6px 2px var(--kr), 0 0 18px 4px color-mix(in srgb, var(--kr) 60%, transparent); }
/* Tanıtımda videolar arasında hızlı geçiş */
.isik-sahne.tanitimda .isik-video { transition-duration: 0.12s; }
/* Şerit hızlanarak dolanır (ilk 0,9 sn), tamamlanınca kalınlaşıp parlar */
@keyframes serit-ilerle {
  0% { stroke-dashoffset: 100; stroke-width: 2; animation-timing-function: cubic-bezier(0.45, 0, 0.8, 1); }
  35% { stroke-dashoffset: 0; stroke-width: 2; }
  44% { stroke-dashoffset: 0; stroke-width: 3.5; }
  70%, 100% { stroke-dashoffset: 0; stroke-width: 2; }
}
@keyframes serit-isik {
  0%, 35% { opacity: 1; filter: drop-shadow(0 0 2px var(--s2)) drop-shadow(0 0 6px color-mix(in srgb, var(--s2) 40%, transparent)); }
  44% { opacity: 1; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 22px var(--s2)); }
  70% { opacity: 1; filter: drop-shadow(0 0 2px var(--s2)) drop-shadow(0 0 6px color-mix(in srgb, var(--s2) 40%, transparent)); }
  100% { opacity: 0; filter: drop-shadow(0 0 2px var(--s2)) drop-shadow(0 0 6px color-mix(in srgb, var(--s2) 40%, transparent)); }
}
/* Parlama anında kutunun içi ve dışı da ışık alır */
@keyframes serit-kutu {
  0%, 35% { box-shadow: 0 0 0 0 transparent, inset 0 0 0 0 transparent; }
  44% { box-shadow: 0 0 36px 4px color-mix(in srgb, var(--s2) 30%, transparent), inset 0 0 26px 0 color-mix(in srgb, var(--s2) 18%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent, inset 0 0 0 0 transparent; }
}
.isik-durum { margin-top: -12px; font-size: 0.9rem; color: var(--soluk); }
.ozellik { margin: 0; display: grid; gap: 0; }
.ozellik div { display: grid; grid-template-columns: 9rem 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--cizgi); }
.ozellik dt { color: var(--soluk); }
.ozellik dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Kasa rengi: seçme düğmesi gibi yuvarlak değil, altında ışık çizgisi olan küçük bir profil parçası gibi görünür */
.renk { display: inline-block; width: 26px; height: 9px; border-radius: 1px; border: 1px solid var(--cizgi-guclu); box-shadow: inset 0 -2px 0 rgba(255, 243, 220, 0.9); vertical-align: middle; }
.renk:not(:first-child) { margin-left: 10px; }
.r-siyah { background: #111; }
.r-beyaz { background: #f4f4f2; }
.r-antrasit { background: #3b3f45; }

/* ışık sahnesi: lamba kapalı başlar, renk seçilince oda aydınlanır.
   Oda tek noktalı perspektifle çizilir (göz 1,8 m, tavan 3 m): arka duvar %20–80 / %16–76.
   Lamba 2,3 m yükseklikte, arka duvara yakın asılı ve ışığı aşağı verir. Hesaba göre:
   duvar lambanın hemen altında en parlak, aşağı doğru azalır; zemin geniş ve yumuşak aydınlanır;
   tavan ve yan duvarlar yalnızca biraz yansıma alır. Işığın ulaşmadığı yerler karanlıkta kalır. */
@property --k { syntax: "<color>"; inherits: true; initial-value: #ffe6bd; }
.isik-sahne {
  --k: var(--k4000);
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  transition: --k 0.9s ease;
  -webkit-mask-image: radial-gradient(ellipse 52% 58% at 50% 42%, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse 52% 58% at 50% 42%, #000 48%, transparent 100%);
}
.isik-sahne[data-k="3000"] { --k: var(--k3000); }
.isik-sahne[data-k="6500"] { --k: var(--k6500); }
.isik-sahne > span, .isiklar > span, .oda > span { position: absolute; display: block; }
.isik-sahne { cursor: pointer; }

/* Karanlık oda: lamba sönükken de duvar, zemin ve köşeler çok koyu tonlarda seçilir */
.oda { inset: 0; }
.oda > span { inset: 0; }
.oda .tavan { background: linear-gradient(180deg, #0a0e1a, #0d1222); }
.oda .arka { background: linear-gradient(180deg, #0f1528 0%, #121a31 100%); }
.oda .zemin { background: linear-gradient(180deg, #10172b 0%, #0b101e 100%); }
.oda .sol { background: linear-gradient(90deg, #0a0f1c, #0e1427); }
.oda .sag { background: linear-gradient(270deg, #0a0f1c, #0e1427); }

.isiklar { inset: 0; opacity: 0; mix-blend-mode: screen; transition: opacity 0.6s ease; }
.yuzey { inset: 0; }
.tavan {
  clip-path: polygon(0 0, 100% 0, 80% 16%, 20% 16%);
  background: radial-gradient(ellipse 36% 10% at 50% 15%, color-mix(in srgb, var(--k) 4%, transparent), color-mix(in srgb, var(--k) 1.5%, transparent) 50%, transparent 100%);
}
.arka {
  clip-path: polygon(20% 16%, 80% 16%, 80% 76%, 20% 76%);
  background: linear-gradient(180deg,
    transparent 28%,
    color-mix(in srgb, var(--k) 6%, transparent) 30.5%,
    color-mix(in srgb, var(--k) 17%, transparent) 33%,
    color-mix(in srgb, var(--k) 29%, transparent) 36.5%,
    color-mix(in srgb, var(--k) 40%, transparent) 41%,
    color-mix(in srgb, var(--k) 36%, transparent) 45%,
    color-mix(in srgb, var(--k) 24%, transparent) 53%,
    color-mix(in srgb, var(--k) 16%, transparent) 61%,
    color-mix(in srgb, var(--k) 11%, transparent) 68%,
    color-mix(in srgb, var(--k) 8%, transparent) 76%);
  -webkit-mask-image: radial-gradient(ellipse 44% 62% at 50% 72%, #000 0%, #000 52%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse 44% 62% at 50% 72%, #000 0%, #000 52%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
}
.zemin {
  clip-path: polygon(20% 76%, 80% 76%, 100% 100%, 0 100%);
  background:
    radial-gradient(ellipse 24% 3.5% at 50% 81.5%, color-mix(in srgb, var(--k) 16%, transparent), transparent 100%),
    radial-gradient(ellipse 46% 17% at 50% 81%, color-mix(in srgb, var(--k) 46%, transparent) 0%, color-mix(in srgb, var(--k) 34%, transparent) 30%, color-mix(in srgb, var(--k) 18%, transparent) 60%, color-mix(in srgb, var(--k) 7%, transparent) 85%, transparent 100%);
}
.sol {
  clip-path: polygon(0 0, 20% 16%, 20% 76%, 0 100%);
  background: radial-gradient(ellipse 14% 30% at 20% 50%, color-mix(in srgb, var(--k) 17%, transparent), color-mix(in srgb, var(--k) 7%, transparent) 50%, transparent 100%);
}
.sag {
  clip-path: polygon(100% 0, 80% 16%, 80% 76%, 100% 100%);
  background: radial-gradient(ellipse 14% 30% at 80% 50%, color-mix(in srgb, var(--k) 17%, transparent), color-mix(in srgb, var(--k) 7%, transparent) 50%, transparent 100%);
}
/* Lambanın havadaki parıltısı ve altına doğru çok hafif bir ışık sisi */
.parilti {
  inset: 0; filter: blur(5px);
  background:
    radial-gradient(ellipse 21% 1% at 50% 28.8%, color-mix(in srgb, var(--k) 60%, transparent), transparent 100%),
    radial-gradient(ellipse 27% 3.5% at 50% 29%, color-mix(in srgb, var(--k) 22%, transparent), transparent 100%),
    radial-gradient(ellipse 20% 26% at 50% 54%, color-mix(in srgb, var(--k) 4%, transparent), transparent 100%);
}

/* Askı telleri, ince siyah gövde ve altındaki ışık çizgisi */
.tel { top: 12.8%; height: 14.8%; width: 1px; background: linear-gradient(180deg, #56607a, #6b7591); }
.tel.sol { left: 35.5%; }
.tel.sag { right: 35.5%; }
/* Tavana bağlantı parçaları */
.baglanti { top: calc(12.8% - 3px); width: 24px; height: 4px; border-radius: 1px; background: linear-gradient(180deg, #4a5469, #3a4256); transform: translateX(-50%); }
.baglanti.sol { left: calc(35.5% + 0.5px); }
.baglanti.sag { left: calc(64.5% - 0.5px); }
/* Gövde: üst kenarında ince bir parlaklık olan koyu metal */
.armatur { left: 32%; right: 32%; top: 27.6%; height: 1.3%; min-height: 8px; border-radius: 1px; background: linear-gradient(180deg, #59627a 0, #59627a 1px, #2f3645 1px, #1a1f29 100%); }
/* Işık camı: sönükken de beyazımsı görünür */
.armatur-led { left: 32.2%; right: 32.2%; top: calc(27.6% + max(1.3%, 8px)); height: 4px; border-radius: 0 0 2px 2px; background: linear-gradient(180deg, #7a8296, #565d70); }
/* Sönükken camda nefes alır gibi hafif bir parıltı: lambanın orada olduğunu gösterir */
.armatur-led::before {
  content: ""; position: absolute; inset: -1px 0; border-radius: inherit;
  box-shadow: 0 0 8px 1px rgba(255, 240, 215, 0.45), 0 3px 26px 4px rgba(255, 228, 190, 0.16);
  animation: bekle 2.8s ease-in-out infinite;
}
.isik-sahne.yaniyor .armatur-led::before { animation: none; opacity: 0; }
@keyframes bekle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.85; } }
.isik-sahne:hover:not(.yaniyor) .armatur-led::before { animation-duration: 1.2s; }
.armatur-led::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: color-mix(in srgb, var(--k) 45%, #fff);
  box-shadow: 0 0 2px 1px color-mix(in srgb, var(--k) 80%, #fff), 0 2px 10px 2px color-mix(in srgb, var(--k) 60%, transparent), 0 4px 34px 6px color-mix(in srgb, var(--k) 24%, transparent);
}

.isik-sahne.yaniyor .isiklar, .isik-sahne.yaniyor .armatur-led::after { opacity: 1; }
/* Yanarken LED gibi kısa bir titreme */
.isik-sahne.titre .isiklar, .isik-sahne.titre .armatur-led::after { animation: yanis 1.1s linear both; }
@keyframes yanis {
  0% { opacity: 0; }
  6% { opacity: 0.8; }
  10% { opacity: 0.08; }
  17% { opacity: 0.95; }
  22% { opacity: 0.3; }
  36%, 100% { opacity: 1; }
}

/* Gerçek video (kaynak/video/isik-<kelvin>.mp4): dikey çekim, kenarları sayfaya yumuşakça karışır.
   Lamba sönükken karanlık ilk kare görünür; videosu olmayan renk seçilince sahne çizime döner */
.isik-sahne.videolu:not([data-gorunum="cizim"]) {
  aspect-ratio: 9 / 16; width: min(100%, calc(min(82vh, 800px) * 9 / 16)); justify-self: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 92%, transparent);
  mask-composite: intersect;
}
.isik-sahne.videolu:not([data-gorunum="cizim"]) > span { display: none; }
.isik-karanlik, .isik-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.isik-video { opacity: 0; transition: opacity 0.6s ease; }
.isik-video.aktif { opacity: 1; }
.isik-sahne[data-gorunum="cizim"] > :is(.isik-karanlik, .isik-video) { display: none; }
:root:is([data-renk="bej"], [data-renk="orman"]) .isik-sahne.videolu { -webkit-mask-image: none; mask-image: none; }
/* Telefonda dikey video 3:4 kırpılır; lamba ve sandalye görünür kalır */
@media (max-width: 760px) {
  .isik-sahne.videolu:not([data-gorunum="cizim"]) { aspect-ratio: 3 / 4; width: auto; justify-self: stretch; }
  .isik-karanlik, .isik-video { object-position: 50% 66%; }
}

/* uygulamalar */
/* Uygulama fotoğrafları sürekli kayar; fare üstüne gelince durur */
.proje-bant {
  overflow: hidden; padding: 28px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.proje-serit { display: flex; width: max-content; animation: kay var(--hiz-projeler) linear infinite; }
.proje-bant:hover .proje-serit, .proje-bant:focus-within .proje-serit { animation-play-state: paused; }
.proje-serit li { flex: none; width: clamp(240px, 26vw, 340px); margin-right: 28px; }
/* Kartın kenarında LED çerçeve */
.proje-serit a::before, .blog-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 3px; pointer-events: none;
  border: 2px solid #fff3dc;
  box-shadow: 0 0 6px 1px rgba(255, 236, 200, 0.75), 0 0 26px 4px rgba(255, 214, 150, 0.28), inset 0 0 14px rgba(255, 228, 180, 0.35);
  transition: box-shadow 0.3s ease;
}
.proje-serit img { border-radius: 3px; }
.proje-serit a:hover::before, .blog-kart a:hover .blog-foto::before, .blog-kart a:focus-visible .blog-foto::before { box-shadow: 0 0 8px 2px rgba(255, 240, 210, 0.95), 0 0 40px 8px rgba(255, 214, 150, 0.4), inset 0 0 20px rgba(255, 228, 180, 0.45); }
.proje-serit a { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 3px; text-decoration: none; }
.proje-serit img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.proje-serit a::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(0deg, rgba(7, 11, 21, 0.85) 0%, transparent 45%); }
.proje-serit span { color: #eef1f6; position: absolute; z-index: 1; left: 18px; bottom: 16px; display: flex; flex-direction: column; font: 800 1.5rem/1.05 var(--baslik); }
.proje-serit small { font: 500 0.85rem/1.4 var(--govde); color: #b9c1cf; }

/* referanslar */
.referans h2 { max-width: 22ch; margin-bottom: 40px; }
/* logo şeridi: logolar kayar, lambanın altından geçen logo aydınlanıp renklenir */
.logo-bant {
  position: relative; overflow: hidden; padding-top: 96px; padding-bottom: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-lamba { position: absolute; z-index: 2; top: 0; left: 50%; width: 170px; height: 64px; transform: translateX(-50%); }
.logo-lamba::before { content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 56px; border-left: 1px solid #2a3247; border-right: 1px solid #2a3247; }
.logo-lamba::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, #2a303c 0 55%, #fff1d6 55%);
  box-shadow: 0 4px 6px rgba(255, 236, 200, 0.7), 0 6px 24px rgba(255, 214, 150, 0.45);
}
.logo-huzme {
  position: absolute; z-index: 1; top: 60px; left: 50%; width: 420px; height: 210px; transform: translateX(-50%);
  background: radial-gradient(ellipse 42% 100% at 50% 0%, rgba(255, 236, 200, 0.2), rgba(255, 236, 200, 0.06) 55%, transparent 80%);
  filter: blur(10px); mix-blend-mode: screen; pointer-events: none;
}
.logolar { display: flex; width: max-content; animation: kay var(--hiz-logolar) linear infinite; }
.logo-bant:hover .logolar { animation-play-state: paused; }
@keyframes kay { to { transform: translateX(-50%); } }
.logolar li {
  --v: 0;
  position: relative; flex: none; display: grid; place-items: center;
  width: 210px; height: 124px; margin-right: 16px; padding: 22px; border-radius: 4px;
  background: color-mix(in srgb, #f3f1ec calc(var(--v) * 100%), var(--logo-kutu));
  box-shadow: 0 0 calc(var(--v) * 48px) rgba(255, 222, 170, calc(var(--v) * 0.3));
}
.logolar img { grid-area: 1 / 1; max-height: 68px; max-width: 100%; width: auto; object-fit: contain; }
/* Logo zemine "multiply" ile basılır: karanlıkta koyu bir siluet, ışık geldikçe kendi renkleri ortaya çıkar */
.logolar img { mix-blend-mode: multiply; filter: grayscale(calc(1 - var(--v))); }

/* Bölüm başlıkları: kaydırırken önce soluk görünür, ekranın dörtte üçüne gelince parlar */
.js :is(.bolum > h2, .bolum-bas > h2, .secenek-yazi > h2, .son-cagri-yazi > h2) { color: var(--sonuk-1); transition: color 0.25s ease-in, text-shadow 0.25s ease-in; }
.js :is(.bolum > h2, .bolum-bas > h2, .secenek-yazi > h2, .son-cagri-yazi > h2).yandi { color: var(--metin); text-shadow: 0 0 24px rgba(255, 236, 200, 0.18); }

/* adımlar: bölüme gelince LED çizgisi 1'den 4'e uzanır, ulaştığı adım aydınlanır */
.adimlar h2 { margin-bottom: 40px; }
.adim-alan { position: relative; }
.adim-cizgi {
  position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
  background: var(--isik);
  box-shadow: 0 0 6px 1px rgba(255, 238, 205, 0.85), 0 0 26px 4px rgba(255, 214, 150, 0.3);
  transform-origin: left center;
}
.adimlar ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: adim; }
.adimlar li { counter-increment: adim; position: relative; padding-top: 28px; border-top: 1px solid var(--cizgi); }
.adimlar li::before { content: counter(adim); display: block; margin-bottom: 18px; font: 800 3.4rem/0.8 var(--baslik); color: var(--altin); text-shadow: 0 0 18px var(--altin-golge); }
.adimlar li::after {
  content: ""; position: absolute; z-index: -1; left: -14%; right: -6%; top: 0; height: 260px; pointer-events: none;
  background: radial-gradient(ellipse 55% 100% at 35% 0%, rgba(255, 236, 200, 0.13), rgba(255, 236, 200, 0.04) 45%, transparent 75%);
}
.adimlar h3 { font-size: 1.7rem; margin-bottom: 10px; }
.adimlar p { color: var(--soluk); font-size: 0.98rem; }

/* Başlangıçta karanlık (yalnızca sayfa betiği çalışıyorsa) */
.js .adim-cizgi { transform: scaleX(0); }
.js .adimlar li::before { color: var(--adim-1); text-shadow: none; }
.js .adimlar li::after { opacity: 0; }
.js .adimlar h3 { color: var(--adim-2); }
.js .adimlar p { color: var(--adim-3); }
.js .adimlar li::before, .js .adimlar li::after, .js .adimlar h3, .js .adimlar p { transition: color 0.9s ease, text-shadow 0.9s ease, opacity 1.1s ease; transition-delay: inherit; }
.js .adim-alan.basla .adim-cizgi { transform: scaleX(1); transition: transform 3.2s linear 0.1s; }
.js .adim-alan.basla li::before { color: var(--altin); text-shadow: 0 0 18px var(--altin-golge); }
.js .adim-alan.basla li::after { opacity: 1; }
.js .adim-alan.basla h3 { color: var(--metin); }
.js .adim-alan.basla p { color: var(--soluk); }
.adim-alan.basla li:nth-child(1) { transition-delay: 0.3s; }
.adim-alan.basla li:nth-child(2) { transition-delay: 1.1s; }
.adim-alan.basla li:nth-child(3) { transition-delay: 1.9s; }
.adim-alan.basla li:nth-child(4) { transition-delay: 2.7s; }

/* son çağrı */
.son-cagri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-bottom: clamp(72px, 10vw, 140px); }
.son-cagri img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.son-cagri h2 { max-width: 14ch; margin-bottom: 20px; }
.son-cagri p { max-width: 46ch; color: var(--soluk); margin-bottom: 28px; }

/* ---------- alt sayfalar ---------- */

.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.not { font-size: 0.85rem; color: var(--soluk); }
.not a { color: var(--soluk); }

.sayfa-bas { max-width: var(--genislik); margin: 0 auto; padding: calc(var(--ust-boy) + clamp(48px, 8vw, 110px)) var(--kenar) 0; position: relative; }
.sayfa-bas h1 { font-size: clamp(3.6rem, 9vw, 8rem); line-height: 0.86; }
.sayfa-bas p { max-width: 52ch; margin-top: 22px; font-size: 1.125rem; color: var(--soluk); }
.sayfa-bas::after { content: ""; display: block; height: 2px; margin-top: clamp(40px, 6vw, 72px); background: linear-gradient(90deg, var(--isik), rgba(255, 243, 220, 0) 70%); box-shadow: 0 0 10px rgba(255, 228, 180, 0.45); }

.grup-atla { display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--genislik); margin: 0 auto; padding: 28px var(--kenar) 0; }
.grup-atla a { transition: color 0.2s, border-color 0.3s, box-shadow 0.3s ease; padding: 9px 16px; border: 1px solid var(--cizgi); border-radius: 999px; text-decoration: none; color: var(--soluk); font-size: 0.95rem; }
.grup { scroll-margin-top: calc(var(--ust-boy) - 40px); padding-top: clamp(56px, 7vw, 96px); }
/* Ürün grubu adları uzun olduğu için başlıklar biraz daha küçük */
.grup .bolum-bas h2 { max-width: 18ch; font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
/* Grup içindeki alt başlık (ör. sıva üstü spotlar): önünde kısa bir LED çizgi */
.alt-grup-baslik { display: flex; align-items: center; gap: 14px; margin: clamp(40px, 5vw, 64px) 0 24px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); scroll-margin-top: calc(var(--ust-boy) + 16px); }
.alt-grup-baslik::before { content: ""; flex: none; width: 34px; height: 2px; border-radius: 1px; background: var(--isik); box-shadow: 0 0 6px rgba(255, 228, 180, 0.7); }

/* ürün detay */
.urun-ust { max-width: var(--genislik); margin: 0 auto; padding: calc(var(--ust-boy) + 28px) var(--kenar) 0; }
.yol { display: flex; gap: 10px; font-size: 0.9rem; color: var(--soluk); margin-bottom: 24px; }
.yol a { color: var(--soluk); text-decoration: none; }
.yol a:hover { color: var(--metin); }
.urun-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.urun-galeri { position: sticky; top: calc(var(--ust-boy) + 20px); }
.urun-ana { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--yuzey); cursor: zoom-in; }
.urun-ana img { width: 100%; height: 100%; object-fit: cover; }
.buyut { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--gece) 70%, transparent); color: var(--metin); }
.buyut svg { width: 20px; height: 20px; }
.urun-kucukler { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin-top: 10px; }
.urun-kucukler a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; border: 1px solid transparent; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; }
.urun-kucukler a:hover { opacity: 1; }
.urun-kucukler a[aria-current="true"] { opacity: 1; border-color: var(--sari); }
.urun-kucukler img { width: 100%; height: 100%; object-fit: cover; }
.urun-bilgi { display: flex; flex-direction: column; gap: 20px; }
.sekil-buyuk { width: 72px; height: 72px; stroke-width: 2.5; }
.urun-bilgi h1 { font-size: clamp(3rem, 6vw, 5.4rem); line-height: 0.88; }
.urun-kisa { font-size: 1.125rem; color: var(--soluk); max-width: 40ch; }

.teklif { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; padding: clamp(20px, 3vw, 32px); background: var(--gece-2); border: 1px solid var(--cizgi); border-radius: 3px; }
.teklif h2 { font-size: 2rem; }
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan > span, .secmeli legend { font-size: 0.9rem; color: var(--soluk); }
.alan input, .alan select, .alan textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--gece); color: var(--metin);
  border: 1px solid var(--cizgi-guclu); border-radius: 3px;
  font: inherit; font-size: 1rem;
}
.alan textarea { resize: vertical; min-height: 120px; }
.alan select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--soluk) 50%), linear-gradient(135deg, var(--soluk) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--sari); box-shadow: 0 0 0 1px var(--sari); }
.alan-adet input { max-width: 140px; }
.secmeli { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.secmeli legend { margin-bottom: 8px; padding: 0; }
.secmeli label { position: relative; }
.secmeli input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.secmeli span { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--cizgi-guclu); border-radius: 3px; font-size: 0.95rem; transition: border-color 0.3s, background-color 0.2s, box-shadow 0.3s ease; }
.secmeli span small { color: var(--soluk); font-size: 0.8rem; }
.secmeli span .renk { margin: 0; }
.secmeli input:checked + span { border-color: var(--sari); background: color-mix(in srgb, var(--sari) 8%, transparent); }
.secmeli input:focus-visible + span { outline: 2px solid var(--sari); outline-offset: 2px; }
.teklif .dugme { justify-content: center; }

.olcu-tablo, .ozet-tablo { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.olcu-tablo { max-width: 640px; }
.olcu-tablo th, .olcu-tablo td, .ozet-tablo th, .ozet-tablo td { padding: 14px 0; text-align: left; border-bottom: 1px solid var(--cizgi); }
.olcu-tablo thead th, .ozet-tablo thead th { font-size: 0.85rem; font-weight: 500; color: var(--soluk); }
.olcu-tablo td:last-child { text-align: right; color: var(--soluk); }
.olcu-tablo tbody tr:hover td { color: var(--metin); background: linear-gradient(90deg, transparent, rgba(255, 243, 220, 0.04), transparent); }

.diger h2 { margin-bottom: 28px; }

/* Teknik tablolar: her model açılır kapanır bir satır */
.teknik-liste { border-top: 1px solid var(--cizgi); }
.teknik-model { border-bottom: 1px solid var(--cizgi); }
.teknik-model summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 18px 40px 18px 0; position: relative; cursor: pointer; list-style: none; }
.teknik-model summary::-webkit-details-marker { display: none; }
.teknik-model summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--soluk); border-bottom: 2px solid var(--soluk); transform: translateY(-70%) rotate(45deg); transition: transform 0.25s ease, border-color 0.2s; }
.teknik-model[open] summary::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--isik); }
.teknik-model summary:hover .tm-ad { color: var(--isik); }
.tm-ad { font: 800 1.7rem/1 var(--baslik); transition: color 0.2s; }
.tm-ozet { font-size: 0.9rem; color: var(--soluk); }
.teknik-model .tablo-kap { padding-bottom: 8px; }
.teknik-tablo { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.teknik-tablo :is(th, td) { padding: 11px 16px 11px 0; text-align: left; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.teknik-tablo thead th { font-size: 0.8rem; font-weight: 500; color: var(--soluk); }
.teknik-tablo tbody th { font-weight: 600; }
.teknik-tablo tbody tr:last-child :is(th, td) { border-bottom: 0; }
.teknik-tablo tbody tr:hover :is(th, td) { color: var(--metin); background: linear-gradient(90deg, transparent, rgba(255, 243, 220, 0.04), transparent); }
.teknik-not { padding: 4px 0 20px; font-size: 0.88rem; color: var(--soluk); }
.teknik > .not { margin-top: 16px; }
.sekil-dizin { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi); }
.sekil-dizin a { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 10px; text-align: center; text-decoration: none; font-size: 0.92rem; color: var(--soluk); border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); transition: color 0.2s, background-color 0.2s; height: 100%; }
.sekil-dizin .sekil { stroke: var(--soluk); filter: none; }
.sekil-dizin a:hover, .sekil-dizin a[aria-current="page"] { color: var(--metin); background: var(--gece-2); }
.sekil-dizin a:hover .sekil, .sekil-dizin a[aria-current="page"] .sekil { stroke: var(--isik); filter: drop-shadow(0 0 3px rgba(255, 228, 180, 0.75)); }
.onceki-sonraki { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; padding-bottom: clamp(72px, 10vw, 140px); }
.onceki-sonraki a { display: flex; flex-direction: column; text-decoration: none; font: 800 1.6rem/1.05 var(--baslik); }
.onceki-sonraki a:last-child { text-align: right; }
.onceki-sonraki small { font: 500 0.85rem/1.5 var(--govde); color: var(--soluk); }

/* projeler galerisi */
.galeri { columns: 3 300px; column-gap: 16px; }
.galeri li { break-inside: avoid; margin-bottom: 16px; }
.galeri a { position: relative; display: block; overflow: hidden; border-radius: 3px; cursor: zoom-in; }
.galeri img { width: 100%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.galeri span { color: #eef1f6; position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font: 800 1.35rem/1 var(--baslik); background: linear-gradient(0deg, rgba(7, 11, 21, 0.85), transparent); opacity: 0; transition: opacity 0.25s; }
.galeri a:hover img { transform: scale(1.03); }
.galeri a:hover span, .galeri a:focus-visible span { opacity: 1; }
.galeri-bolum { padding-top: 40px; }

/* Projelerde başlık, grup seçimi ve fotoğraflar tek bir akış oluşturur. */
.sayfa-projeler .sayfa-bas { padding-top: calc(var(--ust-boy) + clamp(40px, 6vw, 72px)); }
.sayfa-projeler .sayfa-bas h1 { font-size: clamp(3.6rem, 7vw, 6rem); }
.sayfa-projeler .sayfa-bas p { max-width: 62ch; margin-top: 16px; }
.sayfa-projeler .sayfa-bas::after { margin-top: 32px; }
.sayfa-projeler .galeri-bolum { padding-top: 24px; }
.sayfa-projeler .suzgec { margin-bottom: 24px; }
.sayfa-projeler .suzgec button { white-space: nowrap; }

/* büyük fotoğraf penceresi */
.isik-kutusu { --metin: #eef1f6; --cizgi: rgba(214, 224, 245, 0.13); width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 8, 15, 0.94); color: var(--metin); }
.isik-kutusu::backdrop { background: rgba(5, 8, 15, 0.6); }
.isik-kutusu[open] { display: grid; place-items: center; }
.isik-kutusu figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 64px 72px 24px; max-height: 100vh; }
.isik-kutusu img { max-width: min(1200px, 100%); max-height: calc(100vh - 140px); width: auto; object-fit: contain; border-radius: 3px; }
.isik-kutusu figcaption { display: flex; gap: 16px; align-items: baseline; font: 800 1.5rem/1 var(--baslik); }
.isik-kutusu figcaption a { font: 600 0.95rem/1 var(--govde); color: var(--sari); text-decoration: none; }
.isik-kutusu button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; background: rgba(238, 241, 246, 0.08); border: 1px solid var(--cizgi); border-radius: 50%; color: var(--metin); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.isik-kutusu button:hover { background: rgba(238, 241, 246, 0.16); }
.ik-kapat { top: 16px; right: 16px; }
.ik-onceki { left: 16px; top: 50%; transform: translateY(-50%); }
.ik-sonraki { right: 16px; top: 50%; transform: translateY(-50%); }
.isik-kutusu[data-tek] .ik-onceki, .isik-kutusu[data-tek] .ik-sonraki { display: none; }

/* hakkımızda */
.hakkinda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hakkinda-yazi { display: flex; flex-direction: column; gap: 20px; max-width: 56ch; font-size: 1.08rem; }
.hakkinda-yazi p + p { color: var(--soluk); }
.hakkinda img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.sayilar dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--cizgi); }
.sayilar div { display: flex; flex-direction: column-reverse; gap: 8px; padding: 28px 24px 0 0; }
.sayilar dd { margin: 0; font: 800 clamp(3.4rem, 7vw, 5.6rem)/0.85 var(--baslik); }
.sayilar dt { color: var(--soluk); }
.degerler h2 { margin-bottom: 36px; }
.degerler ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.degerler li { padding-top: 20px; border-top: 1px solid var(--cizgi); position: relative; }
.degerler li::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--isik); box-shadow: 0 0 8px rgba(255, 228, 180, 0.8); }
.degerler h3 { font-size: 1.7rem; margin-bottom: 8px; }
.degerler p { color: var(--soluk); }

/* iletişim */
.iletisim { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.iletisim-liste li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--cizgi); }
.iletisim-liste li:first-child { padding-top: 0; }
.iletisim-liste > li > svg { width: 24px; height: 24px; margin-top: 2px; color: var(--sari); }
.iletisim-liste h2 { font: 500 0.85rem/1.4 var(--govde); color: var(--soluk); margin-bottom: 4px; }
.iletisim-liste a { text-decoration: none; font-size: 1.1rem; line-height: 1.5; }
.iletisim-liste a:hover { color: var(--sari); }
.form { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 36px); background: var(--gece-2); border: 1px solid var(--cizgi); border-radius: 3px; }
.form h2 { font-size: 2.2rem; margin-bottom: 4px; }
.form-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.harita { display: block; width: 100%; height: 420px; border: 0; border-radius: 3px; filter: var(--harita-suzgec); }
.harita-bolum { padding-bottom: clamp(72px, 10vw, 140px); }
.harita-bag { margin-top: 16px; }

/* katalog */
.katalog-bolum { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.katalog-kapak { --gece-2: #0f1628; --soluk: #9aa4b8; --cizgi: rgba(214, 224, 245, 0.13); position: relative; aspect-ratio: 210 / 297; max-width: 420px; overflow: hidden; border-radius: 3px; background: var(--gece-2); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--cizgi); transform: rotate(-2deg); }
.katalog-kapak img { width: 100%; height: 62%; object-fit: cover; object-position: 50% 0; }
.katalog-kapak div { position: absolute; left: 8%; right: 8%; bottom: 8%; display: flex; flex-direction: column; gap: 8px; }
.katalog-logo { width: 58%; height: auto; margin-bottom: 6px; }
.katalog-kapak span { color: var(--soluk); }
.katalog-yazi { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.katalog-yazi p { max-width: 46ch; color: var(--soluk); }
.ozet-tablo th[scope="row"] { display: flex; align-items: center; gap: 14px; font: 800 1.4rem/1 var(--baslik); }
.ozet-tablo .sekil { width: 32px; height: 32px; }
.ozet-tablo td { color: var(--soluk); }
.ozet-tablo td:last-child { text-align: right; }
.ozet-bolum h2 { margin-bottom: 24px; }

/* ---------- blog ---------- */

.blog-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 24px; }
.blog-bolum .blog-liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 56px 32px; }
.blog-kart, .blog-kart a { height: 100%; }
.blog-kart a { display: flex; flex-direction: column; gap: 20px; text-decoration: none; }
/* Fotoğrafın kenarında uygulama fotoğraflarındaki LED çerçevenin aynısı yanar */
.blog-foto { position: relative; display: block; border-radius: 3px; }
.blog-kart img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.blog-kart-yazi { display: flex; flex-direction: column; gap: 10px; }
.blog-kart :is(h2, h3) { font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1; }
.blog-kart-yazi > p:not(.blog-meta) { color: var(--soluk); }
.blog-kart .bag { margin-top: 4px; }
.blog-meta { font-size: 0.88rem; color: var(--soluk); }
.diger-yazilar h2 { margin-bottom: 36px; }
/* Tablette iki sütun olduğu için anasayfada üçüncü yazı tek başına kalmasın */
@media (min-width: 761px) and (max-width: 1080px) {
  .blog-ozet .blog-liste li:nth-child(3) { display: none; }
}

/* yazı sayfası */
.yazi { max-width: var(--genislik); margin: 0 auto; padding: calc(var(--ust-boy) + 28px) var(--kenar) 0; }
.yazi-bas { max-width: 940px; }
.yazi-bas .blog-meta { margin-bottom: 14px; }
.yazi-bas h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 0.9; margin-bottom: 22px; text-wrap: balance; }
.yazi-ozet { max-width: 58ch; font-size: 1.2rem; color: var(--soluk); }
.yazi-foto { margin: clamp(32px, 4vw, 52px) 0 0; }
.yazi-foto img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 3px; }
.yazi-govde { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: clamp(44px, 6vw, 84px); }
.icindekiler { position: sticky; top: calc(var(--ust-boy) + 28px); }
.icindekiler h2 { margin-bottom: 14px; font: 600 0.78rem/1.3 var(--govde); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); }
.icindekiler ol { border-left: 1px solid var(--cizgi); }
.icindekiler a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 0.92rem; line-height: 1.35; color: var(--soluk); text-decoration: none; transition: color 0.2s, border-color 0.2s; }
.icindekiler a:hover { color: var(--metin); border-left-color: var(--isik); }
.yazi-metin { max-width: 70ch; font-size: 1.08rem; line-height: 1.7; }
.yazi-metin section + section { margin-top: clamp(40px, 5vw, 60px); }
.yazi-metin section > * + * { margin-top: 18px; }
.yazi-metin h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); scroll-margin-top: calc(var(--ust-boy) + 24px); }
.yazi-metin :is(p, li) { color: color-mix(in srgb, var(--metin) 84%, var(--gece)); }
.yazi-metin strong { color: var(--metin); }
.yazi-metin a { color: var(--sari); text-underline-offset: 3px; }
.yazi-metin ul li { position: relative; padding-left: 26px; }
.yazi-metin ul li + li { margin-top: 10px; }
/* Madde işareti: küçük bir LED çizgi */
.yazi-metin ul li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 14px; height: 2px; border-radius: 1px; background: var(--isik); box-shadow: 0 0 6px rgba(255, 228, 180, 0.6); }
.ipucu { padding: 18px 22px; background: var(--gece-2); border: 1px solid var(--cizgi); border-left: 2px solid var(--isik); border-radius: 3px; }
.tablo-kap { overflow-x: auto; }
.yazi-tablo { width: 100%; border-collapse: collapse; font-size: 0.98rem; line-height: 1.45; }
.yazi-tablo :is(th, td) { padding: 13px 16px 13px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cizgi); }
.yazi-tablo thead th { font-size: 0.82rem; font-weight: 500; color: var(--soluk); }
.yazi-tablo tbody th { font-weight: 600; color: var(--metin); }

/* ---------- alt kısım ---------- */

.alt { border-top: 1px solid var(--cizgi); background: var(--gece-2); }
.alt-ic { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; max-width: var(--genislik); margin: 0 auto; padding: 64px var(--kenar) 40px; }
.alt h2 { font: 600 0.95rem/1.3 var(--govde); color: var(--metin); margin-bottom: 14px; }
.alt ul li { margin-bottom: 8px; }
.alt a { text-decoration: none; color: var(--soluk); transition: color 0.2s; }
.alt a:hover { color: var(--metin); }
.alt address { font-style: normal; color: var(--soluk); line-height: 1.8; }
.alt-marka p { margin: 18px 0; max-width: 32ch; color: var(--soluk); font-size: 0.95rem; }
.alt-marka .logo { color: var(--metin); }
.sosyal { display: flex; gap: 10px; }
.sosyal a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--cizgi); border-radius: 50%; }
.sosyal svg { width: 20px; height: 20px; }
.telif { max-width: var(--genislik); margin: 0 auto; padding: 20px var(--kenar) 28px; color: var(--soluk); font-size: 0.85rem; border-top: 1px solid var(--cizgi); }

.wa-sabit {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s;
}
.wa-sabit svg { width: 30px; height: 30px; }
.wa-sabit:hover { transform: scale(1.06); }

/* ---------- ekran boyları ---------- */

@media (max-width: 1080px) {
  .yazi-govde { grid-template-columns: 1fr; }
  .icindekiler { position: static; padding: 20px 22px; background: var(--gece-2); border: 1px solid var(--cizgi); border-radius: 3px; }
  .menu { display: none; }
  .menu-ac { display: block; }
  .ust-sag { margin-left: auto; }
  .bolum-bas { grid-template-columns: 1fr; }
  .adimlar ol { grid-template-columns: repeat(2, 1fr); }
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .urun-grid, .iletisim, .katalog-bolum { grid-template-columns: 1fr; }
  .urun-galeri { position: static; }
  .degerler ul { grid-template-columns: repeat(2, 1fr); }
  .sekil-dizin { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
  .yazi-foto img { aspect-ratio: 4 / 3; }
  .yazi-ozet { font-size: 1.08rem; }
  .yazi-metin { font-size: 1.02rem; }
  .ust-ic { gap: 8px; }
  .ust-sag { gap: 8px; }
  .renk-sec { flex: none; margin-left: 0; position: static; }
  .renk-ac span { display: none; }
  .renk-ac { width: 44px; padding: 0; justify-content: center; }
  .renk-panel { position: fixed; top: var(--ust-boy); left: var(--kenar); right: var(--kenar); width: auto; max-height: calc(100svh - var(--ust-boy) - 16px); overflow-y: auto; }
  .logo { gap: 8px; }
  .logo-isaret { height: 30px; }
  .logo-yazi { height: 17px; }
  .ust-sag .dugme-kucuk span { display: none; }
  .ust-sag .dugme-kucuk { padding: 0; width: 44px; min-height: 44px; justify-content: center; }
  .js .suzgec-alan .suzgec { display: none; }
  .js .suzgec-mobil { display: flex; min-width: 0; }
  .suzgec-mobil label { color: var(--soluk); font-size: 0.9rem; }
  .suzgec-mobil select { min-width: 0; text-overflow: ellipsis; }
  .js .suzgec-durum { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; margin: 8px 0 24px; color: var(--soluk); font-size: 0.85rem; }
  .giris { grid-template-columns: 1fr; min-height: 0; }
  .giris-foto { order: -1; height: 62svh; min-height: 380px; }
  .giris-foto::after { background: linear-gradient(0deg, var(--gece) 2%, color-mix(in srgb, var(--gece) 0%, transparent) 50%), linear-gradient(180deg, color-mix(in srgb, var(--gece) 70%, transparent) 0%, color-mix(in srgb, var(--gece) 0%, transparent) 30%); }
  .giris-yazi { margin: -120px 0 0; padding: 0 var(--kenar) 24px; }
  .giris h1 { font-size: clamp(3.4rem, 17vw, 5.2rem); }
  .giris-cizgi { top: calc(var(--ust-boy) + 6px); }
  .secenek, .son-cagri { grid-template-columns: 1fr; }
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .kart a.kart-alt { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 10px; }
  .kart .sekil { width: 30px; height: 30px; }
  .kart-ad { font-size: 1.3rem; }
  .kart-olcu { font-size: 0.8rem; }
  .isik-sahne { aspect-ratio: 4 / 3; }
  .secenek { gap: 20px; }
  .secenek-yazi { display: contents; }
  .secenek .isik-sahne { order: 1; margin: -8px -16px; }
  .secenek .ozellik { order: 2; }
  .isik-durum { margin-top: -4px; }
  .logolar li { width: 156px; height: 96px; margin-right: 12px; padding: 16px; }
  .logolar img { max-height: 52px; }
  .logo-bant { padding-top: 84px; }
  .isik-sec button { padding: 12px; font-size: 1.35rem; }
  .ozellik div { grid-template-columns: 1fr; gap: 4px; }
  .adimlar ol { grid-template-columns: 1fr; gap: 36px; }
  .adimlar li { border-top: 0; border-left: 1px solid var(--cizgi); padding: 0 0 0 24px; }
  .adimlar li::after { left: 0; right: 0; top: -10px; height: 180px; background: radial-gradient(ellipse 70% 60% at 0% 30%, rgba(255, 236, 200, 0.12), transparent 75%); }
  .adim-cizgi { right: auto; bottom: 0; width: 2px; height: auto; transform-origin: center top; }
  .js .adim-cizgi { transform: scaleY(0); }
  .js .adim-alan.basla .adim-cizgi { transform: scaleY(1); }
  .alt-ic { grid-template-columns: 1fr; gap: 32px; }
  .urun-ana { aspect-ratio: 1; }
  .hakkinda { grid-template-columns: 1fr; }
  .sayilar dl { grid-template-columns: repeat(2, 1fr); }
  .degerler ul { grid-template-columns: 1fr; }
  .sekil-dizin { grid-template-columns: repeat(2, 1fr); }
  .form-iki { grid-template-columns: 1fr; }
  .harita { height: 320px; }
  .ozet-tablo td:nth-child(3) { display: none; }
  .ozet-tablo th[scope="row"] { font-size: 1.15rem; gap: 10px; }
  .ozet-tablo .sekil { width: 24px; height: 24px; }
  .katalog-kapak { max-width: 260px; }
  .isik-kutusu figure { padding: 64px 12px 24px; }
  .ik-onceki, .ik-sonraki { top: auto; bottom: 16px; transform: none; }
  .galeri { columns: 2; column-gap: 10px; }
  .galeri li { margin-bottom: 10px; }
  .galeri span { opacity: 1; font-size: 1.05rem; padding: 28px 10px 10px; }
}

/* Çok dar telefonlarda dil seçimi yalnızca açılır menüde kalır */
@media (max-width: 360px) {
  .ust-sag .dil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logolar, .proje-serit { animation: none !important; }
  .armatur-led::before { animation: none !important; opacity: 0.5; }
  .proje-bant { overflow-x: auto; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}

/* Deneme: girişte tanıtım videosu (8 saniyede bir başa döner) */
.giris-foto .giris-video { position: absolute; top: 0; bottom: 0; left: 3px; right: 0; width: calc(100% - 3px); height: 100%; object-fit: cover; }
/* Videoda karartma hafifler: sol kenarda yalnızca yazıya geçiş için ince bir geçiş, alt ve üstte çok hafif gölge */
.giris-foto:has(.giris-video)::after {
  background:
    linear-gradient(90deg, var(--gece) 0%, color-mix(in srgb, var(--gece) 35%, transparent) 9%, transparent 22%),
    linear-gradient(0deg, var(--gece) 0%, transparent 14%),
    linear-gradient(180deg, color-mix(in srgb, var(--gece) 45%, transparent) 0%, transparent 12%);
}
.giris-foto .giris-video { filter: brightness(1.12) contrast(1.05); }
@media (max-width: 760px) {
  .giris-foto:has(.giris-video)::after { background: linear-gradient(0deg, var(--gece) 0%, transparent 35%), linear-gradient(180deg, color-mix(in srgb, var(--gece) 50%, transparent) 0%, transparent 22%); }
}
/* Video girişinde zemin ve karışım rengi videonun siyahına yakın; en altta sayfanın lacivertine yumuşakça bağlanır */
.giris:has(.giris-video) { --giris-siyah: #07080b; background: linear-gradient(180deg, var(--giris-siyah) 0%, var(--giris-siyah) 82%, var(--gece) 100%); }
.giris-foto:has(.giris-video)::after {
  background:
    linear-gradient(90deg, var(--giris-siyah) 0%, color-mix(in srgb, var(--giris-siyah) 35%, transparent) 9%, transparent 22%),
    linear-gradient(0deg, var(--gece) 0%, transparent 14%),
    linear-gradient(180deg, color-mix(in srgb, var(--giris-siyah) 45%, transparent) 0%, transparent 12%);
}
@media (max-width: 760px) {
  /* Yatay video telefonda tam kadraj kalır; kapanış logosu kenarlardan kırpılmaz. */
  .giris-foto:has(.giris-video) { height: auto; min-height: 0; aspect-ratio: 16 / 9; margin-top: var(--ust-boy); }
  .giris-foto .giris-video { left: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .giris-foto:has(.giris-video)::after { background: none; }
  .giris:has(.giris-video) .giris-yazi { margin-top: 0; padding-top: 24px; }
}
/* Video kenarlarında çizgi kalmasın: alt ve sol geçiş biraz daha yumuşak */
@media (min-width: 761px) {
  .giris-foto:has(.giris-video)::after {
    background:
      linear-gradient(90deg, var(--giris-siyah) 0%, color-mix(in srgb, var(--giris-siyah) 55%, transparent) 10%, transparent 28%),
      linear-gradient(0deg, var(--gece) 0%, color-mix(in srgb, var(--gece) 60%, transparent) 10%, transparent 30%),
      linear-gradient(180deg, color-mix(in srgb, var(--giris-siyah) 45%, transparent) 0%, transparent 12%);
  }
}
/* Zemin tamamen siyah; laciverte geçiş girişin en altında, bütün genişlikte tek bir yumuşak şeritle yapılır */
.giris:has(.giris-video) { background: var(--giris-siyah); }
.giris:has(.giris-video)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, var(--gece)); }
@media (min-width: 761px) {
  .giris-foto:has(.giris-video)::after {
    background:
      linear-gradient(90deg, var(--giris-siyah) 0%, color-mix(in srgb, var(--giris-siyah) 55%, transparent) 10%, transparent 28%),
      linear-gradient(180deg, color-mix(in srgb, var(--giris-siyah) 45%, transparent) 0%, transparent 12%);
  }
}
/* Yazı bloğu sol bölümün içine alınır; video geniş alanını korur. */
@media (min-width: 761px) {
  .giris:has(.giris-video) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .giris:has(.giris-video) .giris-yazi {
    --giris-yazi-sol: max(clamp(72px, 9vw, 168px), calc((100vw - var(--genislik)) / 2 + var(--kenar) - clamp(0px, calc((100vw - 1440px) / 8), 120px)));
    width: calc(var(--giris-yazi-sol) + clamp(260px, 34vw, 480px));
    padding-left: var(--giris-yazi-sol);
    margin-right: 0;
  }
  .giris-foto .giris-video { object-position: 40% 50%; }
}

/* Model adları, seçili ürün fotoğrafıyla birlikte görünür. */
.urun-foto-adi { margin: 12px 0 18px; color: var(--metin); font-weight: 500; }
.urun-kucukler.isimli { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.urun-kucukler.isimli a { aspect-ratio: auto; height: 100%; opacity: 1; }
.urun-kucukler.isimli img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.urun-foto-etiket { display: block; padding: 8px 6px; font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.olcu-sema-listesi { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.olcu-sema-listesi a { display: block; }
.olcu-sema-listesi img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--yuzey); }
.olcu-sema-listesi span { display: block; margin-top: 10px; font-weight: 500; }
@media (max-width: 760px) { .olcu-sema-listesi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }


/* Katalog modelleri: ürün fotoğrafının üstünde ad, altında model seçici (site.js) */
.urun-ana-ad {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: calc(100% - 70px);
  padding: 6px 12px; border-radius: 3px; background: rgba(10, 15, 28, 0.82); color: #fff;
  font: 600 0.95rem/1.3 var(--govde); backdrop-filter: blur(6px);
}
.urun-ana.katalog { background: #fff; }
.urun-ana.katalog img { object-fit: contain; padding: 4%; }
.model-sec { margin-top: 18px; }
.model-sec-baslik { margin: 0 0 10px; font-weight: 600; }
.model-sec-baslik span { display: block; color: var(--soluk); font-size: 0.85rem; font-weight: 400; }
.model-sec ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.model-sec button {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 6px; border: 1px solid var(--cizgi); border-radius: 3px;
  background: transparent; color: var(--soluk); font: 500 0.8rem/1.2 var(--govde); cursor: pointer; transition: border-color 0.2s, color 0.2s, box-shadow 0.3s;
}
.model-sec button img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 2px; background: #fff; }
.model-sec button:hover { color: var(--metin); box-shadow: inset 0 0 0 1px var(--led-kenar), var(--led); }
.model-sec button[aria-pressed="true"] { color: var(--metin); border-color: var(--sari); box-shadow: inset 0 -2px 0 var(--sari); }
.teknik-model summary .tm-foto { width: 64px; height: 43px; object-fit: contain; flex: none; margin-right: 12px; border-radius: 2px; background: #fff; vertical-align: middle; }

/* Üst menüde Instagram: dil düğmesiyle aynı kutu */
.ust-ig svg { width: 18px; height: 18px; }
.ust-ig:hover { color: var(--metin); border-color: var(--led-kenar); box-shadow: var(--led); }