/* ===== Hero ===== */
.hero{ padding: clamp(28px, 3vw, 40px) 0 56px; }
.hero-inner{
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
}
.hero-copy h1{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  margin: 8px 0 12px;
}
.hero .lede{
  font-size: clamp(16px, 1.8vw, 18px);
  color: var(--muted);
  margin: 0 0 12px;
}
.hero-tags{
  display:flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px;
}
.tag{
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
}

.hero-actions{ display: flex; gap: 12px; margin-top: 6px; }

/* 3 fotoğraflı vitrin */
.hero-gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.photo-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
}
.photo-card img{
  display:block;
  width: 100%;
  height: auto;
  max-width: 350px; /* İstenen üst sınır */
  margin-inline: auto;
}
.photo-card figcaption{
  font-size: 13px; color: var(--muted);
  padding: 8px 12px 12px;
}

/* Hover efektleri (dokunmatik harici) */
@media (hover:hover){
  .photo-card:hover{ transform: translateY(-4px); }
}

/* İnteraktif mikro animasyon sınıfları */
.tilt{ transition: transform var(--speed) ease; }
.float{ animation: floatY 6s ease-in-out infinite; }
.lift{ transition: transform .35s ease; }
.lift:hover{ transform: translateY(-6px) scale(1.01); }

@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Erişilebilirlik: hareket azaltma */
@media (prefers-reduced-motion: reduce){
  .float{ animation: none; }
  .reveal-on-scroll{ transition: none; }
}

/* ===== Tablet & Altı ===== */
@media (max-width: 1024px){
  .hero-inner{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-gallery{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* ===== Küçük telefonlar ===== */
@media (max-width: 640px){
  .hero{ padding-top: 18px; }
  .hero-gallery{
    grid-template-columns: 1fr;
  }
  .photo-card img{ max-width: 340px; }
}

/* ===== En küçük cihazlar (320px) ===== */
@media (max-width: 360px){
  .photo-card img{ max-width: 320px; }
}
/* ===== Yardımcı ===== */
.visually-title{ 
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 8px 0 12px;
}
.sec-lede{
  color: var(--muted); 
  margin: 8px 0 18px;
  max-width: 68ch;
}

/* ===== 2) Lezzetler Akışı ===== */
.flow-stripes{ padding: 42px 0; }
.stripe-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.stripe-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  transform-origin: center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.stripe-card img{
  display:block; width:100%; height:auto; max-width:350px; margin-inline:auto;
}
.stripe-card figcaption{
  padding: 10px 12px 14px; color: var(--muted); font-size: 13px;
}

/* dalgalı kenarlar (sıkıcı kartlar yerine) */
.bend{ clip-path: path("M0,0 H100% V90 Q75% 100% 50% 90 T0 90 Z"); }
.wave{ clip-path: polygon(0 0, 100% 0, 100% 85%, 70% 92%, 40% 88%, 20% 95%, 0 90%); }

/* hover */
@media (hover:hover){
  .stripe-card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 14px 36px rgba(0,0,0,.45); }
}

/* bilgi şeritleri */
.ribbon-facts{
  display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; padding:0; list-style:none;
}
.ribbon-facts li{
  border:1px dashed var(--border);
  background: linear-gradient(135deg, rgba(255,100,55,.12), rgba(255,193,59,.08));
  padding: 10px 12px; border-radius: 12px; font-size: 14px;
}

/* ===== 3) Fırın Nabzı ===== */
.furnace-pulse{ padding: 48px 0; }
.pulse-inner{
  display:grid; grid-template-columns: 1.2fr .9fr; gap: 24px; align-items: start;
}
.heat-legend{ display:flex; gap: 12px; font-size: 12px; color: var(--muted); margin: 8px 0 8px; }
.heat-bar{
  --pos: 0.0; /* JS ile güncellenecek */
  height: 14px; border-radius: 999px; border:1px solid var(--border);
  background:
    linear-gradient(90deg,
      rgba(255,100,55,.15) 0%, rgba(255,100,55,.25) 25%,
      rgba(255,193,59,.28) 45%,
      rgba(255,255,255,.18) 65%,
      rgba(255,193,59,.28) 85%, rgba(255,100,55,.15) 100%),
    radial-gradient(16px 16px at calc(var(--pos) * 100%) 50%, rgba(255,255,255,.85), transparent 60%);
  box-shadow: inset 0 0 10px rgba(0,0,0,.4);
  position: relative;
  overflow: hidden;
}
.pulse-photos{
  display:grid; grid-template-columns: 1fr; gap: 14px;
}
.pulse-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pulse-card img{ width:100%; height:auto; max-width:350px; margin-inline:auto; }
.pulse-card figcaption{ color: var(--muted); font-size: 13px; padding: 8px 12px 12px; }

/* ===== 4) Dikey Rota (mekân) ===== */
.vertical-route{ padding: 50px 0 56px; }
.route{
  position: relative; margin: 0; padding: 0; list-style: none;
}
.route::before{
  content:""; position:absolute; left: 20px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--accent-2));
  opacity:.8; border-radius: 2px;
}
.route-step{
  position:relative; padding-left: 56px; margin: 0 0 26px;
}
.route-step .dot{
  position:absolute; left: 12px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, var(--accent-2) 45%, var(--accent) 70%);
  box-shadow: 0 0 12px rgba(255,100,55,.6), 0 0 24px rgba(255,193,59,.35);
}
.step-body h3{ margin: 2px 0 6px; font-size: clamp(18px, 2vw, 20px); }
.step-body p{ margin: 0 0 10px; color: var(--muted); }
.step-body img{ display:block; width:100%; height:auto; max-width:350px; border-radius: 12px; border:1px solid var(--border); }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .stripe-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .pulse-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
  .stripe-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .route::before{ left: 16px; }
  .route-step{ padding-left: 48px; }
  .route-step .dot{ left: 8px; }
}
/* ===== 5) Aroma Çarkı ===== */
.aroma-wheel{ padding: 46px 0; }
.aroma-inner{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items:center; }
.notes{ margin: 10px 0 0; padding:0; list-style: none; display:grid; gap:8px; }
.notes li{ background: rgba(255,255,255,.05); border:1px solid var(--border); border-radius:12px; padding:8px 12px; }

