/* ==========================================================================
   İletişim · Dilekçe
   ========================================================================== */

.dk-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px clamp(32px, 6vw, 110px);
  align-items: end;
  padding-bottom: clamp(36px, 5vw, 70px);
}
.dk-head .label { grid-column: 1 / -1; }
.dk-head__h { font-size: clamp(2.7rem, 6vw, 6.4rem); text-transform: uppercase; max-width: 15ch; }
.dk-head__lead { max-width: 44ch; }

.dk {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: start;
  padding-bottom: var(--section);
}
.dk__desk { position: relative; perspective: 1800px; }

/* ---------- Dilekçe kâğıdı ---------- */

.letter {
  --line: 2.15;
  position: relative;
  padding: clamp(28px, 5vw, 76px) clamp(22px, 5.4vw, 84px) clamp(28px, 4vw, 56px);
  background: var(--sheet);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 40px 80px -40px rgba(0, 0, 0, 0.45),
    0 12px 24px -16px rgba(0, 0, 0, 0.22);
  font-size: clamp(1.06rem, 0.98rem + 0.32vw, 1.24rem);
  line-height: var(--line);
}
/* sol kenarda delgeç delikleri */
.letter::before {
  content: "";
  position: absolute;
  left: clamp(8px, 1.4vw, 22px);
  top: 50%;
  width: 12px;
  height: 172px;
  transform: translateY(-50%);
  background: radial-gradient(circle, var(--paper-2) 5.5px, transparent 6.5px) 0 0 / 12px 80px repeat-y;
  box-shadow: none;
  opacity: 0.9;
}

.letter__notice { margin-bottom: 24px; padding: 10px 14px; font-family: var(--font-sans); font-stretch: 88%; font-size: var(--t-small); line-height: 1.4; border-left: 3px solid currentColor; }
.letter__notice.is-ok { color: #1c7a43; background: rgba(28, 122, 67, 0.07); }
.letter__notice.is-error { color: var(--red); background: rgba(207, 65, 47, 0.07); }

.letter__date { text-align: right; font-family: var(--font-type); font-size: 0.95em; color: var(--ink-2); }
.letter__to {
  display: grid;
  justify-items: center;
  margin: clamp(22px, 3vw, 40px) 0 clamp(22px, 3vw, 38px);
  font-family: var(--font-sans);
  font-weight: 760;
  font-stretch: 76%;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3rem);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
}
.letter__subject { margin-bottom: 18px; line-height: 1.5; }
.letter__k { font-family: var(--font-sans); font-weight: 700; font-stretch: 80%; margin-right: 0.3em; }
.letter__subject [data-mirror] { font-family: var(--font-type); color: var(--pen); }

.letter__body p { text-indent: 2.2em; }
.letter__body p + p, .letter__body .letter__msg + p { margin-top: 0.4em; }

/* satır içi boşluk */
.letter .blank {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  text-indent: 0;
  gap: 0;
}
.letter .blank input.in,
.letter .blank select.in {
  width: var(--w, 14ch);
  min-width: 7ch;
  max-width: 100%;
  padding: 0 3px 1px;
  border: 0;
  border-bottom: 1.5px dotted var(--ink-3);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-type);
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--pen);
}
@supports (field-sizing: content) {
  .letter .blank input.in { field-sizing: content; width: auto; min-width: var(--w, 14ch); }
}
.letter .blank select.in {
  width: auto;
  padding-right: 1.4em;
  appearance: none;
  -webkit-appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%2323409c' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat right 3px center / 10px 7px;
  cursor: pointer;
}
.letter .blank input.in:focus,
.letter .blank select.in:focus { outline: none; border-bottom: 1.5px solid var(--pen); background-color: rgba(242, 223, 79, 0.28); }
.letter .blank input.in::placeholder { color: var(--ink-3); opacity: 0.75; font-style: normal; }
.letter .blank .field__err {
  position: absolute;
  left: 0; top: calc(100% - 0.35em);
  z-index: 2;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1.2;
  text-indent: 0;
}
.letter .field.has-error input.in, .letter .field.has-error select.in { border-bottom: 1.5px solid var(--red); }

