/* 24.10.2026, second form (operator: "es passt nichtmal auf eine komplette seite … choose file bereich seiht scheisse aus …
   die apple schrift auf shoppanel … konu bereich … moderner animiert … datumsauswahl"): the contact panel (iletisim.js)
   with fixed head and foot around one scrolling body, topic tiles, drop zone with preview, own calendar and counter, in
   the ShopPanel's typeface (Inter, self-hosted, OFL; Apple stack as fallback). Colours follow the page: the start page is
   dark (cinema.css), the others light. The band at the end stands on the start page. */
@font-face {
  font-family: EmonseUI;
  src: url('/assets/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
html:has(.iletisim[open]) {
  overflow: hidden;
}
.iletisim {
  --il-zemin: var(--light);
  --il-yazi: var(--ink);
  --il-soluk: var(--muted);
  --il-vurgu: var(--accent);
  --il-cizgi: color-mix(in srgb, var(--ink) 13%, transparent);
  --il-alan: color-mix(in srgb, var(--ink) 4%, var(--light));
  --il-alan-ust: color-mix(in srgb, var(--ink) 7%, var(--light));
  --il-isik: color-mix(in srgb, var(--accent) 22%, transparent);
  --il-yay: cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
  width: min(780px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--il-cizgi);
  border-radius: 22px;
  background:
    radial-gradient(
      110% 70% at 0% 0%,
      color-mix(in srgb, var(--accent) 16%, transparent),
      transparent 62%
    ),
    radial-gradient(
      80% 60% at 100% 100%,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 70%
    ),
    var(--il-zemin);
  color: var(--il-yazi);
  font:
    400 14px/1.45 EmonseUI,
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    system-ui,
    sans-serif;
  letter-spacing: -0.006em;
  box-shadow:
    0 30px 80px -30px #000c,
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.iletisim[open] {
  animation: il-ac 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.iletisim::backdrop {
  background: color-mix(in srgb, #090b0d 72%, transparent);
  backdrop-filter: blur(6px);
}
.iletisim[open]::backdrop {
  animation: il-perde 0.3s ease both;
}
@keyframes il-ac {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
}
@keyframes il-perde {
  from {
    opacity: 0;
  }
}
/* The pages style bare elements (base.css: header absolute at 100 px; account.css: form at most 450 px wide, label with a
   margin, dd right-aligned); head, foot and confirmation are therefore plain divs, and the panel sets the rest itself. */
.il-govde {
  max-width: none;
}
.il-konu,
.il-birak {
  margin: 0;
  font-size: inherit;
}
.il-konu input,
.il-hak input {
  padding: 0;
}
.il-kabuk {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 26px);
}
.il-kabuk.is-gonderildi {
  grid-template-rows: auto minmax(0, 1fr);
}
.il-kabuk.is-gonderildi .il-govde,
.il-kabuk.is-gonderildi .il-fuss {
  display: none;
}
.iletisim svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Head */
.il-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 10px;
}
.il-etiket {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--il-isik);
  color: var(--il-vurgu);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.il-kopf h2 {
  margin: 6px 0 2px;
  font:
    700 24px/1.1 EmonseUI,
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  letter-spacing: -0.03em;
}
.il-kopf p {
  max-width: 560px;
  margin: 0;
  color: var(--il-soluk);
  font-size: 13px;
}
.il-kapat {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--il-cizgi);
  border-radius: 50%;
  background: var(--il-alan);
  color: inherit;
  cursor: pointer;
  transition:
    transform 0.25s var(--il-yay),
    background 0.2s;
}
.il-kapat:hover {
  transform: rotate(90deg);
  background: var(--il-alan-ust);
}

/* Body */
.il-govde {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 4px 24px 14px;
  scrollbar-color: var(--il-cizgi) transparent;
}
.il-konular {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.il-konular legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--il-soluk);
}
.il-konu {
  position: relative;
}
.il-konu input,
.il-birak input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.il-konu-kart {
  position: relative;
  display: grid;
  gap: 2px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 11px 9px;
  border: 1px solid var(--il-cizgi);
  border-radius: 16px;
  background: var(--il-alan);
  cursor: pointer;
  transition:
    transform 0.25s var(--il-yay),
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.25s;
}
.il-konu-kart b {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.il-konu-kart small {
  color: var(--il-soluk);
  font-size: 11.5px;
  line-height: 1.3;
}
.il-konu-ikon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: var(--il-alan-ust);
  color: var(--il-vurgu);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.3s var(--il-yay);
}
.il-konu-tik {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--il-vurgu);
  color: var(--il-zemin);
  transform: scale(0);
  transition: transform 0.3s var(--il-yay);
}
.il-konu-tik svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}
.il-konu:hover .il-konu-kart {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.il-konu input:checked + .il-konu-kart {
  border-color: var(--il-vurgu);
  background: color-mix(in srgb, var(--accent) 11%, var(--light));
  box-shadow:
    0 0 0 3px var(--il-isik),
    0 14px 30px -18px var(--accent);
}
.il-konu input:checked + .il-konu-kart .il-konu-ikon {
  background: var(--il-vurgu);
  color: var(--il-zemin);
  transform: scale(1.06);
}
.il-konu input:checked + .il-konu-kart .il-konu-tik {
  transform: scale(1);
}
.il-konu input:focus-visible + .il-konu-kart {
  outline: 2px solid var(--il-vurgu);
  outline-offset: 2px;
}

/* Fields */
.il-izgara {
  display: grid;
  gap: 10px 12px;
}
.il-iletisim {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.il-siparis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 2px 0;
}
.il-acilir {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -12px;
  opacity: 0;
  transition:
    grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    margin 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s;
}
.il-acilir > div {
  min-height: 0;
  overflow: hidden;
}
/* Open, the block lets the calendar (takvim.js) reach out over what follows; only after its 0.4 s opening, so nothing
   shows outside the block while it grows. Closing hides it at once. */
.il-acilir.is-acik > div {
  overflow: visible;
  transition: overflow 0s 0.4s allow-discrete;
}
.il-acilir.is-acik {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
}
.il-alan {
  display: grid;
  gap: 5px;
  align-content: start;
  margin: 0;
  font-size: inherit;
}
.il-alan > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--il-soluk);
}
.il-alan em {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--il-alan-ust);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 500;
}
.il-alan em[hidden],
.il-tarih-sil[hidden],
.il-onizleme[hidden],
.il-birak[hidden] {
  display: none;
}
.il-tam {
  grid-column: 1 / -1;
}
.iletisim input:not([type='checkbox'], [type='radio'], [type='file']),
.iletisim textarea,
.il-tarih-sec {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid var(--il-cizgi);
  border-radius: 12px;
  background: var(--il-alan);
  color: inherit;
  font: inherit;
  font-size: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.iletisim textarea {
  height: auto;
  min-height: 64px;
  padding: 10px 13px;
  resize: vertical;
}
.iletisim input::placeholder,
.iletisim textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 38%, transparent);
}
.iletisim input:not([type='checkbox'], [type='radio']):hover,
.iletisim textarea:hover,
.il-tarih-sec:hover {
  background: var(--il-alan-ust);
}
.iletisim input:not([type='checkbox'], [type='radio']):focus,
.iletisim textarea:focus,
.il-tarih-sec:focus-visible,
.il-tarih-sec[aria-expanded='true'] {
  border-color: var(--il-vurgu);
  outline: none;
  box-shadow: 0 0 0 4px var(--il-isik);
}
.il-sayac {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 6px;
}
.il-sayac button {
  height: 42px;
  border: 1px solid var(--il-cizgi);
  border-radius: 12px;
  background: var(--il-alan);
  color: inherit;
  font:
    500 18px/1 EmonseUI,
    system-ui,
    sans-serif;
  cursor: pointer;
  transition:
    transform 0.2s var(--il-yay),
    background 0.2s;
}
.il-sayac button:hover {
  background: var(--il-alan-ust);
}
.il-sayac button:active {
  transform: scale(0.92);
}
.iletisim .il-sayac input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.il-sayac input::-webkit-inner-spin-button,
.il-sayac input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}
.il-tarih {
  position: relative;
  display: flex;
}
.il-tarih-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--il-soluk);
  text-align: left;
  cursor: pointer;
}
.il-tarih-sec svg {
  flex: none;
  color: var(--il-vurgu);
}
.il-tarih-sec.is-secili {
  padding-right: 42px;
  color: var(--il-yazi);
  font-weight: 550;
}
.il-tarih-yazi {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.il-tarih-sil {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--il-soluk);
  cursor: pointer;
}
.il-tarih-sil:hover {
  background: var(--il-alan-ust);
}
/* Our own calendar (takvim.js), after the ShopPanel's export dialog: the month between two arrows, Monday first, days
   as tiles; today ringed, the chosen day in the accent, past days faded. It lies over what follows, the panel keeps its
   height. Aligned to the field's right edge, which is the panel's on every width, so it grows into the panel. */