.wheel-zone{ position:relative; display:grid; place-items:center; }
.wheel{
  --rot: 0turn;
  width: 280px; height: 280px; border-radius: 50%;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background:
    conic-gradient(
      from 0turn,
      rgba(255,100,55,.35) 0 16.6%,
      rgba(255,193,59,.35) 16.6% 33.3%,
      rgba(255,255,255,.22) 33.3% 50%,
      rgba(100,255,200,.20) 50% 66.6%,
      rgba(120,160,255,.22) 66.6% 83.3%,
      rgba(255,120,200,.22) 83.3% 100%
    );
  transform: rotate(var(--rot));
  transition: transform .8s ease;
}
.wheel-labels{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.wheel-labels li{
  position:absolute; left:50%; top:50%;
  transform:
    rotate(calc(var(--i)*60deg))
    translate(0, -120px)
    rotate(calc(var(--i)*-60deg));
  transform-origin: center;
  font-size: 12px; color: var(--ink); opacity: .9;
}

.aroma-photos{
  grid-column: 1 / -1; /* tam genişlikte alt satır */
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px;
}
.aroma-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.aroma-card img{ display:block; width:100%; height:auto; max-width:350px; margin-inline:auto; }
.aroma-card figcaption{ color: var(--muted); font-size:13px; padding: 8px 12px 12px; }

/* ===== 6) Malzeme Haritası ===== */
.ingredient-map{ padding: 48px 0; }
.map-inner{ display:grid; grid-template-columns: 1fr .9fr 1fr; gap: 24px; align-items: start; }
.map-facts{ padding:0; list-style:none; display:grid; gap:8px; }
.map-facts li{ border:1px dashed var(--border); border-radius:12px; padding:8px 12px; background:rgba(255,193,59,.08); }

.map-route{ position:relative; }
.nodes{ margin:0; padding:0 0 0 12px; list-style:none; border-left:2px solid rgba(255,193,59,.7); }
.node{
  position:relative; padding: 10px 12px 10px 22px; margin: 0 0 10px;
  background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px;
  transform: translateX(-12px); transition: transform .4s ease, box-shadow .3s ease;
}
.node .dot{
  position:absolute; left:-11px; top:12px; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #fff, var(--accent-2) 50%, var(--accent) 80%);
  box-shadow: 0 0 10px rgba(255,193,59,.5), 0 0 22px rgba(255,100,55,.35);
  animation: ping 2.2s ease-in-out infinite;
}
.node em{ display:block; color:var(--muted); font-style: normal; font-size:12px; }
.node b{ display:block; font-weight:700; }
.node:hover{ transform: translateX(-6px); box-shadow: 0 10px 28px rgba(0,0,0,.35); }

@keyframes ping{
  0%,100%{ transform: scale(1); opacity: .95; }
  50%{ transform: scale(1.12); opacity: 1; }
}

.map-photos{ display:grid; grid-template-columns: 1fr; gap:14px; }
.map-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); }
.map-card img{ width:100%; height:auto; max-width:350px; margin-inline:auto; }
.map-card figcaption{ color: var(--muted); font-size:13px; padding: 8px 12px 12px; }

