belizsamliart.com

Footer Links

links

Title

Sub Links

Image List

Link

Image

Cookie 

Cookie Content

Cookie Button Text

Show Cookie Bar

DescriptionPosition

discountPosition

Ikas Logo

Aspect Ratio

Object Fit

Konumunuza özel içerikleri görmek ve online alışveriş yapmak için               başka bir ülkeyi veya bölgeyi seçin.

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&amp;display=swap" rel="stylesheet">
    <title>Manifesto</title>
    <style>
      html, body { margin: 0; background: transparent; }
    </style>
  
  
    <katman-manifesto></katman-manifesto>

    <script>
      class KatmanManifesto extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({ mode: "open" });
          const root = document.createElement("div");
          root.innerHTML = `
            <style>
              :host {
                all: initial; /* dış CSS etkisini kes */
                display: block;
              }

              :host {
                --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
                --color: #000;

                /* Yatayda geniş, duyarlı sütun; ortada */
                --maxw: clamp(24rem, 92vw, 46rem);

                /* Üst boşluk neredeyse yok, yanal ped küçük */
                --pad-top: clamp(0px, 0.5vh, 8px);
                --pad-x: clamp(10px, 3vw, 24px);

                /* Küçük tipografi */
                --title: clamp(1.05rem, 1.4vw + 0.5rem, 1.45rem);
                --lead:  clamp(0.9rem,  1.0vw + 0.45rem, 1.05rem);
                --body:  clamp(0.86rem, 0.9vw + 0.45rem, 0.98rem);

                /* Sıkı dikey ritim ve dar aralıklar */
                --lh: 1.38;
                --gap-section: clamp(10px, 1.2vw, 14px);
                --gap-para:    clamp(6px, 0.9vw, 10px);

                /* Daha çok kelime için hafif negatif tracking */
                --tracking: -0.1px;

                --rise-distance: 18px;
                --rise-duration: 700ms;
              }

              /* Üstten başlasın; dikey ortalama YOK */
              .viewport {
                padding: var(--pad-top) var(--pad-x);
                background: none;
                box-sizing: border-box;
              }

              .card {
                width: 100%;
                max-width: var(--maxw);
                margin: 0 auto;                 /* yatayda ortala */
                color: var(--color);
                background: transparent;
                font-family: var(--font);
                line-height: var(--lh);
                text-align: center;              /* her şey ortalı */
                letter-spacing: var(--tracking);

                /* Açılış animasyonu: yukarı kayarak gel */
                opacity: 0;
                transform: translateY(var(--rise-distance));
                animation: rise-in var(--rise-duration) cubic-bezier(.2,.7,.2,1) forwards;
              }

              .title {
                margin: 0 0 var(--gap-section) 0; /* ÜSTTE MARJ YOK */
                font-size: var(--title);
                font-weight: 600;
                line-height: 1.12;
              }

              .lead {
                margin: 0 0 var(--gap-section) 0;
                font-size: var(--lead);
                font-weight: 400;
              }

              .section {
                margin: 0 0 var(--gap-section) 0;
                font-size: var(--body);
                font-weight: 400;
              }

              .section p { margin: 0 0 var(--gap-para) 0; }

              @keyframes rise-in {
                from { opacity: 0; transform: translateY(var(--rise-distance)); }
                to   { opacity: 1; transform: translateY(0); }
              }

              @media (prefers-reduced-motion: reduce) {
                .card { animation: none; opacity: 1; transform: none; }
              }
            </style>

            <main class="viewport" role="main" aria-label="Manifesto">
              <article class="card">
                <h1 class="title">MANİFESTO</h1>

                <p class="lead">Her eser, insanın iç dünyasına açılan bir yolculuktur.</p>

                <section class="section">
                  <p>Katman Serisi, hayatın görünmeyen derinliklerini, duyguların üst üste biriken izlerini ve her birimizin taşıdığı içsel hikâyeleri görünür kılar.</p>
                </section>

                <section class="section">
                  <p>Her katman; yaşanmışlık, keşif, kırılma, iyileşme ve dönüşümdür.</p>
                  <p>Kimi zaman akışına bıraktığımız, kimi zaman mücadele ettiğimiz duygular; renkler, formlar ve dokular aracılığıyla yüzeye çıkar.</p>
                </section>

                <section class="section">
                  <p>Bu seride hiçbir detay rastlantı değildir.</p>
                  <p>Her kıvrım bir dönemeçtir; her iz bir duygunun gölgesi; her renk, içimizde saklı bir sesin dışa vurumudur.</p>
                  <p>Yakından bakıldığında detayların taşıdığı derinlik, uzaktan bakıldığında bütünün uyumu görülür — tıpkı hayatta olduğu gibi.</p>
                </section>

                <section class="section">
                  <p><strong>Katmanlar bize hatırlatır:</strong></p>
                  <p>Hayat tek bir yüzeyden ibaret değildir.</p>
                  <p>Anlam, görünmeyen katmanlarda saklıdır.</p>
                  <p>Kendimize cesaretle yaklaştıkça, alt katmanlardaki hakikat ortaya çıkar.</p>
                </section>

                <section class="section">
                  <p>Bu seri; kabullenmenin, içsel dönüşümün, özgürleşmenin ve ruhun katman katman açılmasının sanat dilidir.</p>
                </section>
              </article>
            </main>
          `;
          this.shadowRoot.appendChild(root);
        }
      }

      customElements.define("katman-manifesto", KatmanManifesto);
    </script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kusursuz Galeri + Lightbox</title>