.il-takvim {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 3;
  box-sizing: border-box;
  width: min(100%, 320px);
  min-width: 284px;
  padding: 12px;
  border: 1px solid var(--il-cizgi);
  border-radius: 16px;
  background: var(--il-zemin);
  box-shadow:
    0 22px 48px -12px color-mix(in srgb, #000 45%, transparent),
    0 2px 6px color-mix(in srgb, #000 12%, transparent);
  transform-origin: calc(100% - 24px) 0;
  animation: il-takvim 0.22s var(--il-yay) both;
}
.il-takvim[hidden] {
  display: none;
}
@keyframes il-takvim {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}
.il-takvim-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.il-takvim-kopf b {
  font-size: 14px;
  font-weight: 650;
}
.il-takvim button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.2s var(--il-yay);
}
.il-takvim-kopf button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.il-takvim-kopf svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.il-takvim-gunler,
.il-takvim-izgara {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.il-takvim-gunler span {
  padding: 4px 0 6px;
  color: var(--il-soluk);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.il-takvim-izgara button {
  height: 36px;
  border-radius: 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.il-takvim button:hover:not(:disabled) {
  background: var(--il-alan-ust);
}
.il-takvim-izgara button:active:not(:disabled) {
  transform: scale(0.9);
}
.il-takvim-izgara .is-disarida {
  color: var(--il-soluk);
  opacity: 0.6;
}
.il-takvim-izgara .is-bugun {
  box-shadow: inset 0 0 0 1px var(--il-vurgu);
  font-weight: 650;
}
.il-takvim-izgara .is-secili,
.il-takvim-izgara .is-secili:hover:not(:disabled) {
  background: var(--il-vurgu);
  color: var(--paper);
  font-weight: 650;
}
.il-takvim button:disabled {
  opacity: 0.3;
  cursor: default;
}
.il-takvim button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--il-isik);
}

/* File */
.il-birak {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 16px;
  background: var(--il-alan);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.25s,
    transform 0.25s var(--il-yay);
}
.il-birak:hover,
.il-birak.is-uzerinde {
  border-color: var(--il-vurgu);
  background: color-mix(in srgb, var(--accent) 8%, var(--light));
}
.il-birak.is-uzerinde {
  box-shadow: 0 0 0 4px var(--il-isik);
  transform: scale(1.01);
}
.il-birak:focus-within {
  border-color: var(--il-vurgu);
  box-shadow: 0 0 0 4px var(--il-isik);
}
.il-birak-ikon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(
    140deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 55%, var(--ink))
  );
  /* Text on the accent takes the page's paper: dark on the light accent of the start page, light on the others. */
  color: var(--paper);
  box-shadow: 0 10px 22px -12px var(--accent);
  transition: transform 0.3s var(--il-yay);
}
.il-birak:hover .il-birak-ikon {
  transform: translateY(-2px);
}
.il-birak-metin {
  display: grid;
  gap: 2px;
  color: var(--il-soluk);
  font-size: 13px;
}
.il-birak-metin b {
  color: var(--il-yazi);
  font-weight: 650;
}
.il-birak-metin small {
  font-size: 11.5px;
}
.il-onizleme {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--il-cizgi);
  border-radius: 16px;
  background: var(--il-alan);
  animation: il-kart 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes il-kart {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
.il-onizleme-resim {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 54px;
  height: 70px;
  overflow: hidden;
  border: 1px solid var(--il-cizgi);
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, var(--il-alan-ust) 0 6px, var(--il-alan) 6px 12px);
}
.il-onizleme-resim img,
.il-onizleme-resim canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
  opacity: 0;
  transition: opacity 0.35s;
}
.il-onizleme.is-hazir .il-onizleme-resim img,
.il-onizleme.is-hazir .il-onizleme-resim canvas {
  opacity: 1;
}
.il-onizleme-resim img[hidden],
.il-onizleme-resim canvas[hidden] {
  display: none;
}
.il-onizleme-tur {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, #090b0d 72%, transparent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.il-onizleme-bilgi {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 34px;
}
.il-onizleme-ad {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.il-onizleme-boyut {
  color: var(--il-soluk);
  font-size: 12px;
}
.il-hak {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 12.5px;
  cursor: pointer;
}
.il-hak input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--accent);
}
.il-onizleme-sil {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--il-soluk);
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.25s var(--il-yay);
}
.il-onizleme-sil:hover {
  background: var(--il-alan-ust);
  transform: rotate(90deg);
}
.il-bilgi {
  margin: 2px 0 0;
  color: var(--il-soluk);
  font-size: 10.5px;
  line-height: 1.4;
}
.il-bilgi a {
  color: inherit;
}

