:root {
      --choco-main: #3b2f2f;
      --choco-dark: #241818;
      --choco-gold: #d4af37;
      --choco-soft: #f9f1e7;
    }

    #cikolataPage,
    #cikolataPage * {
      box-sizing: border-box;
    }

    #cikolataPage {
      font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 10% 0%, rgba(212, 175, 55, .18) 0, transparent 40%),
        radial-gradient(circle at 90% 100%, rgba(212, 175, 55, .15) 0, transparent 45%),
        linear-gradient(180deg, #261815, #120b0a 45%, #1a0f0d 100%);
      color: #f9f5ef;
      overflow-x: hidden;
      padding-top: 12px;
    }

    #cikolataPage h1,
    #cikolataPage h2,
    #cikolataPage h3 {
      color: var(--choco-gold);
    }

    .choco-hero {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .choco-drip-layer {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 10% 0%, #4e2f23 0, transparent 40%),
        radial-gradient(circle at 90% 0%, #4e2f23 0, transparent 45%),
        linear-gradient(180deg, #4b2a22 0%, #2d1813 40%, transparent 60%);
      opacity: 0.9;
      pointer-events: none;
      z-index: 0;
    }

    .choco-drip {
      position: absolute;
      top: 0;
      width: 80px;
      height: 180px;
      background: radial-gradient(circle at 50% 0%, #6b402f 0, #3b221a 65%);
      border-radius: 40px;
      animation: drip 6s infinite ease-in-out;
      filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .25));
      opacity: 0.9;
    }

    .choco-drip:nth-child(1) { left: 10%; animation-delay: 0s; height: 160px; }
    .choco-drip:nth-child(2) { left: 30%; animation-delay: 0.6s; height: 190px; }
    .choco-drip:nth-child(3) { left: 55%; animation-delay: 1.2s; height: 170px; }
    .choco-drip:nth-child(4) { left: 75%; animation-delay: 1.8s; height: 200px; }

    @keyframes drip {
      0%   { transform: translateY(-110px) scaleY(.7); border-radius: 40px; }
      40%  { transform: translateY(0) scaleY(1); }
      70%  { transform: translateY(10px) scaleY(.95); }
      100% { transform: translateY(220px) scaleY(.7); opacity: 0; }
    }

    .gold-sheen {
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .18) 40%, transparent 60%);
      mix-blend-mode: screen;
      opacity: 0;
      animation: sheen 7s infinite;
      pointer-events: none;
    }

    @keyframes sheen {
      0% { transform: translateX(-100%); opacity: 0; }
      30% { opacity: 1; }
      60% { transform: translateX(100%); opacity: .4; }
      100% { opacity: 0; }
    }

    .choco-particles span {
      position: absolute;
      font-size: 16px;
      opacity: .16;
      animation: floatUp 16s linear infinite;
    }

    .choco-particles span:nth-child(1) { left: 10%; bottom: -40px; animation-duration: 18s; }
    .choco-particles span:nth-child(2) { left: 26%; bottom: -40px; animation-duration: 21s; animation-delay: 3s; }
    .choco-particles span:nth-child(3) { left: 43%; bottom: -40px; animation-duration: 19s; animation-delay: 2s; }
    .choco-particles span:nth-child(4) { left: 63%; bottom: -40px; animation-duration: 24s; animation-delay: 5s; }
    .choco-particles span:nth-child(5) { left: 82%; bottom: -40px; animation-duration: 20s; animation-delay: 1s; }

    @keyframes floatUp {
      0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
      15% { opacity: .35; }
      50% { transform: translateY(-140px) translateX(15px) scale(1.1); }
      100% { transform: translateY(-260px) translateX(-10px) scale(.9); opacity: 0; }
    }

    .choco-card {
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .4)),
        radial-gradient(circle at 0 0, rgba(255, 255, 255, .14), transparent 55%),
        #2b1b17;
      border-radius: 18px;
      border: 1px solid rgba(212, 175, 55, .4);
      box-shadow:
        0 18px 35px rgba(0, 0, 0, .65),
        inset 0 0 0 1px rgba(255, 255, 255, .03);
      position: relative;
      overflow: hidden;
      transition: all .26s ease-out;
    }

    .choco-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, .15) 0,
        transparent 40%,
        transparent 60%,
        rgba(0, 0, 0, .4) 100%
      );
      mix-blend-mode: soft-light;
      opacity: .25;
      pointer-events: none;
    }

    .choco-card-grid {
      background-image:
        linear-gradient(#5a3a30 1px, transparent 1px),
        linear-gradient(90deg, #5a3a30 1px, transparent 1px);
      background-size: 15px 15px;
      opacity: .35;
      pointer-events: none;
      position: absolute;
      inset: 0;
    }

    .choco-card:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow:
        0 26px 50px rgba(0, 0, 0, .75),
        0 0 30px rgba(212, 175, 55, .35);
    }

    .choco-hover {
      transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out;
    }

    .choco-hover:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 35px rgba(0, 0, 0, .7);
      border-color: rgba(212, 175, 55, .8);
    }

    .choco-btn {
      background: radial-gradient(circle at 0 0, #f7e3a4 0, #e0b94c 35%, #b78b22 100%);
      color: #2b1b17;
      border: 1px solid rgba(0, 0, 0, .4);
      box-shadow:
        0 10px 18px rgba(0, 0, 0, .7),
        inset 0 0 0 1px rgba(255, 255, 255, .18);
    }

    .choco-btn:hover {
      filter: brightness(1.04);
    }

    .btn-splash {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .btn-splash::after {
      content: "";
      position: absolute;
      width: 220%;
      height: 220%;
      background:
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, .18) 0, transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, .35) 0, transparent 50%);
      transform: translate(-120%, -50%) rotate(15deg);
      opacity: 0;
      transition: opacity .25s, transform .35s;
      pointer-events: none;
    }

    .btn-splash:hover::after {
      opacity: 1;
      transform: translate(-10%, -30%) rotate(0deg);
    }

    .gold-bg {
      background-color: var(--choco-gold);
      color: var(--choco-dark);
    }

    .gold-hover:hover {
      background-color: #b8921f;
    }

    .choco-pool {
      position: relative;
      overflow: hidden;
      background: radial-gradient(circle at 50% 0%, #5a3324 0, #2b1510 45%, #160b08 100%);
    }

    .choco-wave {
      position: absolute;
      left: -10%;
      right: -10%;
      top: -40px;
      height: 80px;
      background:
        radial-gradient(circle at 20% 120%, rgba(255, 255, 255, .12) 0, transparent 60%),
        radial-gradient(circle at 60% 120%, rgba(0, 0, 0, .6) 0, transparent 55%);
      opacity: .4;
      animation: waveMotion 7s ease-in-out infinite;
    }

    @keyframes waveMotion {
      0% { transform: translateX(0) translateY(0); }
      50% { transform: translateX(20px) translateY(8px); }
      100% { transform: translateX(0) translateY(0); }
    }

    input[type="date"],
    input[type="time"] {
      color: #f9f5ef !important;
      background-color: #1f1818 !important;
      -webkit-text-fill-color: #f9f5ef !important;
      border: 1px solid #d4af37 !important;
      position: relative;
      z-index: 20;
    }

    input[type="date"]::-webkit-datetime-edit,
    input[type="time"]::-webkit-datetime-edit {
      color: #f9f5ef !important;
      -webkit-text-fill-color: #f9f5ef !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
      filter: invert(1) brightness(1.5);
      opacity: 1 !important;
    }

    input[type="date"]::-webkit-inner-spin-button,
    input[type="time"]::-webkit-inner-spin-button {
      opacity: 1 !important;
    }

    @media (max-width: 768px) {
      .choco-drip { display: none; }
      .choco-drip-layer { opacity: .85; }
    }
    
    /* FORM ALANLARI GENEL */
#cikolataPage select,
#cikolataPage input,
#cikolataPage textarea {
  color: #f9f5ef !important;
  background: #1f1818 !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
}

