/* ============================================================
   DEBRA COFFEE BREAK — ortak tema
   Kimlik: gece yayını / sinema estetiği.
   Archivo (display) · Instrument Serif (italik vurgu) · Spline Sans Mono (teknik).
   Sıcak siyah zemin, film granı, altın çentik detayları.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&family=Instrument+Serif:ital@0;1&family=Spline+Sans+Mono:wght@400;500;700&display=swap');

:root {
  --zemin: #0b0a09;
  --zemin2: #0f0d0c;
  --panel: #141210;
  --panel2: #1c1915;
  --cizgi: rgba(237, 232, 223, 0.11);
  --cizgi-koyu: rgba(237, 232, 223, 0.06);
  --kirmizi: #c9182b;
  --kirmizi-parlak: #ef3247;
  --kirmizi-koyu: #7c101c;
  --altin: #c9a35c;
  --altin-parlak: #e4c07f;
  --altin-koyu: #8f7238;
  --yesil: #57b981;
  --yesil-koyu: #2f7a4f;
  --metin: #ede8df;
  --soluk: #8f887b;
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font-display);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* atmosfer: köşelerden hafif kırmızı/altın ışık sızıntısı */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 640px at 50% -8%, rgba(201, 24, 43, 0.11), transparent 62%),
    radial-gradient(760px 520px at 92% 108%, rgba(201, 163, 92, 0.06), transparent 60%);
}
/* film granı — tüm sahnenin üstünde ince doku */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
/* içerik grain/atmosferin üstünde kalsın */
.ust, .icerik, .sahne, .oda-girisi { position: relative; z-index: 1; }

/* ---- marka ---- */
.marka {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--metin);
}
.marka .vurgu { color: var(--kirmizi-parlak); }

/* ---- panel ---- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  padding: 22px;
}
/* altın köşe çentiği — kimlik imzası */
.panel.centik::before, .panel.centik::after {
  content: ""; position: absolute; width: 13px; height: 13px;
}
.panel.centik::before { top: -1px; left: -1px; border-top: 2px solid var(--altin); border-left: 2px solid var(--altin); }
.panel.centik::after { top: -1px; right: -1px; border-top: 2px solid var(--altin); border-right: 2px solid var(--altin); }

/* ---- düğme ---- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--cizgi); border-radius: 3px;
  padding: 15px 24px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--metin); background: transparent;
  cursor: pointer; user-select: none;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
}
.dugme:active { transform: scale(0.98); }
.dugme:disabled { opacity: 0.4; cursor: not-allowed; }
/* birincil = dolu kırmızı */
.dugme { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.dugme:hover:not(:disabled) { background: var(--kirmizi-parlak); box-shadow: 0 8px 30px rgba(201, 24, 43, 0.32); }
.dugme.gri { background: transparent; border-color: var(--cizgi); color: var(--soluk); }
.dugme.gri:hover:not(:disabled) { border-color: var(--metin); color: var(--metin); box-shadow: none; }
.dugme.altin { background: transparent; border-color: var(--altin-koyu); color: var(--altin); }
.dugme.altin:hover:not(:disabled) { border-color: var(--altin); color: var(--altin-parlak); box-shadow: 0 8px 26px rgba(201, 163, 92, 0.18); background: transparent; }
.dugme.yesil { background: var(--yesil-koyu); border-color: var(--yesil-koyu); color: #eafff2; }
.dugme.yesil:hover:not(:disabled) { background: var(--yesil); box-shadow: 0 8px 26px rgba(87, 185, 129, 0.28); }
.dugme.mini { padding: 9px 14px; font-size: 12px; letter-spacing: 0.1em; }

/* ---- girdi ---- */
.girdi {
  width: 100%;
  padding: 15px 16px;
  border-radius: 3px;
  border: 1px solid var(--cizgi);
  background: rgba(0, 0, 0, 0.25);
  color: var(--metin);
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  outline: none;
  transition: border-color 0.15s ease;
}
.girdi::placeholder { color: var(--soluk); font-weight: 500; }
.girdi:focus { border-color: var(--altin); }

.soluk { color: var(--soluk); }
.gizli { display: none !important; }

/* ---- zaman çubuğu ---- */
.zaman-kap {
  height: 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden; border: 1px solid var(--cizgi-koyu);
}
.zaman-cubuk {
  height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--yesil), var(--altin), var(--kirmizi-parlak));
  transition: width 0.2s linear;
}

/* ---- çip / rozet ---- */
.cip {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--cizgi);
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--soluk);
}
.cip.kirmizi { color: #ffc2c8; border-color: var(--kirmizi-koyu); background: rgba(201, 24, 43, 0.14); }
.cip.altin { color: var(--altin-parlak); border-color: var(--altin-koyu); background: rgba(201, 163, 92, 0.1); }

/* teknik etiketler için yardımcı */
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); font-style: italic; }

@keyframes titre { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes belir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nabiz { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes dogruParla { 0%,100% { box-shadow: 0 0 0 rgba(87,185,129,0); } 50% { box-shadow: 0 0 44px rgba(87,185,129,0.55); } }
.belir { animation: belir 0.4s cubic-bezier(.2,.7,.3,1) both; }