/* Foot */
.il-fuss {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 12px;
  border-top: 1px solid var(--il-cizgi);
  background: color-mix(in srgb, var(--light) 82%, transparent);
  backdrop-filter: blur(10px);
}
.il-turnstile {
  flex: 0 1 auto;
  min-width: 0;
}
.il-turnstile:empty {
  display: none;
}
.il-durum {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--il-soluk);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.il-gonder,
.il-ikincil {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  font:
    650 14.5px/1 EmonseUI,
    -apple-system,
    system-ui,
    sans-serif;
  cursor: pointer;
  transition:
    transform 0.25s var(--il-yay),
    box-shadow 0.25s,
    opacity 0.2s,
    background 0.2s;
}
.il-gonder {
  background: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 60%, var(--ink))
  );
  color: var(--paper);
  box-shadow: 0 12px 26px -14px var(--accent);
}
.il-gonder svg {
  transition: transform 0.25s var(--il-yay);
}
.il-gonder:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -14px var(--accent);
}
.il-gonder:hover:not(:disabled) svg {
  transform: translateX(3px);
}
.il-gonder:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.il-gonder.is-gonderiliyor {
  cursor: progress;
}
.il-gonder.is-gonderiliyor svg {
  animation: il-git 0.9s ease-in-out infinite;
}
@keyframes il-git {
  50% {
    transform: translateX(5px);
    opacity: 0.4;
  }
}
.il-ikincil {
  border: 1px solid var(--il-cizgi);
  background: var(--il-alan);
  color: inherit;
}
.il-ikincil[hidden] {
  display: none;
}