<style>
  :root{
    --gap:14px;
    --radius:16px;
    --card-bg:#fff;
    --shadow:0 6px 20px rgba(0,0,0,.08);
    --overlay: rgba(0,0,0,.6);
    --btn-bg: rgba(255,255,255,.95);
    --btn-fg:#111;
    --maxw:1600px;
  }
  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:#f7f7f7;color:#111;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:8px 10px 40px;}
  .title{font-weight:600;margin:10px 6px 18px;font-size:22px}

  /* Masonry container uses absolute children for perfect packing */
  #gallery{
    position:relative;
  }
  .card{
    position:absolute; /* placed by JS */
    width:100%;        /* real width set via transform/translate + width inline */
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--card-bg);
    box-shadow:var(--shadow);
    will-change:transform;
    transition: box-shadow .15s ease, transform .15s ease;
    cursor: zoom-in;
  }
  .card:hover{ transform: translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12); }
  .card img{
    display:block;width:100%;height:auto;
    user-select:none;-webkit-user-drag:none;background:#eaeaea;
  }

  /* Lightbox */
  #lightbox{
    position:fixed;inset:0;z-index:9999;display:none;
    align-items:center;justify-content:center;
    background:var(--overlay);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    padding:24px;
  }
  #lightbox[aria-hidden="false"]{ display:flex; }
  .lb-figure{ position:relative; display:grid; place-items:center; max-width:min(94vw,1200px); max-height:92vh; }
  .lb-figure img{
    max-width:100%; max-height:92vh; background:#111; border-radius:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.35); transition: transform .15s ease;
  }
  .lb-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px;height:44px;border:0;border-radius:999px;display:grid;place-items:center;
    font-size:20px;background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 6px 16px rgba(0,0,0,.25);cursor:pointer;
  }
  .lb-prev{ left:-56px; }
  .lb-next{ right:-56px; }
  .lb-close{
    position:absolute; top:-56px; right:0;
    width:40px;height:40px;border:0;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 6px 16px rgba(0,0,0,.25);
    font-size:18px;cursor:pointer;
  }
  .lb-counter{
    position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
    color:#fff; font-size:13px; opacity:.85;
  }
  @media (max-width:780px){
    .lb-prev{ left:8px; }
    .lb-next{ right:8px; }
    .lb-close{ top:8px; right:8px; }
    .lb-counter{ bottom:8px; }
  }
