Nazar Boncuğu 1: CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Nazar Boncuğu 1: CSS</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    background: #000000;
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    font-family: 'Inter', system-ui, 'Segoe UI', 'Georgia', serif;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #f0f0f0 #1a1a1a;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
  }

  .sidebar {
    width: 280px;
    background: #000000;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 2rem 1.5rem;
    gap: 1.8rem;
    border-right: 1px solid #2a2a2a;
    font-family: 'Inter', system-ui, sans-serif;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.6);
    z-index: 10;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #f0f0f0 #1a1a1a;
  }

  .sidebar::-webkit-scrollbar-track {
    background: #0a0a0a;
  }
  .sidebar::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 10px;
  }
  .sidebar::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
  }

  .sidebar-header {
    border-bottom: 1px solid #2c2c2c;
    padding-bottom: 1rem;
  }

  .sidebar-header h3 {
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #f5f0e8;
    margin-bottom: 0.3rem;
    font-family: 'Georgia', serif;
  }

  .sidebar-header p {
    font-size: 0.7rem;
    color: #c0c0c0;
    letter-spacing: 1px;
  }

  .control-group {
    margin-bottom: 0.5rem;
  }

  .control-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #b8a87c;
    margin-bottom: 0.7rem;
    border-left: 2px solid #f5c842;
    padding-left: 0.6rem;
  }

  .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
  }

  .ctrl-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #2e2e2e;
    color: #f0f0f0;
    padding: 0.45rem 1rem;
    border-radius: 40px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    backdrop-filter: blur(2px);
  }

  .ctrl-btn:hover {
    background: rgba(245, 200, 66, 0.2);
    border-color: #f5c842;
    transform: translateY(-1px);
  }

  .ctrl-btn.active {
    background: #f5c842;
    color: #000000;
    border-color: #f5c842;
    font-weight: 600;
  }

  .separator {
    height: 1px;
    background: linear-gradient(90deg, #2a2a2a, #555, #2a2a2a);
    margin: 0.5rem 0;
  }

  .sidebar-footer {
    margin-top: auto;
    font-size: 0.65rem;
    text-align: left;
    padding-top: 1rem;
    border-top: 1px solid #1e1e1e;
    color: #7a7a7a;
  }

  .scene {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #2a0e50 0%, #0d0520 70%);
    min-height: 100vh;
    position: relative;
    padding: 40px 30px;
    font-family: Georgia, serif;
  }

  .eye-wrap {
    position: relative;
    width: 220px;
    height: 220px;
  }

  .ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #1a3a8f;
    animation: glow-pulse 3s ease-in-out infinite;
  }

  .ring-white {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #f5f0e8;
  }

  .ring-inner {
    position: absolute;
    inset: 50px;
    border-radius: 50%;
    background: #2a4fcf;
  }

  .pupil {
    position: absolute;
    border-radius: 50%;
    background: #0a0a18;
    transition: inset 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    inset: 72px;
  }

  .pupil::after {
    content: '';
    position: absolute;
    top: 16%;
    left: 20%;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
  }

  .eyelid {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #0d0520;
    pointer-events: none;
    z-index: 10;
    transform: scaleY(0);
    transform-origin: 50% 50%;
  }

  @keyframes blinkCurtain {
    0% { transform: scaleY(0); }
    20% { transform: scaleY(1); }
    80% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
  }

  .dots-ring {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    animation: spin-slow 20s linear infinite;
  }

  .dots-ring.reverse {
    animation-direction: reverse;
  }

  .dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5c842;
    transform-origin: 124px 124px;
  }

  .teardrop {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 28px;
    background: #1a3a8f;
    border-radius: 50% 50% 60% 60% / 40% 40% 60% 60%;
    box-shadow: 0 0 8px rgba(26, 58, 143, 0.5);
    transition: all 0.2s;
  }

  .teardrop.pulse {
    animation: dripGlow 1.2s ease-in-out infinite;
  }

  @keyframes dripGlow {
    0% { transform: translateX(-50%) scale(1); background: #1a3a8f; box-shadow: 0 0 8px rgba(26,58,143,0.5); }
    50% { transform: translateX(-50%) scale(1.15); background: #f5c842; box-shadow: 0 0 18px #f5c842; }
    100% { transform: translateX(-50%) scale(1); background: #1a3a8f; box-shadow: 0 0 8px rgba(26,58,143,0.5); }
  }

  .mode-fire .ring-outer {
    background: #c24e00;
    animation: glow-pulse-fire 1.4s ease-in-out infinite;
  }
  .mode-fire .ring-inner {
    background: #ff7b2c;
  }
  .mode-fire .pupil {
    background: #3a1400;
  }
  .mode-fire .teardrop {
    background: #ff5e00;
    box-shadow: 0 0 12px #ff7b2c;
  }
  @keyframes glow-pulse-fire {
    0%, 100% { box-shadow: 0 0 0 6px #a03e00, 0 0 30px 8px rgba(255, 94, 0, 0.7); }
    50% { box-shadow: 0 0 0 6px #ff5500, 0 0 60px 20px rgba(255, 123, 44, 0.9); }
  }

  .mode-water .ring-outer {
    background: #006c9e;
    animation: glow-pulse-water 2.2s ease-in-out infinite;
  }
  .mode-water .ring-inner {
    background: #2ab0e0;
  }
  .mode-water .pupil {
    background: #002b44;
  }
  .mode-water .teardrop {
    background: #00b4ff;
    box-shadow: 0 0 15px #00e0ff;
  }
  @keyframes glow-pulse-water {
    0%, 100% { box-shadow: 0 0 0 6px #005073, 0 0 30px 8px rgba(0, 180, 255, 0.6); }
    50% { box-shadow: 0 0 0 6px #0099cc, 0 0 50px 18px rgba(42, 176, 224, 0.9); }
  }

  .mode-celestial .ring-outer {
    background: #6b21a5;
    animation: glow-pulse-celestial 3s ease-in-out infinite;
  }
  .mode-celestial .ring-inner {
    background: #b473e8;
  }
  .mode-celestial .pupil {
    background: #21003b;
  }
  .mode-celestial .teardrop {
    background: #c084fc;
    box-shadow: 0 0 15px #e9b0ff;
  }
  .mode-celestial .dot {
    background: #ffdf7e;
  }
  @keyframes glow-pulse-celestial {
    0%, 100% { box-shadow: 0 0 0 6px #4c1d6e, 0 0 30px 8px rgba(180, 115, 232, 0.6); }
    50% { box-shadow: 0 0 0 6px #b87af0, 0 0 70px 24px rgba(200, 132, 252, 0.85); }
  }

  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @media (max-width: 700px) {
    .sidebar { width: 260px; padding: 1.3rem; }
    .eye-wrap { width: 180px; height: 180px; }
    .dot { transform-origin: 104px 104px; }
    .dots-ring { inset: -12px; }
    .ring-white { inset: 18px; }
    .ring-inner { inset: 42px; }
    .pupil { inset: 60px; }
  }

  @media (max-width: 550px) {
    body { flex-direction: column; }
    .sidebar {
      width: 100%;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.8rem;
      padding: 1rem;
      border-right: none;
      border-bottom: 1px solid #2a2a2a;
      overflow-x: auto;
    }
    .sidebar-header { border-bottom: none; padding-bottom: 0; }
    .control-group { min-width: 140px; }
    .sidebar-footer { display: none; }
    .scene { min-height: 70vh; }
  }
</style>
</head>
<body>

<aside class="sidebar">
  <div class="sidebar-header">
    <h3>✦ NAZAR ✦</h3>
  </div>

  <div class="control-group">
    <div class="control-title">🌀 PROTECTIVE MODES</div>
    <div class="button-row">
      <button id="modeFire" class="ctrl-btn">🔥 FIRE</button>
      <button id="modeWater" class="ctrl-btn">💧 WATER</button>
      <button id="modeCelestial" class="ctrl-btn">✨ CELESTIAL</button>
    </div>
  </div>

  <div class="separator"></div>

  <div class="control-group">
    <div class="control-title">⚡ EYE ENHANCERS</div>
    <div class="button-row">
      <button id="reverseSpinBtn" class="ctrl-btn">🔄 REVERSE SPIN</button>
      <button id="blinkSpeedBtn" class="ctrl-btn">😉 BLINK SPEED</button>
      <button id="pupilToggleBtn" class="ctrl-btn">👁️ PUPIL SIZE</button>
      <button id="teardropPulseBtn" class="ctrl-btn">💧 TEARDROP PULSE</button>
      <button id="manualBlinkBtn" class="ctrl-btn">✨ BLINK NOW</button>
    </div>
  </div>

  <div class="sidebar-footer"></div>
</aside>

<div class="scene">
  <div class="eye-wrap" id="eyeWrap">
    <div class="eyelid" id="eyelid"></div>
    <div class="dots-ring" id="dotsRing">
      <div class="dot" style="transform: rotate(0deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(30deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(60deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(90deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(120deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(150deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(180deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(210deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(240deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(270deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(300deg) translateY(-124px)"></div>
      <div class="dot" style="transform: rotate(330deg) translateY(-124px)"></div>
    </div>
    <div class="ring-outer"></div>
    <div class="ring-white"></div>
    <div class="ring-inner"></div>
    <div class="pupil" id="pupilEl"></div>
    <div class="teardrop" id="teardropEl"></div>
  </div>
</div>

<script>
  (function() {
    const eyeWrap = document.getElementById('eyeWrap');
    const eyelid = document.getElementById('eyelid');
    const dotsRing = document.getElementById('dotsRing');
    const pupilEl = document.getElementById('pupilEl');
    const teardropEl = document.getElementById('teardropEl');

    let currentMode = 'celestial';
    let reverseSpinActive = false;
    let blinkSpeedIndex = 1;
    let pupilSizeIndex = 1;
    let teardropPulseActive = false;
    let blinkInterval = null;

    function triggerBlink() {
      if (!eyelid) return;
      eyelid.style.animation = 'none';
      eyelid.offsetHeight;
      eyelid.style.animation = 'blinkCurtain 0.15s ease-in-out forwards';
      setTimeout(() => {
        if (eyelid) eyelid.style.animation = '';
      }, 200);
    }

    function updateBlinkInterval() {
      if (blinkInterval) clearInterval(blinkInterval);
      let delayMs = blinkSpeedIndex === 0 ? 5000 : (blinkSpeedIndex === 1 ? 3000 : 1200);
      blinkInterval = setInterval(triggerBlink, delayMs);
    }

    function updatePupilSize() {
      const insetValue = pupilSizeIndex === 0 ? '82px' : (pupilSizeIndex === 1 ? '72px' : '62px');
      pupilEl.style.inset = insetValue;
    }

    function setMode(mode) {
      eyeWrap.classList.remove('mode-fire', 'mode-water', 'mode-celestial');
      if (mode === 'fire') eyeWrap.classList.add('mode-fire');
      else if (mode === 'water') eyeWrap.classList.add('mode-water');
      else eyeWrap.classList.add('mode-celestial');
      currentMode = mode;
    }

    function setReverseSpin(active) {
      reverseSpinActive = active;
      if (active) dotsRing.classList.add('reverse');
      else dotsRing.classList.remove('reverse');
    }

    function setTeardropPulse(active) {
      teardropPulseActive = active;
      if (active) teardropEl.classList.add('pulse');
      else teardropEl.classList.remove('pulse');
    }

    function cycleBlinkSpeed() {
      blinkSpeedIndex = (blinkSpeedIndex + 1) % 3;
      updateBlinkInterval();
      const blinkBtn = document.getElementById('blinkSpeedBtn');
      if (blinkSpeedIndex !== 1) blinkBtn.classList.add('active');
      else blinkBtn.classList.remove('active');
    }

    function cyclePupilSize() {
      pupilSizeIndex = (pupilSizeIndex + 1) % 3;
      updatePupilSize();
      const pupilBtn = document.getElementById('pupilToggleBtn');
      if (pupilSizeIndex !== 1) pupilBtn.classList.add('active');
      else pupilBtn.classList.remove('active');
    }

    const modeFire = document.getElementById('modeFire');
    const modeWater = document.getElementById('modeWater');
    const modeCelestial = document.getElementById('modeCelestial');
    function setActiveMode(activeBtn) {
      [modeFire, modeWater, modeCelestial].forEach(btn => btn.classList.remove('active'));
      activeBtn.classList.add('active');
    }
    modeFire.addEventListener('click', (e) => {
      e.preventDefault();
      setMode('fire');
      setActiveMode(modeFire);
    });
    modeWater.addEventListener('click', (e) => {
      e.preventDefault();
      setMode('water');
      setActiveMode(modeWater);
    });
    modeCelestial.addEventListener('click', (e) => {
      e.preventDefault();
      setMode('celestial');
      setActiveMode(modeCelestial);
    });

    document.getElementById('reverseSpinBtn').addEventListener('click', (e) => {
      e.preventDefault();
      setReverseSpin(!reverseSpinActive);
      e.target.classList.toggle('active', reverseSpinActive);
    });
    document.getElementById('blinkSpeedBtn').addEventListener('click', (e) => {
      e.preventDefault();
      cycleBlinkSpeed();
    });
    document.getElementById('pupilToggleBtn').addEventListener('click', (e) => {
      e.preventDefault();
      cyclePupilSize();
    });
    document.getElementById('teardropPulseBtn').addEventListener('click', (e) => {
      e.preventDefault();
      setTeardropPulse(!teardropPulseActive);
      e.target.classList.toggle('active', teardropPulseActive);
    });
    document.getElementById('manualBlinkBtn').addEventListener('click', (e) => {
      e.preventDefault();
      triggerBlink();
    });

    setMode('celestial');
    setActiveMode(modeCelestial);
    updatePupilSize();
    setReverseSpin(false);
    setTeardropPulse(false);
    updateBlinkInterval();
  })();
</script>
</body>
</html>