/* ===== 7) Akşam Şeridi ===== */
.twilight-strip{ padding: 48px 0; }
.strip{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
}
.panel{
  position: relative; scroll-snap-align: start;
  border:1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow);
}
.panel figure{ margin:0; }
.panel img{ display:block; width:100%; height:auto; max-width:350px; margin-inline:auto; }
.panel figcaption{ color: var(--muted); font-size:13px; padding: 8px 12px 12px; }

.twilight-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 60% at var(--mx,50%) var(--my,50%),
      rgba(255,193,59,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 30% 70%, rgba(0,0,0,.3));
  mix-blend-mode: screen;
  transition: opacity .3s ease;
  opacity: .9;
}
@media (hover:hover){
  .panel:hover .twilight-bg{ opacity: 1; }
}

/* ===== Responsive (geniş -> küçük) ===== */
@media (max-width: 1100px){
  .aroma-inner{ grid-template-columns: 1fr 1fr; }
  .map-inner{ grid-template-columns: 1fr 1fr; }
  .map-photos{ grid-column: 2 / -1; }
}
@media (max-width: 820px){
  .aroma-inner{ grid-template-columns: 1fr; }
  .aroma-photos{ grid-template-columns: 1fr; }
  .map-inner{ grid-template-columns: 1fr; }
  .map-photos{ grid-column: auto; }
}
@media (max-width: 560px){
  .wheel{ width: 240px; height: 240px; }
  .wheel-labels li{ transform: rotate(calc(var(--i)*60deg)) translate(0, -100px) rotate(calc(var(--i)*-60deg)); }
}
@media (prefers-reduced-motion: reduce){
  .node .dot{ animation: none; }
}
/* ===== 8) Ustanın Defteri ===== */
.notebook-strip{ padding: 48px 0; }
.nb-inner{ position: relative; }
.nb-inner::before{
  /* defter fonu: ince çizgiler */
  content:""; position:absolute; inset: 20px 0 0 0; z-index:-1;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 24px,
      transparent 26px
    );
  mask: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.nb-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px;
}
.note-item{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 14px 12px; position: relative;
}
.note-head{ display:flex; align-items:center; gap:8px; margin-bottom: 8px; }
.note-head .pin{
  width: 12px; height: 12px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #fff, var(--accent-2) 50%, var(--accent) 80%);
  box-shadow: 0 0 8px rgba(255,193,59,.6);
}
.note-item p{ color: var(--muted); margin: 0 0 10px; }
.note-item figure{ margin:0; }
.note-item img{ display:block; width:100%; height:auto; max-width:350px; margin-inline:auto; border-radius: 12px; border:1px solid var(--border); }
.note-item figcaption{ font-size: 13px; color: var(--muted); padding-top: 6px; }

@media (max-width: 820px){
  .nb-grid{ grid-template-columns: 1fr; }
}