/* mesaj: çizgili satırlar */
.letter__msg { margin: 0.6em 0 0.5em; gap: 2px; }
.letter__msg label { font-family: var(--font-serif); font-style: normal; font-size: 1em; color: var(--ink); text-indent: 2.2em; }
.letter .letter__msg textarea.in {
  min-height: calc(1.9em * 5);
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  font-family: var(--font-type);
  font-size: 0.95em;
  line-height: 1.9em;
  color: var(--pen);
  background: linear-gradient(transparent calc(1.9em - 1px), rgba(26, 26, 29, 0.18) calc(1.9em - 1px)) 0 0 / 100% 1.9em local;
  resize: vertical;
}
.letter .letter__msg textarea.in:focus { outline: none; background-color: rgba(242, 223, 79, 0.12); }
.letter__msg .field__err { line-height: 1.3; }

.letter__arz { margin-top: 0.6em; }

/* imza */
.letter__sign {
  display: grid;
  justify-items: end;
  gap: 2px;
  margin: clamp(18px, 3vw, 34px) 0 0 auto;
  text-align: right;
  line-height: 1.3;
}
.letter__sdate { font-family: var(--font-type); font-size: 0.85em; color: var(--ink-2); }
.letter__sname {
  min-height: 1.3em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
  color: var(--pen);
  transform: rotate(-2deg);
  transform-origin: right;
}
.letter__sname.is-empty { color: var(--ink-3); opacity: 0.45; }
.letter__sline { min-width: 13em; padding-top: 4px; border-top: 1px solid var(--rule-2); font-style: italic; font-size: 0.75em; color: var(--ink-3); }

.letter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(26px, 4vw, 46px);
  padding-top: 20px;
  border-top: 1px dashed var(--rule-2);
  line-height: 1.4;
}
.letter__foot .form-status { flex: 1 1 220px; }
.sendbtn {
  --b-bg: var(--red);
  --b-bg-solid: var(--red);
  --b-fg: var(--sheet);
  border-color: var(--red);
  margin-left: auto;
  font-size: 1.05rem;
}
.letter.is-busy .sendbtn { opacity: 0.6; pointer-events: none; }

