/* ==========================================================================
   LOKA STUDIO FOOD — CRISPIN LONDON 1:1 REPLICA SYSTEM
   Exact Typography:
     - semplicitapro, sans-serif (Headings)
     - Inconsolata, monospace (Body & Location)
     - Helvetica Neue, Segoe UI, Arial, sans-serif (H1)
     - Arial, sans-serif (Body fallback)
     - Charter, Impact, sans-serif (Charter)
   Layout: 100vw x 100vh 4-Column Monolith Viewport (Zero Header/Footer)
   Text Position: Üst %13'ten Başlayan Kompakt Dikey Blok (Screenshot Birebir)
   Hover Effect: Üstüne Gelince SADECE O Panel Siyah-Beyaz (Grayscale) Olur ve Gölge İner
   ========================================================================== */

/* 1. Semplicita Pro Font (@font-face: Remote CDN + Local Fallbacks) */
@font-face {
  font-family: 'semplicitapro';
  src: url('https://db.onlinewebfonts.com/t/d5f93e1b825e0f1729dc143050cadf84.woff2') format('woff2'),
       url('../fonts/semplicitapro-bold.woff2') format('woff2');
  font-weight: 600 700 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'semplicitapro';
  src: url('https://db.onlinewebfonts.com/t/81c243c84afda2f4f48b03f80476e2be.woff2') format('woff2'),
       url('../fonts/semplicitapro-medium.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* 2. Inconsolata (Google Fonts Webfont) */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&display=swap');

/* CSS Sıfırlama */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000000;
  font-family: Arial, sans-serif;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 100vh Tam Ekran Kapsayıcı */
.crispin-exact-viewport {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000000;
}

/* 4 Dikey Sütun (Her Biri Tam Boy Link) */
.crispin-column {
  position: relative;
  flex: 1;
  height: 100%;
  text-decoration: none;
  color: #ffffff;
  overflow: hidden;
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.crispin-column:last-child {
  border-right: none;
}

/* Arka Plan Görselleri: Başlangıçta 4'ü de Doğal Canlı Renklidir (Scale/Zoom Asla Yok) */
.col-image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  filter: grayscale(0%);
  transition: filter 0.35s ease;
  z-index: 1;
  transform: none !important;
}

/* Gölge Katmanı (Overlay) */
.col-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.14); /* İlk açılışta çok hafif doğal gölge */
  transition: background 0.35s ease;
  z-index: 2;
}

/* ==========================================================================
   BİREBİR CRISPIN LONDON HOVER EFEKTİ:
   Üstüne gelinen sütun SİYAH-BEYAZ (GRAYSCALE) olur ve üzerine gölge iner!
   Diğer sütunlar renkli kalmaya devam eder.
   ========================================================================== */

.crispin-column:hover .col-image-layer {
  filter: grayscale(100%) contrast(108%);
}

.crispin-column:hover .col-overlay {
  background: rgba(0, 0, 0, 0.38); /* Ekran görüntüsündeki zarif koyu gölge */
}

/* ==========================================================================
   METİN KONUMU VE TİPOGRAFİ HİZALAMASI (SCREENSHOT BİREBİR)
   Metinler ekranın ortasında değil; tam üst %13 hizasından başlar.
   ========================================================================== */

.col-content-box {
  position: absolute;
  top: 13vh; /* Üstten tam Crispin London seviyesi */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}

/* Ana Başlık (C R I S P I N / L O K A: Raleway 300, Geniş Spacing, Light) */
.main-title {
  font-family: 'Raleway', 'semplicitapro', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.85rem, 2.3vw, 2.7rem);
  font-weight: 300;
  letter-spacing: 0.42em;
  margin-right: -0.42em; /* Letter-spacing optik merkezleme */
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 3.2rem; /* Başlık ile açıklama arasındaki mesafe */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

/* 1. Panel İçin STUDIO FOOD Başlığı */
.main-title-studio {
  font-family: 'Raleway', 'semplicitapro', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.28rem, 1.7vw, 2.05rem);
  font-weight: 300;
  letter-spacing: 0.30em;
  margin-right: -0.30em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

/* Başlık Altındaki Küçük Yazı (AT STUDIO VOLTAIRE / EVENTS + CATERING) */
.title-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  min-height: clamp(66px, 7.8vw, 90px); /* Tüm sütunlarda başlık alanı eşit yükseklik */
  margin-bottom: 3.2rem;
}

.title-stacked .main-title {
  margin-bottom: 0;
  height: clamp(38px, 4.4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Ana Başlık İçin El Çizimi LOKA Logo (Crispin Stili) */
.main-title-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  height: clamp(38px, 4.4vw, 52px); /* .main-title ile piksel piksel aynı yükseklik */
  line-height: 1;
}

.loka-logo-img {
  width: auto;
  height: clamp(38px, 4.4vw, 52px);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65));
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  display: block;
}