/* ===== 9) Hamur Fiziği ===== */
.dough-physics{ padding: 48px 0; }
.phys-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
.stretch-graph{ display:grid; gap: 10px; }
.stretch-line{
  display:grid; grid-template-columns: 140px 1fr 120px; gap: 10px; align-items: center;
  background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius: 12px; padding: 8px 10px;
}
.stretch-line .label{ font-size: 13px; color: var(--ink); }
.stretch-line em{ color: var(--muted); font-style: normal; font-size: 12px; text-align: right; }
.stretch-line .bar{
  --pct: 0;
  display:block; height: 10px; border-radius: 999px; border:1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(255,100,55,.25), rgba(255,193,59,.28));
  position: relative; overflow: hidden;
}
.stretch-line .bar::after{
  content:""; position:absolute; inset: 0;
  width: calc(var(--pct) * 100%);
  background: linear-gradient(90deg, rgba(255,100,55,.55), rgba(255,193,59,.55));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,193,59,.35);
  transition: width .8s ease;
}

.phys-photos{ display:grid; grid-template-columns: 1fr; gap: 14px; }
.phys-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); }
.phys-card img{ width:100%; height:auto; max-width:350px; margin-inline:auto; }
.phys-card figcaption{ color: var(--muted); font-size: 13px; padding: 8px 12px 12px; }

@media (max-width: 900px){
  .phys-inner{ grid-template-columns: 1fr; }
}

/* ===== 10) Şehir Ritmi — dalga galerisi ===== */
.city-wave{ padding: 48px 0; }
.wave-strip{
  position: relative;
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
}
.wave-panel{
  scroll-snap-align: start;
  border:1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow);
}
.wave-panel figure{ margin:0; }
.wave-panel img{ display:block; width:100%; height:auto; max-width:350px; margin-inline:auto; }
.wave-panel figcaption{ color: var(--muted); font-size:13px; padding: 8px 12px 12px; }

/* dalga üst katmanı */
.wave-overlay{
  position:absolute; inset:0; pointer-events:none;
  --amp: 1; /* JS ile güncellenir */
  background:
    repeating-conic-gradient(
      from 0deg, rgba(255,193,59,.08) 0 8deg, transparent 8deg 16deg
    );
  transform-origin: center;
  transform: scaleY(var(--amp));
  mix-blend-mode: screen;
  transition: transform .2s ease;
  opacity: .9;
}
/* ===== 11) Odun Atlası ===== */
.wood-atlas{ padding: 48px 0; }
.wood-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top: 6px;
}
.wood-item{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow); text-align: center;
}
.wood-item h3{ margin: 8px 0 6px; font-size: clamp(16px, 1.8vw, 18px); }
.wood-item p{ color: var(--muted); margin: 0; }

.ring{
  --p: 0; /* 0..1, JS ile doldurulacak */
  width: 140px; height: 140px; margin: 4px auto 8px; border-radius: 50%;
  background:
    conic-gradient(
      from -90deg,
      rgba(255,100,55,.8) 0deg,
      rgba(255,100,55,.8) calc(var(--p) * 360deg),
      rgba(255,255,255,.07) calc(var(--p) * 360deg)
    );
  mask: radial-gradient(circle 52% at 50% 50%, transparent 60px, #000 61px);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 20px rgba(0,0,0,.35);
}
.wood-legend{ display:flex; align-items:center; gap:10px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.wood-legend i{ flex:1; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,100,55,.6)); }

.wood-photos{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 14px;
}
.wood-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow); }
.wood-card img{ display:block; width:100%; height:auto; max-width:350px; margin-inline:auto; }
.wood-card figcaption{ color: var(--muted); font-size: 13px; padding: 8px 12px 12px; }

@media (max-width: 900px){
  .wood-grid{ grid-template-columns: 1fr; }
  .wood-photos{ grid-template-columns: 1fr; }
}