</style>


  <div class="wrap">
    <div class="title">Galeri</div>
    <div id="gallery" aria-live="polite"><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/2c9fb881-6de9-4481-a8ee-1f6eec44770d/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 1" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/b7e3b4f6-7281-4aaa-8b88-d8d6afc5d450/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 2" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/708ca14d-1e0c-4fd2-91eb-02f947dd5b50/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 3" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/5120c16a-b0d4-444b-9851-86674fc5fb56/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 4" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/6d54cd6a-d95e-4728-ae19-255531e4ee7f/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 5" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/5eceafc9-75ab-4ec4-bd4d-69570b5dd2d6/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 6" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/e7df3930-612b-4ff2-941b-05365c0f9344/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 7" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/c54dbfc6-7668-4d9f-8852-ec677256d23d/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 8" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/1149438a-2669-4afb-badf-2d67aee0e3b4/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 9" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/c1e49b91-dad8-46ef-ac36-e9f1d22f431e/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 10" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/2e409da5-5733-495e-8fae-e3f7740bf7e9/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 11" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/a034e4bb-f651-471a-acac-1ebb57ed8ac0/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 12" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/a47cf4d2-cb97-4b34-a505-7319430e658c/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 13" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/46d09acf-98ca-45e9-a6f8-e3643cb4279c/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 14" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/0b7a1142-7ae2-4cdf-99f8-7417e6932032/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 15" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/57359c99-3350-4a63-8784-8a335f181d08/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 16" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/4523b7ce-1f77-45e4-81fa-aa22cc72ae59/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 17" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/71e09f0f-7acb-4c68-93dc-3b0154d655ff/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 18" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/e9eda582-82a9-4ff4-81b5-8435352a6eb5/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 19" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/c73962e4-4aec-46f5-a2d3-a25179fb6b5b/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 20" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/7495b734-53b8-4f34-9c76-25cb26f2a3b3/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 21" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/53484225-5075-4aae-8051-99a9cd5a13c7/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 22" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/71e4d5f6-0025-4c0d-a808-ae0a9897867f/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 23" loading="lazy" decoding="async"></a><a class="card" href="https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/44efe87a-100e-4e89-babb-5b1ce01da359/image_1080.webp" aria-label="Görseli büyüt"><img alt="Fotoğraf 24" loading="lazy" decoding="async"></a></div>
  </div>

  
  <div id="lightbox" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Büyük Görsel">
    <div class="lb-figure">
      <button class="lb-btn lb-prev" id="lb-prev" aria-label="Önceki (←)" title="Önceki (←)">←</button>
      <img id="lb-image" alt="Büyük görsel">
      <button class="lb-btn lb-next" id="lb-next" aria-label="Sonraki (→)" title="Sonraki (→)">→</button>
      <button class="lb-close" id="lb-close" aria-label="Kapat (ESC)" title="Kapat (ESC)">✕</button>
      <div class="lb-counter" id="lb-counter"></div>
    </div>
  </div>

