/* ======================= KEYPAD STYLES - BASIC, OPTIMIZE & OPEN COMMENTED =======================
   Bu stylesheet, platforma özgü tuş stilleriyle birlikte, ana tuş takımı düzeni ve görünümü içerir.
   Siyah kalmasını önlemek ve rengi kolay değiştirmek için optimize edilmiştir.
=============================================================================================== */

/* ==== 1. KEY-SPECIFIC (PLATFORM) STYLES ==== */
@layer keys {
  /* Tüm [data-key] öğeleri gizli, sadece ilgili platformda gösterilecek */
  [data-key] {
    display: none;
    position: absolute;
    inset: 0;
    place-items: center;
  }
  /* Vektör ikonlar için boyut ayarı */
  .keypad-container [data-key] svg { width: 50%; }
  /* Resimlerin tıklanmasını engelle */
  .keypad-container img { pointer-events: none; }

  /* =========== Platforma Özgü Tuş Ayarları =========== */

  /* Gemini platformu: #one tuşunun görsel ayarları ve yazı rengi */
  [data-platform='gemini'] #one img {
    --brightness: 1.4;
    --saturate: 0.4;
    --hue: 330;
  }
  [data-platform='gemini'] #one .key__text { color: hsl(214, 81%, 100%); }

  /* Claude platformu: #one tuşunun görsel ayarları ve yazı rengi */
  [data-platform='claude'] #one img {
    --brightness: 0.6;
    --saturate: 0;
  }
  [data-platform='claude'] #one .key__text { color: #d97757; }

  /* Perplexity platformu: #one tuşunun görsel ayarları ve yazı rengi */
  [data-platform='perplexity'] #one img {
    --hue: 280;
    --brightness: 0.8;
    --saturate: 1.2;
  }
  [data-platform='perplexity'] #one .key__text { color: #fff; }

  /* Arch platformu: Tuş resimlerini gizle */
  [data-platform='arch'] .key img {
    display: none;
  }

  /* MacOS platformu: #one tuşunun yazı rengi ve boyutu, görsel ayarı */
  [data-platform='macos'] #one .key__text {
    color: #fff;
    font-size: 22cqi;
  }
  [data-platform='macos'] #one img {
    --saturate: 0;
    --brightness: 0.6;
  }

  /* Sadece aktif platformun tuşu görünür olsun */
  [data-platform='macos'] [data-key='macos'],
  [data-platform='perplexity'] [data-key='perplexity'],
  [data-platform='claude'] [data-key='claude'],
  [data-platform='gemini'] [data-key='gemini'],
  [data-platform='arch'] [data-key='arch'] {
    display: grid;
  }
}

/* ==== 2. ANA KEYPAD STİLLERİ ==== */
@layer demo {
  .keypad {
    position: relative;
    aspect-ratio: 400 / 310;     /* 400x310 oranında */
    display: flex;
    place-items: center;
    width: 100%;                 /* Responsive */
    -webkit-tap-highlight-color: #0000;
    transition-property: translate, transform;
    transition-duration: 0.26s;
    transition-timing-function: ease-out;
    transform-style: preserve-3d;
    scale: 1;
  }
  .keypad .key {
    transform-style: preserve-3d;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline: none;
  }
  /* Tuş basılınca içerik aşağı iner */
  .keypad .key[data-pressed='true'] .key__content,
  .keypad .key:active .key__content {
    translate: 0 calc(var(--travel, 20) * 1%);
  }
  /* Tuşların konumları */
  .keypad #one   { left: 13.5%; bottom: 57.2%; }
  .keypad #two   { left: 25.8%; bottom: 48.5%; }
  .keypad #three { left: 38%;   bottom: 39.2%; }
  .keypad #four  { left: 50.4%; bottom: 30.2%; }
  .keypad #five  { left: 62.7%; bottom: 21%; }

  /* #five tuşunun genel reset'i */
  .keypad #five .key__text {
    font-size: inherit;
    color: inherit;
    -webkit-text-stroke: 0;
    filter: none;
  }

  /* ARCH platformu #five tuşu: daha küçük ve koyu renkli */
  .keypad-container[data-platform="arch"] .keypad #five .key__text {
    font-size: 12px !important;
    color: #000000 !important;
    width: 100%;
    height: 100%;
    translate: 0 0;
    transform: none;
  }

  /* ==== Ana tuş yazı stili (kolayca değiştirilebilir) ==== */
  .keypad .key__text {
    width: 52%;
    height: 62%;
    position: absolute;
    font-size: 18cqi;
    z-index: 21;
    top: 5%;
    left: 0;
    mix-blend-mode: normal;
    color: #000000; /* Kolayca değiştirilebilir ana renk */
    translate: 45% -16%;
    transform: rotateX(36deg) rotateY(45deg) rotateX(-90deg) rotate(0deg);
    display: grid;
    place-items: center;
  }

  /* Key content container */
  .keypad .key__content {
    width: 100%;
    display: inline-block;
    height: 100%;
    transition: translate 0.12s ease-out;
    container-type: inline-size;
  }

  /* Tekli tuşun maskesi ve resmi */
  .keypad .keypad__single {
    position: absolute;
    width: 21%;
    left: 54%;
    bottom: 36%;
    height: 24%;
    clip-path: polygon(0 0, 54% 0, 89% 24%, 100% 70%, 54% 100%, 46% 100%, 0 69%, 12% 23%, 47% 0%);
    mask: url(https://assets.codepen.io/605876/keypad-single.png?format=auto&quality=86) 50% 50% / 100% 100%;
  }
  
  /* ARCH Platformu için override: Maskeyi kaldır ve arka planı gri yap */
  .keypad-container[data-platform="arch"] .key.keypad__single {
    background-color: #e0e0e0;
    mask: none;
  }

  .keypad .keypad__single img {
    --brightness: 2;
    --saturate: 0;
    top: 0;
    opacity: 1;
    width: 96%;
    position: absolute;
    left: 50%;
    translate: -50% 1%;
  }
  .keypad .key__mask {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  /* Görsel filtreler: platformdan gelen değişkenlerle oynanabilir */
  .keypad .key img {
    filter: hue-rotate(calc(var(--hue, 0) * 1deg)) saturate(var(--saturate, 1)) brightness(var(--brightness, 1));
  }
  /* Taban görüntüsü */
  .keypad .keypad__base {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .keypad .keypad__base img { width: 100%; }
}

/* ======================= KULLANIM NOTU =======================
   .keypad .key__text içindeki color değerini kolayca değiştirin.
   Platforma özel tuş rengi gerekirse, en sona daha spesifik bir selector ekleyin.
   !important sadece override gerekiyorsa kullanın.
===================================================
*/