/* ===== 12) Sos Laboratuvarı ===== */
.sauce-lab{ padding: 48px 0; }
.lab-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.lab-facts{ margin: 10px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.lab-facts li{ background: rgba(255,255,255,.05); border:1px solid var(--border); border-radius: 12px; padding: 8px 12px; }

.lab-canvas{
  position: relative; height: 240px; border:1px dashed var(--border); border-radius: 16px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,193,59,.08), transparent 60%),
              linear-gradient(135deg, rgba(255,100,55,.08), rgba(255,255,255,0) 60%);
  overflow:hidden;
}
.drop{
  position:absolute; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, rgba(255,100,55,.9) 60%);
  animation: drip 6s ease-in-out infinite;
  opacity:.9;
}
.drop:nth-child(1){ left: 8%; top: 12%; animation-duration: 5.6s; }
.drop:nth-child(2){ left: 22%; top: 40%; animation-duration: 6.3s; }
.drop:nth-child(3){ left: 38%; top: 18%; animation-duration: 7.1s; }
.drop:nth-child(4){ left: 54%; top: 50%; animation-duration: 5.2s; }
.drop:nth-child(5){ left: 66%; top: 24%; animation-duration: 6.8s; }
.drop:nth-child(6){ left: 78%; top: 62%; animation-duration: 7.4s; }
.drop:nth-child(7){ left: 34%; top: 72%; animation-duration: 6.1s; }
.drop:nth-child(8){ left: 12%; top: 60%; animation-duration: 5.4s; }

@keyframes drip{
  0%,100%{ transform: translate(0,0) scale(1); filter: drop-shadow(0 0 6px rgba(255,193,59,.25)); }
  50%{ transform: translate(6px, 8px) scale(1.08); filter: drop-shadow(0 0 10px rgba(255,100,55,.35)); }
}

.lab-photos{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; grid-column: 1 / -1; }
.lab-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.lab-card img{ display:block; width:100%; height:auto; max-width:350px; margin-inline:auto; }
.lab-card figcaption{ color: var(--muted); font-size: 13px; padding: 8px 12px 12px; }

@media (max-width: 900px){
  .lab-inner{ grid-template-columns: 1fr; }
  .lab-photos{ grid-template-columns: 1fr; }
}

/* ===== 13) Servis Koreografisi ===== */
.service-flow{ padding: 48px 0; }
.timeline{
  position: relative; border:1px solid var(--border); border-radius: 16px; padding: 16px 16px 8px;
  background: rgba(255,255,255,.03);
  --t: 0; /* 0..1, JS ile genişler */
}
.timeline::before,
.timeline::after{
  content:""; position:absolute; left: 16px; right: 16px; height: 4px; border-radius: 999px; top: 42px;
}
.timeline::before{ background: rgba(255,255,255,.08); }
.timeline::after{
  background: linear-gradient(90deg, rgba(255,100,55,.7), rgba(255,193,59,.7));
  width: calc(var(--t) * 100%);
  transition: width 1.2s ease;
}

.steps{
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; margin-top: 24px;
}
.step{
  background: var(--card); border:1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  box-shadow: var(--shadow);
}
.step b{ font-weight: 700; margin-right: 8px; }

.service-photos{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px;
}
.service-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow); }
.service-card img{ width:100%; height:auto; max-width:350px; margin-inline:auto; }
.service-card figcaption{ color: var(--muted); font-size: 13px; padding: 8px 12px 12px; }

@media (max-width: 900px){
  .service-photos{ grid-template-columns: 1fr; }
}
/* ===== 14) Tat Albümü ===== */
.taste-album{ padding: 48px 0; }
.album-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px; align-items: stretch;
}
.album-tile{
  border:1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
  display:flex; flex-direction: column; overflow:hidden; position:relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.album-tile img{ display:block; width:100%; height:auto; max-width:350px; margin-inline:auto; }
.album-tile figcaption{ color: var(--muted); font-size:13px; padding: 8px 12px 12px; }
.album-tile.typecard{ padding: 14px; }
.album-tile.typecard h3{ margin: 4px 0 6px; font-size: clamp(16px, 1.8vw, 18px); }
.album-tile.typecard p{ color: var(--muted); margin:0; }

@media (hover:hover){
  .album-tile:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 14px 36px rgba(0,0,0,.45); }
}

/* şekilli kırpma */
.squircle{ clip-path: path("M0,40 Q0,0 40,0 H60 Q100,0 100,40 V60 Q100,100 60,100 H40 Q0,100 0,60 Z"); }
.wavecut{ clip-path: polygon(0 0, 100% 0, 100% 86%, 76% 92%, 52% 88%, 30% 95%, 0 90%); }