.studio-food-logo-img {
  width: auto;
  height: clamp(32px, 3.8vw, 44px);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65));
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  display: block;
}

.sub-title {
  font-family: 'Raleway', 'semplicitapro', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(0.72rem, 0.86vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-right: -0.22em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  line-height: 1;
}

/* 3. Paneldeki El Çizimi Logo (BAR CRISPIN Birebir Formatı) */
.bar-logo-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3.2rem;
  line-height: 1;
}

.bar-loka-img {
  width: auto;
  height: clamp(32px, 4.0vw, 46px);
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  user-select: none;
  object-fit: contain;
}

/* Gövde Metni (Inconsolata, monospace, 2 Satır - Eşit Yükseklik & Dikey Hizalama) */
.body-desc {
  font-family: Inconsolata, monospace;
  font-size: clamp(1.02rem, 1.15vw, 1.22rem);
  font-weight: 400;
  line-height: 1.45;
  color: #ffffff;
  min-height: clamp(52px, 5.8vw, 72px); /* Tüm panellerde açıklama alanı eşit yükseklik */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 0 3.2rem 0; /* Açıklama ile konum arasındaki mesafe */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.01em;
  text-align: center;
}

/* Konum Metni (Inconsolata, monospace) */
.location-label {
  font-family: Inconsolata, monospace;
  font-size: clamp(1rem, 1.12vw, 1.2rem);
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}

/* H1 System font (4 rules) */
h1 {
  font-family: 'Helvetica Neue', Segoe UI, Arial, sans-serif;
}

/* Charter (1 rule) */
.font-charter {
  font-family: Charter, Impact, sans-serif;
}

/* ==========================================================================
   MOBİL VE TABLET UYUMLULUĞU (BİREBİR CRISPIN LONDON 2x2 GRID DÜZENİ)
   Mobilde tek sütun alt alta akmaz; tam olarak 2x2 ızgara (50vw x 50vh) olur!
   ========================================================================== */

@media (max-width: 820px) {
  html, body {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }

  /* 2 Sütun x 2 Satır Tam Ekran Izgara */
  .crispin-exact-viewport {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .crispin-column {
    width: 100%;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  /* 2. ve 4. sütunların (sağdaki hücreler) sağ kenarlığını kaldır */
  .crispin-column:nth-child(2),
  .crispin-column:nth-child(4) {
    border-right: none;
  }

  /* 3. ve 4. sütunların (alttaki hücreler) alt kenarlığını kaldır */
  .crispin-column:nth-child(3),
  .crispin-column:nth-child(4) {
    border-bottom: none;
  }

  /* Her 50vh hücre içindeki metin konumu (Üstten %8 hizasında) */
  .col-content-box {
    top: 8%;
    width: 92%;
    max-width: 92%;
    padding: 0 0.35rem;
  }

  /* Mobilde Başlıklar */
  /* 1. Panel İçin STUDIO FOOD Başlığı */
.main-title-studio {
  font-size: clamp(0.82rem, 3.4vw, 1.15rem);
  letter-spacing: 0.16em;
  margin-right: -0.16em;
  white-space: nowrap;
}

.main-title {
    font-size: clamp(1.1rem, 4.4vw, 1.4rem);
    font-weight: 300;
    letter-spacing: 0.38em;
    margin-right: -0.38em;
    margin-bottom: 1.25rem;
  }

  .title-stacked {
    min-height: auto;
    margin-bottom: 1.25rem;
    gap: 0.25rem;
  }

  .title-stacked .main-title,
  .main-title-logo {
    height: clamp(24px, 5.5vw, 32px);
    margin: 0;
    line-height: 1;
  }

  .loka-logo-img {
    height: clamp(20px, 4.8vw, 28px);
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.65));
  }

  .studio-food-logo-img {
    height: clamp(17px, 4.0vw, 23px);
    filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.65));
  }

  .sub-title {
    font-size: clamp(0.48rem, 1.8vw, 0.62rem);
  
    margin-right: -0.16em;
  }

  /* Mobilde BAR LOKA El Çizimi Logo */
  .bar-logo-title {
    margin-bottom: 1.25rem;
  }

  .bar-loka-img {
    height: clamp(18px, 4.4vw, 24px);
  }

  /* Mobilde Açıklama Metni */
  .body-desc {
    font-size: clamp(0.68rem, 2.5vw, 0.82rem);
    line-height: 1.3;
    margin: 0 0 1.25rem 0;
  }

  /* Mobilde Konum Metni */
  .location-label {
    font-size: clamp(0.68rem, 2.5vw, 0.82rem);
  }
}