/* Confirmation */
.il-basari {
  display: grid;
  justify-items: center;
  gap: 8px;
  overflow: auto;
  padding: 8px 24px 26px;
  text-align: center;
  animation: il-kart 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.il-basari[hidden] {
  display: none;
}
.il-basari-ikon svg {
  width: 64px;
  height: 64px;
  color: var(--il-vurgu);
  stroke-width: 2.6;
}
.il-basari-ikon circle {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: il-ciz 0.6s 0.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.il-basari-ikon path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: il-ciz 0.35s 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes il-ciz {
  to {
    stroke-dashoffset: 0;
  }
}
.il-basari h3 {
  margin: 6px 0 0;
  font:
    700 22px/1.15 EmonseUI,
    -apple-system,
    system-ui,
    sans-serif;
  letter-spacing: -0.02em;
}
.il-basari > p {
  margin: 0;
  color: var(--il-soluk);
}
.il-ozet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 18px;
  width: min(420px, 100%);
  margin: 12px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--il-cizgi);
  border-radius: 16px;
  background: var(--il-alan);
  text-align: left;
}
.il-ozet dt {
  color: var(--il-soluk);
  font-size: 12px;
}
.il-ozet dd {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.il-ozet img {
  flex: none;
  width: 36px;
  height: 46px;
  border: 1px solid var(--il-cizgi);
  border-radius: 6px;
  object-fit: cover;
  background: #fff;
}
.il-numara {
  color: var(--il-soluk);
  font-size: 12px;
}
.il-numara code {
  font:
    500 11.5px/1 ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
}
.il-basari-dugmeler {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* Phone: the panel becomes a sheet of the whole screen; two tiles a row, one field a row (count and date side by side). */
@media (max-width: 640px) {
  .iletisim {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .il-kabuk {
    height: 100dvh;
    max-height: 100dvh;
  }
  .il-kopf {
    padding: 16px 16px 10px;
  }
  .il-kopf h2 {
    font-size: 22px;
  }
  .il-kopf p {
    font-size: 12px;
    line-height: 1.35;
  }
  .il-govde {
    padding: 2px 16px 16px;
  }
  .il-konular {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .il-konu-kart {
    padding: 10px;
  }
  .il-konu-ikon {
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
  }
  .il-iletisim {
    grid-template-columns: minmax(0, 1fr);
  }
  .il-siparis .il-alan:nth-child(-n + 2) {
    grid-column: 1 / -1;
  }
  .il-fuss {
    flex-wrap: wrap;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .il-turnstile {
    flex-basis: 100%;
  }
  .il-gonder {
    flex: 1 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .iletisim *,
  .iletisim[open],
  .iletisim[open]::backdrop {
    animation: none !important;
    transition: none !important;
  }
}

/* The band on the start page between the brass medallion and the way of an order (index.html). */
.kurumsal-bant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: 56px max(var(--gutter), calc((100% - 1080px) / 2));
  border-top: 1px solid var(--product-line);
  background: var(--product-surface);
  color: var(--product-ink);
}
.kurumsal-bant h2 {
  margin: 0 0 8px;
  font: 400 clamp(28px, 2.6vw, 40px) / 1.08 var(--display);
  letter-spacing: -0.05em;
}
.kurumsal-bant p {
  max-width: 620px;
  margin: 0;
  color: var(--product-muted);
}
/* The band's link and the contact page's button (contact.html#kurumsal) open the panel. 25.10.2026 (FORM-48, operator on
   "Teklif iste": "diesen knopf besser gestallten und animieren bei hover"): a dark pill with a soft shadow and an arrow
   in a light circle (a picture only, the name stays "Teklif iste"). On hover it rises a little, a light sweeps across, the
   arrow moves on and its circle turns light; pressed, it settles. With reduced motion only the colours change. Before, a
   flat dark field with 4 px corners that turned blue. */
.kurumsal-bant a,
.iletisim-ac {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 12px 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--product-ink, var(--ink));
  color: var(--product-surface, var(--paper));
  font: inherit;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 24px -16px rgb(34 38 65 / 75%);
  transition:
    transform 280ms var(--ease),
    box-shadow 280ms var(--ease);
}
.kurumsal-bant a::after,
.iletisim-ac::after {
  content: '';
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(248 247 243 / 14%)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8f7f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  transition:
    background-color 280ms ease,
    translate 280ms var(--ease);
}
/* The light that sweeps across, below the text. */
.kurumsal-bant a::before,
.iletisim-ac::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    rgb(255 255 255 / 0%) 30%,
    rgb(255 255 255 / 22%) 50%,
    rgb(255 255 255 / 0%) 70%
  );
  translate: -110% 0;
  transition: translate 720ms var(--ease);
}
.kurumsal-bant a:focus-visible,
.iletisim-ac:focus-visible {
  outline: 2px solid var(--product-focus, var(--accent));
  outline-offset: 3px;
}
@media (hover: hover) {
  .kurumsal-bant a:hover,
  .iletisim-ac:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px -18px rgb(34 38 65 / 80%);
  }
  .kurumsal-bant a:hover::before,
  .iletisim-ac:hover::before {
    translate: 110% 0;
  }
  .kurumsal-bant a:hover::after,
  .iletisim-ac:hover::after {
    translate: 3px 0;
    background-color: rgb(248 247 243);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222641' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  }
}
.kurumsal-bant a:active,
.iletisim-ac:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px -14px rgb(34 38 65 / 75%);
}
@media (prefers-reduced-motion: reduce) {
  .kurumsal-bant a,
  .iletisim-ac,
  .kurumsal-bant a::after,
  .iletisim-ac::after {
    transition: none;
  }
  .kurumsal-bant a::before,
  .iletisim-ac::before {
    display: none;
  }
  .kurumsal-bant a:hover,
  .iletisim-ac:hover,
  .kurumsal-bant a:active,
  .iletisim-ac:active {
    transform: none;
  }
  .kurumsal-bant a:hover::after,
  .iletisim-ac:hover::after {
    translate: none;
  }
}