@media (max-width: 1100px){ .album-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){ .album-grid{ grid-template-columns: 1fr; } }

/* ===== 15) Usta & Ekip — halo portreleri ===== */
.team-glow{ padding: 48px 0; }
.team-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.halo-card{ position:relative; border:1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow:hidden; box-shadow: var(--shadow); }
.halo-card figure{ margin:0; }
.halo-card img{ display:block; width:100%; height:auto; max-width:350px; margin-inline:auto; }
.halo-card figcaption{ color: var(--muted); font-size:13px; padding: 8px 12px 12px; }
.halo{
  position:absolute; inset:0; pointer-events:none;
  --mx: 50%; --my: 50%;
  background:
    radial-gradient(220px 220px at var(--mx) var(--my), rgba(255,193,59,.18), transparent 60%),
    radial-gradient(120px 120px at var(--mx) var(--my), rgba(255,100,55,.12), transparent 60%);
  mix-blend-mode: screen;
  transition: opacity .25s ease;
  opacity:.95;
}
@media (hover:hover){
  .halo-card:hover .halo{ opacity: 1; }
}
@media (max-width: 820px){ .team-grid{ grid-template-columns: 1fr; } }

/* ===== 16) Manifesto ===== */
.manifesto{ padding: 48px 0 56px; }
.runner{
  height: 6px; border-radius: 999px; margin: 6px 0 18px;
  width: 0%;
  background: linear-gradient(90deg, rgba(255,100,55,.8), rgba(255,193,59,.8));
  box-shadow: 0 0 12px rgba(255,193,59,.35);
  transition: width 1.6s ease;
}
.runner.run{ width: 100%; }
.m-lines{
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}
.m-lines li{
  background: rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
}
.m-lines b{ color: #fff; font-weight: 700; }

/* hareket azaltma */
@media (prefers-reduced-motion: reduce){
  .halo{ transition: none; }
  .runner{ transition: none; }
}
/* ===== 16) İletişim Formu ===== */
.contact-form{ padding: 48px 0 56px; }
.contact-header{ margin-bottom: 14px; }
.contact-meta{ margin: 6px 0 0; color: var(--muted); }
.contact-meta a{ color: inherit; text-decoration: underline dotted; }

.form-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.field-wide{ grid-column: 1 / -1; }

.field input,
.field textarea{
  width: 100%;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.field textarea{ min-height: 132px; resize: vertical; }

.field input:focus-visible,
.field textarea:focus-visible{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,100,55,.25);
}

.form-checkbox{
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.form-checkbox input{ width: 18px; height: 18px; accent-color: #ff6437; }

.cta-button{
  justify-self: start;
  padding: 12px 16px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #121214;
  box-shadow: var(--shadow);
  transition: transform .15s ease, filter .2s ease;
}
@media (hover:hover){
  .cta-button:hover{ transform: translateY(-2px) scale(1.02); filter: saturate(1.05); }
}

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Responsive */
@media (max-width: 820px){
  .form-wrapper{ grid-template-columns: 1fr; }
  .cta-button{ justify-self: stretch; }
}
/* Базовые переменные для колеса */
.wheel-labels{
  --count: 6;         /* количество пунктов */
  --r: 120px;         /* радиус размещения подписей */
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wheel-labels li{
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    rotate(calc(360deg / var(--count) * var(--i)))
    translate(var(--r))
    rotate(calc(-360deg / var(--count) * var(--i)));
  transform-origin: center;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}

/* Индексы без инлайнов */
.wheel-labels li:nth-child(1){ --i: 0; }
.wheel-labels li:nth-child(2){ --i: 1; }
.wheel-labels li:nth-child(3){ --i: 2; }
.wheel-labels li:nth-child(4){ --i: 3; }
.wheel-labels li:nth-child(5){ --i: 4; }
.wheel-labels li:nth-child(6){ --i: 5; }

/* Адаптивный радиус при узких экранах (по желанию) */
@media (max-width: 560px){
  .wheel-labels{ --r: 88px; }
}