/* ALINDI kaşesi */
.alindi {
  position: absolute;
  left: clamp(14px, 9%, 96px);
  bottom: clamp(96px, 11%, 150px);
  z-index: 3;
  width: clamp(170px, 32%, 260px);
  color: var(--red);
  mix-blend-mode: multiply;
  filter: url(#ink);
  pointer-events: none;
  opacity: 0;
  --rot: -9deg;
  transform: rotate(var(--rot));
}
.alindi svg { width: 100%; height: auto; overflow: visible; }
.alindi text { font-family: var(--font-sans); fill: currentColor; }
.letter.is-received .alindi { opacity: 1; }
.js .letter.is-stamped .alindi { animation: stamp 0.5s var(--ease-out) both; }

/* ---------- Katlama ve zarf (JS ile kurulur) ---------- */

.fold { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fold__panel { position: absolute; left: 0; right: 0; transform-style: preserve-3d; }
.fold__face, .fold__back { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fold__back { background: #f1eee6; transform: rotateX(180deg); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.05); }
.fold__clone { position: absolute; left: 0; right: 0; margin: 0 !important; transform: none !important; box-shadow: none !important; }
.fold__panel--top { transform-origin: 50% 100%; }
.fold__panel--bot { transform-origin: 50% 0; }
.fold__crease { position: absolute; left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, 0.12); }

.zarf { position: absolute; z-index: 3; pointer-events: none; }
.zarf__back {
  position: absolute; inset: 0;
  background: #d9c9a3;
  border-radius: 4px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
.zarf__pocket {
  position: absolute; inset: 0;
  z-index: 6;
  background: linear-gradient(160deg, #e6d7b2, #d6c49b);
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  border-radius: 4px;
}
.zarf__pocket::after {
  content: "ARSLANLI YATIRIM & DANIŞMANLIK · İSTANBUL";
  position: absolute; left: 50%; bottom: 18%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-type);
  font-size: clamp(0.62rem, 1.4vw, 0.82rem);
  letter-spacing: 0.06em;
  color: rgba(26, 26, 29, 0.6);
}
.zarf__flap {
  position: absolute; left: 0; right: 0; top: 0;
  height: 56%;
  z-index: 1;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, #cfbc90, #dccca6);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* gönderim sonrası */
.dk__post { position: relative; }
.dk__done {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: clamp(28px, 4vw, 56px);
  border: 1.5px solid var(--ink);
  background: var(--sheet);
}
.dk__done:focus { outline: none; }
.dk__done-h { font-size: clamp(2.2rem, 4.4vw, 4rem); }
.dk__done-msg { max-width: 46ch; color: var(--ink-2); }

/* ---------- Kartvizit ---------- */

.dk__side { position: sticky; top: calc(var(--hdr-h) + 24px); display: grid; gap: clamp(28px, 4vw, 48px); }
.kv { position: relative; perspective: 1200px; }
.kv__in {
  position: relative;
  aspect-ratio: 85 / 55;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-out);
}
.kv.is-flipped .kv__in { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .kv:hover .kv__in { transform: rotateY(180deg); }
  .kv.is-flipped:hover .kv__in { transform: rotateY(180deg); }
}
.kv__face {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: clamp(16px, 2vw, 26px);
  background: #fbfaf6;
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 26px 50px -28px rgba(0, 0, 0, 0.5), 0 6px 14px -8px rgba(0, 0, 0, 0.2);
}
.kv__front { border-bottom: 6px solid var(--navy); }
.kv__back { transform: rotateY(180deg); background: var(--navy); color: var(--sheet); }
.kv__id { display: grid; gap: 8px; }
.kv__logo { display: block; width: 46%; color: var(--navy); }
.kv__name { font-family: var(--font-sans); font-weight: 700; font-stretch: 80%; font-size: clamp(0.9rem, 1.1vw, 1.02rem); }
.kv__rows { display: grid; gap: 2px; font-family: var(--font-sans); font-weight: 560; font-stretch: 85%; font-size: clamp(0.88rem, 1.1vw, 1rem); }
.kv__rows a, .kv__addr { text-decoration: none; }
.kv__rows a:hover, .kv__addr:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kv__k { font-style: italic; font-size: var(--t-small); opacity: 0.7; }
.kv__addr { font-size: clamp(0.92rem, 1.1vw, 1.05rem); line-height: 1.4; }
.kv__flip {
  margin-top: 12px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-style: italic;
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (hover: hover) and (pointer: fine) { .kv__flip { opacity: 0; } .kv__flip:focus-visible { opacity: 1; } }
/* JS yoksa iki yüz alt alta */
html:not(.js) .kv__in { aspect-ratio: auto; display: grid; gap: 14px; transform: none !important; }
html:not(.js) .kv__face { position: relative; aspect-ratio: 85 / 55; transform: none; backface-visibility: visible; }
html:not(.js) .kv__flip { display: none; }

.dk__direct { display: grid; border-top: 1.5px solid var(--ink); }
.dk__direct > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.dk__direct dt { font-style: italic; color: var(--ink-3); font-size: var(--t-small); padding-top: 2px; }
.dk__direct dd a { text-decoration: none; font-family: var(--font-sans); font-weight: 620; font-stretch: 85%; font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.dk__direct dd a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.dk__direct > div:last-child dd a { font-family: var(--font-serif); font-weight: 400; font-size: 0.98rem; }

@media (max-width: 960px) {
  .dk-head { grid-template-columns: 1fr; }
  .dk { grid-template-columns: 1fr; }
  .dk__side { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 640px) {
  .dk__side { grid-template-columns: 1fr; }
  .kv { max-width: 380px; }
  .letter { line-height: 2; }
  .letter__body p { text-indent: 0; }
  .letter__msg label { text-indent: 0; }
  .letter::before { display: none; }
  .alindi { left: 10px; bottom: 150px; width: 160px; }
}