#cikolataPage select::placeholder,
#cikolataPage input::placeholder,
#cikolataPage textarea::placeholder {
  color: rgba(249, 245, 239, 0.55) !important;
}

/* SELECT */
#cikolataPage select {
  -webkit-appearance: none;
  appearance: none;
  color: #f9f5ef !important;
  background-color: #1f1818 !important;
}

#cikolataPage select option {
  color: #111 !important;
  background: #fff !important;
}

/* DATE + TIME */
#cikolataPage input[type="date"],
#cikolataPage input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 52px;
  color: #f9f5ef !important;
  background-color: #1f1818 !important;
  -webkit-text-fill-color: #f9f5ef !important;
  caret-color: #f9f5ef !important;
}

#cikolataPage input[type="date"]::-webkit-datetime-edit,
#cikolataPage input[type="time"]::-webkit-datetime-edit,
#cikolataPage input[type="date"]::-webkit-datetime-edit-text,
#cikolataPage input[type="time"]::-webkit-datetime-edit-text,
#cikolataPage input[type="date"]::-webkit-datetime-edit-month-field,
#cikolataPage input[type="date"]::-webkit-datetime-edit-day-field,
#cikolataPage input[type="date"]::-webkit-datetime-edit-year-field,
#cikolataPage input[type="time"]::-webkit-datetime-edit-hour-field,
#cikolataPage input[type="time"]::-webkit-datetime-edit-minute-field {
  color: #f9f5ef !important;
  -webkit-text-fill-color: #f9f5ef !important;
}

#cikolataPage input[type="date"]::-webkit-calendar-picker-indicator,
#cikolataPage input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.2);
  opacity: 1 !important;
  cursor: pointer;
}

#cikolataPage input[type="date"]::-webkit-inner-spin-button,
#cikolataPage input[type="time"]::-webkit-inner-spin-button,
#cikolataPage input[type="date"]::-webkit-clear-button,
#cikolataPage input[type="time"]::-webkit-clear-button {
  display: none;
}

/* FOCUS */
#cikolataPage select:focus,
#cikolataPage input:focus,
#cikolataPage textarea:focus {
  outline: none !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12) !important;
}

/* Takvim ve saat ikonlarını küçült */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  transform: scale(0.8);
  opacity: 0.9;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  transform: scale(0.65);
}

/* HERO mobil hizalama */
@media (max-width: 768px) {

  #cikolataPage .choco-hero .relative {
    text-align: center;
    align-items: center;
  }

  #cikolataPage .choco-hero .flex-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #cikolataPage .choco-hero p {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  #cikolataPage .choco-hero .mt-6 {
    justify-content: center;
  }

  #cikolataPage .choco-hero .mt-4 {
    justify-content: center;
  }

}

#cikolataPage .hero-hint{
  text-align:center;
  margin-top:14px;
  font-size:13px;
  color:rgba(249,241,231,.75);
  letter-spacing:.04em;
  animation: heroHintMove 1.8s infinite ease-in-out;
}

@keyframes heroHintMove{
  0%{transform:translateY(0)}
  50%{transform:translateY(6px)}
  100%{transform:translateY(0)}
}