/* Solante dijital board — cafe menü TV (1920×1080 / 4K) */
:root {
  --db-cream: #f6f1e8;
  --db-cream-soft: #fbf8f3;
  --db-paper: #ffffff;
  --db-ink: #1f1a14;
  --db-muted: #6b6258;
  --db-line: rgba(31, 26, 20, 0.14);
  --db-accent: #7a5a3a;
  --db-gold: #b08a5a;
  --db-pad: clamp(1rem, 2vw, 2.25rem);
  --db-font-display: "Cormorant Garamond", Georgia, serif;
  --db-font-body: "Manrope", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.db-body {
  background: linear-gradient(180deg, var(--db-cream-soft) 0%, var(--db-cream) 100%);
  color: var(--db-ink);
  font-family: var(--db-font-body);
}

.db-root {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.db-stage {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.db-idle {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  animation: db-fade 0.8s ease both;
}

.db-idle__title {
  font-family: var(--db-font-display);
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.db-idle__sub {
  font-size: clamp(0.95rem, 1.3vw, 1.25rem);
  color: var(--db-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.db-idle--offline .db-idle__sub {
  color: var(--db-accent);
}

/* ——— Ortak board kabuğu ——— */
.db-board {
  width: 100%;
  height: 100%;
  display: grid;
  overflow: hidden;
  animation: db-fade 0.7s ease both;
}

.db-board__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: clamp(0.9rem, 1.6vw, 1.6rem) var(--db-pad);
  border-bottom: 1px solid var(--db-line);
  background: rgba(255, 255, 255, 0.45);
}

.db-board__title {
  font-family: var(--db-font-body);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.35vw, 1.35rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--db-ink);
  justify-self: start;
}

.db-board__brand {
  font-family: var(--db-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  justify-self: center;
}

.db-board__meta {
  justify-self: end;
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--db-muted);
}

.db-board__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.55rem var(--db-pad) 0.7rem;
  border-top: 1px solid var(--db-line);
  font-size: clamp(0.65rem, 0.9vw, 0.85rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--db-muted);
}

.db-board__foot-mark {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--db-gold);
}

/* ——— Menü listesi (kahve / soğuk) ——— */
.db-board--menu {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.db-menu {
  min-height: 0;
  height: 100%;
  padding: clamp(0.8rem, 1.5vw, 1.5rem) clamp(1.4rem, 3.5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 3.5rem);
  align-content: start;
}

.db-menu--single {
  grid-template-columns: minmax(0, 42rem);
  justify-content: center;
}

.db-cat {
  min-width: 0;
  margin-bottom: clamp(0.7rem, 1.4vw, 1.4rem);
  animation: db-rise 0.65s ease both;
}

.db-cat:nth-child(2) { animation-delay: 0.08s; }
.db-cat:nth-child(3) { animation-delay: 0.14s; }
.db-cat:nth-child(4) { animation-delay: 0.2s; }

.db-cat__name {
  font-family: var(--db-font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.85rem);
  letter-spacing: 0.04em;
  margin-bottom: 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--db-line);
  color: var(--db-accent);
}

.db-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem 0.85rem;
  align-items: end;
  padding: 0.42rem 0;
}

.db-row__main {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.db-row__name {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

.db-row__name span {
  font-weight: 600;
  font-size: clamp(0.92rem, 1.25vw, 1.28rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-row__dots {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted rgba(31, 26, 20, 0.28);
  transform: translateY(-0.25rem);
}

.db-row__desc {
  font-weight: 400;
  font-size: clamp(0.68rem, 0.95vw, 0.95rem);
  line-height: 1.3;
  color: var(--db-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-row__price {
  font-weight: 600;
  font-size: clamp(0.95rem, 1.25vw, 1.3rem);
  letter-spacing: 0.02em;
  color: var(--db-ink);
  white-space: nowrap;
}

.db-row__price-old {
  margin-right: 0.4em;
  text-decoration: line-through;
  opacity: 0.45;
  font-weight: 400;
  font-size: 0.82em;
}

/* ——— Sandviç: naif kavis + konuşma balonları ——— */
.db-board--split {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}

.db-board--bare {
  grid-template-rows: minmax(0, 1fr);
}

.db-board--berry {
  --db-berry: #e889a8;
  --db-berry-deep: #d45d82;
  --db-berry-soft: #f8c9d8;
  --db-cream-pink: #fff6f8;
  --db-ink-berry: #5a3140;
  --db-muted-berry: #9a6b7a;
  background:
    radial-gradient(ellipse 60% 70% at 50% 48%, rgba(248, 201, 216, 0.55), transparent 64%),
    radial-gradient(ellipse 42% 50% at 10% 18%, rgba(255, 236, 242, 0.9), transparent 58%),
    radial-gradient(ellipse 42% 50% at 90% 82%, rgba(255, 236, 242, 0.75), transparent 58%),
    linear-gradient(180deg, #fff9fb 0%, #ffeef3 50%, #fff7f2 100%);
  color: var(--db-ink-berry);
}

.db-split-body {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(0.2rem, 0.8vw, 0.9rem);
  padding: clamp(0.9rem, 1.8vw, 1.5rem) clamp(0.85rem, 1.8vw, 1.8rem);
}

.db-split-side {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.db-bubbles {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.1vh, 0.95rem);
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 0.2rem 0.15rem;
}

.db-bubble {
  --db-i: 0;
  position: relative;
  max-width: 100%;
  animation: db-bubble-in 0.7s ease both;
  animation-delay: calc(var(--db-i) * 0.07s);
}

.db-bubble:nth-child(odd).db-bubble--left .db-bubble__body {
  transform: rotate(-1.1deg);
}

.db-bubble:nth-child(even).db-bubble--left .db-bubble__body {
  transform: rotate(0.9deg);
}

.db-bubble:nth-child(odd).db-bubble--right .db-bubble__body {
  transform: rotate(1deg);
}

.db-bubble:nth-child(even).db-bubble--right .db-bubble__body {
  transform: rotate(-0.85deg);
}

.db-bubble--left {
  align-self: flex-end;
  margin-right: 0.15rem;
}

.db-bubble--right {
  align-self: flex-start;
  margin-left: 0.15rem;
}

.db-bubble:nth-child(even).db-bubble--left {
  margin-right: 0.85rem;
}

.db-bubble:nth-child(even).db-bubble--right {
  margin-left: 0.85rem;
}

.db-bubble__body {
  position: relative;
  z-index: 1;
  background: linear-gradient(165deg, #ffffff 0%, #fff5f8 55%, #ffe9f0 100%);
  border: 2px solid rgba(232, 137, 168, 0.45);
  border-radius: 1.55rem 1.55rem 1.55rem 1.55rem;
  padding: clamp(0.55rem, 1.1vh, 0.85rem) clamp(0.7rem, 1.2vw, 1.05rem);
  box-shadow:
    0 8px 20px rgba(212, 93, 130, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.db-bubble--left .db-bubble__body {
  border-radius: 1.7rem 1.7rem 0.55rem 1.7rem;
}

.db-bubble--right .db-bubble__body {
  border-radius: 1.7rem 1.7rem 1.7rem 0.55rem;
}

.db-bubble__name {
  font-family: var(--db-font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.35vw, 1.35rem);
  line-height: 1.15;
  color: var(--db-ink-berry);
  letter-spacing: 0.01em;
}

.db-bubble__desc {
  margin-top: 0.2rem;
  font-size: clamp(0.62rem, 0.88vw, 0.86rem);
  line-height: 1.3;
  color: var(--db-muted-berry);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.db-bubble__price {
  margin-top: 0.35rem;
  font-weight: 700;
  font-size: clamp(0.88rem, 1.15vw, 1.15rem);
  color: var(--db-berry-deep);
  letter-spacing: 0.02em;
}

.db-bubble__price-old {
  margin-right: 0.35em;
  text-decoration: line-through;
  opacity: 0.45;
  font-weight: 500;
  font-size: 0.82em;
}

.db-bubble__tail {
  position: absolute;
  top: 42%;
  width: 0.85rem;
  height: 0.85rem;
  background: #fff5f8;
  border: 2px solid rgba(232, 137, 168, 0.45);
  transform: rotate(45deg);
  z-index: 0;
}

.db-bubble--left .db-bubble__tail {
  right: -0.28rem;
  border-left: 0;
  border-bottom: 0;
  background: linear-gradient(135deg, #fff5f8, #ffe9f0);
}

.db-bubble--right .db-bubble__tail {
  left: -0.28rem;
  border-right: 0;
  border-top: 0;
  background: linear-gradient(135deg, #fff5f8, #ffe9f0);
}

.db-portrait {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.db-portrait__shell {
  position: relative;
  height: min(100%, 92vh);
  max-height: 100%;
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: min(32vw, 24rem);
  display: grid;
  grid-template-columns: clamp(1.3rem, 2vw, 2.2rem) minmax(0, 1fr) clamp(1.3rem, 2vw, 2.2rem);
  align-items: stretch;
  filter: drop-shadow(0 16px 28px rgba(212, 93, 130, 0.18));
  animation: db-portrait-float 7s ease-in-out infinite;
}

.db-portrait__ornament {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.db-portrait__wave-soft {
  fill: #f6c4d4;
  opacity: 0.7;
}

.db-portrait__wave-line {
  stroke: #e889a8;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  animation: db-wave-pulse 5s ease-in-out infinite;
}

.db-portrait__ornament--right .db-portrait__wave-line {
  animation-delay: -1.6s;
}

.db-portrait__frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #f4a9c0;
  /* naif yumuşak kapsul — keskin köşe yok */
  border-radius: 48% / 28%;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.5),
    inset 0 0 0 9px rgba(232, 137, 168, 0.28);
}

.db-portrait__glow {
  pointer-events: none;
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.4), transparent 44%),
    radial-gradient(circle at 50% 88%, rgba(232, 137, 168, 0.25), transparent 52%);
  mix-blend-mode: soft-light;
  animation: db-glow-breathe 5.5s ease-in-out infinite;
}

.db-portrait__img,
.db-portrait__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 0;
}

.db-portrait__video {
  background: #f4a9c0;
  transform: scale(1.03);
}

.db-portrait__empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #f8c9d8, #e889a8);
}

.db-portrait__cap {
  display: none;
}

@keyframes db-bubble-in {
  from {
    opacity: 0;
    transform: translateY(0.55rem) scale(0.96);
  }
  to {
    opacity: 1;
  }
}

@keyframes db-portrait-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.4rem);
  }
}

@keyframes db-wave-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.85;
  }
}

@keyframes db-glow-breathe {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.db-visual,
.db-split-panel,
.db-menu--side {
  display: none;
}

/* ——— Promo (görsel ağırlıklı soğuk içecek varyantı opsiyon) ——— */
.db-board--promo {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.db-promo {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
}

.db-promo__shots {
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.35rem;
  background: #e7ded0;
}

.db-promo__shots figure {
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.db-promo__shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.db-promo__shots figcaption {
  position: absolute;
  left: 0.8rem;
  bottom: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.db-promo .db-menu {
  grid-template-columns: 1fr;
  padding: clamp(0.9rem, 1.6vw, 1.5rem) clamp(1rem, 2vw, 2rem);
}

@keyframes db-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes db-rise {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 2560px) {
  :root {
    --db-pad: clamp(1.4rem, 1.8vw, 2.8rem);
  }
}