<script>
(function(){
  /* ===== CONFIG ===== */
  const GAP = 14; // px
  const BREAKPOINTS = { mobile: 640, tablet: 1024, large: 1400 }; // widths
  const images = [
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/2c9fb881-6de9-4481-a8ee-1f6eec44770d/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/b7e3b4f6-7281-4aaa-8b88-d8d6afc5d450/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/708ca14d-1e0c-4fd2-91eb-02f947dd5b50/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/5120c16a-b0d4-444b-9851-86674fc5fb56/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/6d54cd6a-d95e-4728-ae19-255531e4ee7f/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/5eceafc9-75ab-4ec4-bd4d-69570b5dd2d6/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/e7df3930-612b-4ff2-941b-05365c0f9344/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/c54dbfc6-7668-4d9f-8852-ec677256d23d/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/1149438a-2669-4afb-badf-2d67aee0e3b4/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/c1e49b91-dad8-46ef-ac36-e9f1d22f431e/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/2e409da5-5733-495e-8fae-e3f7740bf7e9/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/a034e4bb-f651-471a-acac-1ebb57ed8ac0/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/a47cf4d2-cb97-4b34-a505-7319430e658c/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/46d09acf-98ca-45e9-a6f8-e3643cb4279c/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/0b7a1142-7ae2-4cdf-99f8-7417e6932032/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/57359c99-3350-4a63-8784-8a335f181d08/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/4523b7ce-1f77-45e4-81fa-aa22cc72ae59/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/71e09f0f-7acb-4c68-93dc-3b0154d655ff/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/e9eda582-82a9-4ff4-81b5-8435352a6eb5/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/c73962e4-4aec-46f5-a2d3-a25179fb6b5b/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/7495b734-53b8-4f34-9c76-25cb26f2a3b3/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/53484225-5075-4aae-8051-99a9cd5a13c7/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/71e4d5f6-0025-4c0d-a808-ae0a9897867f/image_1080.webp",
    "https://cdn.myikas.com/images/48af60c9-2b4c-4124-bb10-94cf105c438a/44efe87a-100e-4e89-babb-5b1ce01da359/image_1080.webp"
  ];

  /* ===== DOM refs ===== */
  const $gallery = document.getElementById("gallery");
  const $lb = document.getElementById("lightbox");
  const $lbImg = document.getElementById("lb-image");
  const $lbPrev = document.getElementById("lb-prev");
  const $lbNext = document.getElementById("lb-next");
  const $lbClose = document.getElementById("lb-close");
  const $lbCounter = document.getElementById("lb-counter");

  /* ===== State ===== */
  let items = [];      // {el, w, h, ratio}
  let current = -1;    // lightbox index
  let colCount = 0;
  let containerWidth = 0;

  /* ===== Helpers ===== */
  const clamp = (n,min,max)=>Math.max(min,Math.min(max,n));

  function getColumnCount(){
    const w = $gallery.clientWidth || window.innerWidth;
    if (w <= BREAKPOINTS.mobile) return 2;
    if (w <= BREAKPOINTS.tablet) return 3;
    if (w <= BREAKPOINTS.large) return 4;
    return 5;
  }

  function createCard(src, index){
    const card = document.createElement("a");
    card.className = "card";
    card.href = src;
    card.setAttribute("aria-label", "Görseli büyüt");
    card.addEventListener("click", (e)=>{ e.preventDefault(); open(index); });

    const img = document.createElement("img");
    img.alt = `Fotoğraf ${index+1}`;
    img.loading = "lazy";
    img.decoding = "async";
    // Lazy assign with IO
    card.appendChild(img);

    // Placeholder ratio guess until load (square)
    const data = { el: card, img, ratio: 1, index };
    items.push(data);

    return card;
  }

  /* Lazy load via IntersectionObserver */
  const io = new IntersectionObserver((entries)=>{
    entries.forEach(entry=>{
      if (entry.isIntersecting){
        const img = entry.target;
        const src = img.parentElement.href;
        if (!img.dataset.loaded){
          img.src = src;
          img.dataset.loaded = "1";
        }
        io.unobserve(img);
      }
    });
  }, { root: null, rootMargin: "400px 0px", threshold: 0.01 });

  function build(){
    $gallery.innerHTML = "";
    items = [];
    images.forEach((src, i)=>{
      const card = createCard(src, i);
      $gallery.appendChild(card);
    });
    // Observe all imgs
    items.forEach(it=> io.observe(it.el.querySelector("img")));
    // Attach onload to compute real ratios then layout again
    $gallery.querySelectorAll("img").forEach((img, i)=>{
      img.addEventListener("load", ()=>{
        const it = items[i];
        if (!it) return;
        // natural sizes can be 0 for webp in some browsers until decoded; guard it.
        const nw = img.naturalWidth || 1080;
        const nh = img.naturalHeight || 1080;
        it.ratio = nh / nw;
        layout(); // recalculation after each image
      }, { once:false });
    });
  }

  function layout(force=false){
    const newCols = getColumnCount();
    const w = $gallery.clientWidth;
    if (!force && newCols === colCount && Math.abs(w - containerWidth) < 1) return;

    colCount = newCols;
    containerWidth = w;

    const colWidth = (w - GAP*(colCount-1)) / colCount;
    const heights = new Array(colCount).fill(0);

    items.forEach(it=>{
      const targetCol = heights.indexOf(Math.min(...heights));
      const x = targetCol * (colWidth + GAP);
      const h = Math.round(colWidth * (it.ratio || 1));
      const y = heights[targetCol];

      // Apply size and position
      it.el.style.width = colWidth + "px";
      it.el.style.transform = `translate(${x}px, ${y}px)`;

      heights[targetCol] = y + h + GAP;
    });

    // Set container height
    const maxH = Math.max(...heights, 0);
    $gallery.style.height = (maxH > 0 ? maxH - GAP : 0) + "px";
  }

  /* ===== Lightbox ===== */
  function lockBody(lock){
    document.documentElement.style.overflow = lock ? "hidden" : "";
    document.body.style.overflow = lock ? "hidden" : "";
  }
  function open(i){
    current = clamp(i,0,images.length-1);
    $lbImg.src = images[current];
    $lb.setAttribute("aria-hidden","false");
    $lbCounter.textContent = `${current+1} / ${images.length}`;
    $lbClose.focus();
    lockBody(true);
  }
  function close(){
    $lb.setAttribute("aria-hidden","true");
    current = -1;
    lockBody(false);
  }
  function next(){ if(current<0) return; current = (current+1) % images.length; $lbImg.src = images[current]; $lbCounter.textContent = `${current+1} / ${images.length}`; }
  function prev(){ if(current<0) return; current = (current-1+images.length) % images.length; $lbImg.src = images[current]; $lbCounter.textContent = `${current+1} / ${images.length}`; }

  $lbNext.addEventListener("click", next);
  $lbPrev.addEventListener("click", prev);
  $lbClose.addEventListener("click", close);
  $lb.addEventListener("click", (e)=>{ if (e.target === $lb) close(); });

  window.addEventListener("keydown",(e)=>{
    if ($lb.getAttribute("aria-hidden")==="true") return;
    if (e.key === "Escape") close();
    if (e.key === "ArrowRight") next();
    if (e.key === "ArrowLeft") prev();
  });

  // Swipe in lightbox
  let startX=0, startY=0, swiping=false;
  const THRESH=60;
  function onStart(e){
    if($lb.getAttribute("aria-hidden")==="true") return;
    const t = e.touches ? e.touches[0] : e;
    startX = t.clientX; startY = t.clientY; swiping = true; $lbImg.style.transition="none";
  }
  function onMove(e){
    if(!swiping) return;
    const t = e.touches ? e.touches[0] : e;
    const dx = t.clientX - startX, dy = t.clientY - startY;
    if (Math.abs(dx) > Math.abs(dy)){ e.preventDefault(); $lbImg.style.transform = `translateX(${dx}px)`; }
  }
  function onEnd(e){
    if(!swiping) return; swiping=false;
    const t = e.changedTouches ? e.changedTouches[0] : e;
    const dx = t.clientX - startX;
    $lbImg.style.transition="transform .15s ease";
    if (dx > THRESH){ $lbImg.style.transform="translateX(100%)"; setTimeout(()=>{ prev(); $lbImg.style.transform="translateX(0)"; }, 120); }
    else if (dx < -THRESH){ $lbImg.style.transform="translateX(-100%)"; setTimeout(()=>{ next(); $lbImg.style.transform="translateX(0)"; }, 120); }
    else { $lbImg.style.transform="translateX(0)"; }
  }
  $lb.addEventListener("touchstart", onStart, { passive:false });
  $lb.addEventListener("touchmove", onMove, { passive:false });
  $lb.addEventListener("touchend", onEnd, { passive:true });

  /* ===== Init ===== */
  build();
  // layout when fonts ready and after a tick to ensure widths
  window.addEventListener("load", ()=>layout(true));
  let t; window.addEventListener("resize",()=>{ clearTimeout(t); t=setTimeout(()=>layout(true),120); }, {passive:true});
  window.addEventListener("orientationchange", ()=>layout(true));
})();
</script>

<p>Während deines Besuchs werden deine persönlichen Daten mithilfe von Cookies verarbeitet, um deine Nutzung der Website zu analysieren, Werbung zu personalisieren und Social-Media-Funktionen bereitzustellen. Für weitere Informationen kannst du unsere Cookie-Richtlinien lesen.</p>

Wähle ein anderes Land oder eine andere Region, um standortspezifische Inhalte zu sehen.

kostenloser Versand ab einem Bestellwert von 100€

<p>During your visit, your personal data is processed through cookies to analyze your use of the site, personalize advertisements and provide social media features. For more information, you can read our Cookie-Policy.</p>

Select another country or region to see location-specific content.

Free shipping for purchases of 100€ and over

<p>Ziyaretiniz sırasında kişisel verileriniz siteyi kullanımınızı analiz etmek, reklamları kişiselleştirmek ve sosyal medya özellikleri sağlamak amacıyla çerezler aracılığıyla işlenmektedir. Daha fazla bilgi için <strong>Çerez Aydınlat Metni’ni</strong> okuyabilirsiniz.</p>

Aydınlatma Metinleri

İletişim Bilgileri

Yardım