/* ═══════════════════════════════════════════════════════════════════
   KONSEPT 9-PORTAL — DİJİTAL GÜMRÜK SALONU
   Ana sayfa filminin "dijital iç mekânı". Konsept-9 token ailesi:
   paper/ink/red, Archivo + Inter + IBM Plex Mono, klaket künyeler,
   yeşil tamamlanma (#22c55e), mühür dili.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper: #fbfbf9;
  --ink: #101214;
  --red: #ff0009;
  --red-block: #d40008;
  --red-deep: #b30009;
  --green: #22c55e;
  --green-deep: #15803d;
  --grey: #6a7076;
  --hair: rgba(16, 18, 20, .10);
  --gutter: clamp(16px, 3vw, 48px);
  --headerH: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-d: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-b: "Inter", "Segoe UI", Arial, sans-serif;
  --font-m: "IBM Plex Mono", "Consolas", monospace;
}

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

body {
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--red); color: #fff; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.mono {
  font-family: var(--font-m);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

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

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--ink); color: #fff; padding: .6rem 1.2rem;
  font-family: var(--font-m); font-size: .75rem; letter-spacing: .1em;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 8px; }

/* ═══ ARKA PLAN CANVAS — rota ağı + spotlight ═══ */
#bg {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ═══ ÜST BAR ═══ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 251, 249, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.topbar-inner {
  max-width: 1440px; margin-inline: auto;
  height: var(--headerH);
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 2.2rem);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand img { height: 22px; width: auto; }
.ai-rozet {
  font-size: .6rem;
  background: var(--red); color: #fff;
  padding: 2px 6px;
  letter-spacing: .12em;
}
.topbar-meta { color: var(--grey); margin-left: auto; white-space: nowrap; }
.topbar-link {
  color: var(--red-deep); white-space: nowrap;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
  transition: background-size 250ms var(--ease);
}
.topbar-link:hover { background-size: 100% 2px; }

/* ═══ EKRAN SİSTEMİ ═══ */
main { position: relative; z-index: 1; }
.screen { display: none; }
.screen.on { display: block; }
.js .screen.on { animation: ekranGel .3s var(--ease) both; }
.js .screen.out { animation: ekranGit .24s var(--ease) both; }
@keyframes ekranGel { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ekranGit { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.985); } }

/* ═══ EKRAN 0 — ÜÇ KAPI ═══ */
.salon {
  position: relative;
  min-height: calc(100svh - var(--headerH));
  display: flex; flex-direction: column;
  max-width: 1440px; margin-inline: auto;
  padding: 0 var(--gutter);
}
.ribbon {
  position: absolute; z-index: 0;
  top: 0; left: 0;
  width: 100%; height: 40%;
  pointer-events: none;
}
.ribbon path {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  opacity: .3;
}
/* Çizim animasyonu JS'te: gerçek kapı konumlarına göre geometri +
   getTotalLength dash — reduced-motion'da anında tam çizili. */

.salon-orta {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(1.1rem, 2.6svh, 1.8rem);
  padding-top: clamp(2.4rem, 8svh, 5rem);
  padding-bottom: 1.4rem;
  text-align: center;
}
.salon-kicker { color: var(--red-deep); }
.salon-h1 {
  font-family: var(--font-d);
  font-weight: 800; font-stretch: 113%;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.02; letter-spacing: -.03em;
  text-transform: uppercase;
}
.salon-h1 em { font-style: normal; color: var(--red); }

/* Kapı kartları */
.kapilar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.5rem);
  width: min(1100px, 100%);
  margin-top: clamp(.6rem, 2svh, 1.4rem);
}
.kapi {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .7rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--hair);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  min-height: clamp(220px, 30svh, 290px);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.kapi:hover { border-color: rgba(255, 0, 9, .55); box-shadow: 0 18px 50px rgba(16, 18, 20, .08); }
.kapi-tag { color: var(--grey); font-size: .62rem; }
.kapi-ad {
  font-family: var(--font-d);
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase;
}
.kapi-sub { font-size: .84rem; color: var(--grey); max-width: 26em; }
.kapi-cta { margin-top: auto; color: var(--red-deep); display: inline-flex; gap: .5rem; align-items: center; }
.kapi-cta .arr { transition: transform .25s var(--ease); }
.kapi:hover .kapi-cta .arr { transform: translateX(4px); }

/* Köşe braketleri — hover'da çizilir */
.corners { position: absolute; inset: 6px; pointer-events: none; }
.corners b {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--red);
  opacity: 0; transform: scale(.4);
  transition: opacity .25s var(--ease), transform .3s var(--ease);
}
.corners b:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; transform-origin: top left; }
.corners b:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; transform-origin: top right; }
.corners b:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; transform-origin: bottom left; }
.corners b:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; transform-origin: bottom right; }
.kapi:hover .corners b, .kapi:focus-within .corners b { opacity: 1; transform: scale(1); }

/* KAPI A — birincil kırmızı */
.kapi-a { background: var(--red-block); border-color: var(--red-block); color: #fff; }
.kapi-a .kapi-tag, .kapi-a .kapi-sub { color: rgba(255, 255, 255, .8); }
.kapi-a .kapi-cta { color: #fff; }
.kapi-a .corners b { border-color: #fff; }
.kapi-a:hover { border-color: var(--ink); box-shadow: 0 18px 50px rgba(212, 0, 8, .28); }
.kapi-a:focus-visible { outline-color: var(--ink); }

/* KAPI B — takip inputu */
.takip-inline { display: flex; gap: .5rem; margin-top: auto; width: 100%; }
.takip-inline input {
  flex: 1; min-width: 0;
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: .65rem .8rem;
  font-family: var(--font-m); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  outline: none;
  transition: border-color .25s var(--ease);
}
.takip-inline input:focus { border-color: var(--red); }
.takip-inline input::placeholder { color: rgba(106, 112, 118, .6); }
.takip-inline button {
  border: none;
  background: var(--ink); color: #fff;
  font-family: var(--font-d); font-weight: 700; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .02em;
  padding: .65rem 1.1rem;
  transition: background-color .25s var(--ease);
}
.takip-inline button:hover { background: var(--red); }

/* KAPI C — giriş butonları */
.giris-btnlar { display: flex; flex-direction: column; gap: .5rem; width: 100%; margin-top: auto; }
.giris-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%;
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: .68rem .8rem;
  font-size: .85rem; font-weight: 500;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.giris-btn:hover { border-color: var(--ink); background: #fff; }
/* Kayıt kapısı yasal satırı — Kullanıcı Sözleşmesi kabulü (konsept-9/tr/kullanici-sozlesmesi) */
.giris-yasal { color: var(--grey); font-size: .68rem; line-height: 1.45; margin-top: .6rem; }
.giris-yasal a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 2px; }
.giris-yasal a:hover { color: var(--red); }
.giris-acenta { display: block; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgba(16,18,20,.1); font-family: var(--font-m); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); text-decoration: none; }
.giris-acenta b { color: var(--ink); font-weight: 600; }
.giris-acenta:hover { color: var(--red-deep); }
.giris-acenta:hover b { color: var(--red-deep); }

/* Acenta çağrı satırı — kapıların dengesini bozmayan ince katman */
.acenta-satir {
  position: relative; z-index: 1;
  text-align: center;
  padding: .25rem 0 .9rem;
}
.acenta-satir a {
  color: var(--grey);
  font-size: .62rem;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat; background-size: 0% 2px; background-position: 50% 100%;
  transition: background-size .3s var(--ease), color .3s var(--ease);
}
.acenta-satir a:hover { color: var(--ink); background-size: 100% 2px; }
.acenta-satir .as-cta { color: var(--red-deep); }
.acenta-satir a:hover .as-cta { color: var(--red); }

/* Güven şeridi */
.guven-serit {
  position: relative; z-index: 1;
  border-top: 1px solid var(--hair);
  color: var(--grey);
  text-align: center;
  padding: .95rem 0 1.05rem;
  font-size: .64rem;
}

/* ═══ MOD BARI (sohbet + takip ortak) ═══ */
.mod-bar {
  max-width: 1280px; margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem var(--gutter) .9rem;
  border-bottom: 1px solid var(--hair);
}
.geri { color: var(--red-deep); white-space: nowrap; }
.geri:hover { color: var(--red); }
.mod-title { color: var(--ink); }
.mod-title:focus { outline: none; }
.demo-rozet {
  margin-left: auto;
  font-size: .58rem;
  color: var(--red-deep);
  border: 1px solid rgba(255, 0, 9, .35);
  padding: 4px 8px;
  white-space: nowrap;
}

/* ═══ EKRAN 1 — SOHBET + CANLI MANİFEST ═══ */
.mod-grid {
  max-width: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: 62fr 38fr;
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding: clamp(.9rem, 2vh, 1.4rem) var(--gutter) 1.6rem;
  align-items: stretch;
}
.sohbet-panel {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--hair);
  height: min(660px, calc(100svh - var(--headerH) - 160px));
  min-height: 420px;
}
.sohbet-log {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.1rem 1.1rem .6rem;
}
.balon {
  max-width: 84%;
  padding: .6rem .85rem;
  font-size: .88rem; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.js .balon { animation: balonGel .22s var(--ease) both; }
@keyframes balonGel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.balon.bot {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--red);
}
.balon.ben {
  align-self: flex-end;
  background: var(--ink); color: #fff;
}
.balon .b-tag {
  display: block;
  font-family: var(--font-m); font-size: .56rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey);
  margin-bottom: .3rem;
}
.balon.ben .b-tag { color: rgba(255, 255, 255, .55); }
.balon b { font-weight: 600; }
.balon .chat-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .55rem;
  border: none;
  background: var(--red); color: #fff;
  font-family: var(--font-d); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .02em;
  padding: .55rem .95rem;
  transition: background-color .25s var(--ease);
}
.balon .chat-cta:hover { background: var(--red-deep); }

.yaziyor {
  align-self: flex-start;
  display: flex; gap: 4px;
  padding: .75rem .9rem;
  background: var(--paper); border: 1px solid var(--hair); border-left: 2px solid var(--red);
}
.yaziyor i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grey);
  animation: yaziyorZipla 1s infinite;
}
.yaziyor i:nth-child(2) { animation-delay: .15s; }
.yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes yaziyorZipla { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.chips { display: flex; gap: .45rem; flex-wrap: wrap; padding: .35rem 1.1rem 0; }
.chips:empty { display: none; }
.chip {
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--red-deep);
  font-family: var(--font-m); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .45rem .8rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.chip:hover { border-color: var(--red); color: var(--red); }

.sohbet-foot {
  display: flex; gap: .55rem;
  padding: .85rem 1.1rem 1rem;
  border-top: 1px solid var(--hair);
}
.sohbet-foot input {
  flex: 1; min-width: 0;
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: .72rem .9rem;
  font-size: .9rem; color: var(--ink);
  outline: none;
  transition: border-color .25s var(--ease);
}
.sohbet-foot input:focus { border-color: var(--red); }
.sohbet-foot button {
  border: none;
  background: var(--red-block); color: #fff;
  font-family: var(--font-d); font-weight: 700; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .02em;
  padding: 0 1.25rem;
  transition: background-color .25s var(--ease);
}
.sohbet-foot button:hover { background: var(--ink); }
.sohbet-foot button:disabled { background: var(--grey); cursor: default; }

/* Canlı manifest — imza panel */
.manifest {
  position: relative;
  background: #fff;
  border: 1px solid var(--hair);
  border-top: 3px solid var(--red);
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex; flex-direction: column;
  height: min(660px, calc(100svh - var(--headerH) - 160px));
  min-height: 420px;
}
.man-head {
  display: flex; align-items: center; gap: .55rem;
  color: var(--grey); font-size: .62rem;
  padding-bottom: .7rem; margin-bottom: .4rem;
  border-bottom: 1px solid var(--hair);
}
.man-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 0, 9, .18);
}
.js .man-dot { animation: manNabiz 2s infinite; }
@keyframes manNabiz { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 0, 9, .18); } 50% { box-shadow: 0 0 0 6px rgba(255, 0, 9, .06); } }
.man-alanlar { flex: 1; }
.mf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px dotted var(--hair);
  transition: background-color .3s var(--ease);
}
.mf dt { color: var(--grey); font-size: .62rem; }
.mf dd { font-size: .78rem; color: var(--grey); text-align: right; letter-spacing: .08em; }
.mf.dolu dd { color: var(--ink); }
.mf.dolu dt { color: var(--red-deep); }
.mf.dolu { border-bottom: 1px solid rgba(255, 0, 9, .3); }
.js .mf.yaniyor { animation: mfYan .7s var(--ease); }
@keyframes mfYan {
  0% { background: rgba(255, 0, 9, .07); box-shadow: inset 2px 0 0 var(--red); }
  100% { background: transparent; box-shadow: inset 0 0 0 transparent; }
}
.mf .imlec { display: inline-block; width: .55em; background: var(--red); color: transparent; margin-left: 1px; animation: imlecYan .7s steps(1) infinite; }
@keyframes imlecYan { 50% { opacity: 0; } }
.mf.tamam dd { color: var(--green-deep); }
.man-not {
  color: var(--grey); font-size: .56rem;
  border-top: 1px solid var(--hair);
  padding-top: .8rem; margin-top: .8rem;
}

/* ═══ EKRAN 2 — TAKİP ═══ */
.takip-wrap {
  max-width: 1280px; margin-inline: auto;
  padding: clamp(1.1rem, 3vh, 2rem) var(--gutter) 2rem;
}
.takip-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.takip-kicker { color: var(--red-deep); margin-bottom: .35rem; }
.takip-no {
  font-family: var(--font-d);
  font-weight: 800; font-stretch: 113%;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1; letter-spacing: -.03em;
  text-transform: uppercase;
}
.takip-no em { font-style: normal; color: var(--red); }
.takip-head-sag { display: flex; gap: .5rem; }
.ilerlet {
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  padding: .6rem .95rem;
  font-size: .62rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.ilerlet:hover { border-color: var(--red); color: var(--red-deep); }
.ilerlet:disabled { opacity: .4; cursor: default; }
.ilerlet:disabled:hover { border-color: var(--hair); color: var(--ink); }
.ilerlet.sar { color: var(--grey); }

/* Zaman çizelgesi */
.cizelge-kaydir { overflow-x: auto; padding-bottom: .4rem; }
.cizelge {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-width: 560px;
  padding: 2.6rem 0 .4rem;
}
.ciz-hat {
  position: absolute;
  top: calc(2.6rem + 7px);
  left: 10%; right: 10%;
  height: 2px;
  background: var(--hair);
}
.ciz-dolu {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: var(--red);
  transition: width .7s var(--ease);
}
.durak {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: .7rem;
}
.d-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--hair);
  z-index: 1;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.d-ad { font-size: .6rem; color: var(--grey); text-align: center; transition: color .3s var(--ease); }
.durak.gecti .d-dot { border-color: var(--green); background: var(--green); }
.durak.gecti .d-ad { color: var(--ink); }
.durak.aktif .d-dot { border-color: var(--red); background: var(--red); }
.durak.aktif .d-ad { color: var(--red-deep); font-weight: 500; }
.js .durak.aktif .d-dot { animation: durakNabiz 1.6s infinite; }
@keyframes durakNabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 9, .32); }
  55% { box-shadow: 0 0 0 9px rgba(255, 0, 9, 0); }
}

/* Küçük yeşil mühür — tamamlanan durağa vurulur */
.d-muhur {
  position: absolute; top: -2.45rem;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--green);
  color: var(--green-deep);
  font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-12deg);
  opacity: 0;
}
.d-muhur::before {
  content: ""; position: absolute; inset: 3px;
  border: 1px dashed var(--green);
  border-radius: 50%;
}
.durak.gecti .d-muhur { opacity: 1; }
.js .durak.gecti .d-muhur { animation: muhurVur .5s cubic-bezier(.2, 1.35, .35, 1) both; }
@keyframes muhurVur {
  0% { opacity: 0; transform: rotate(4deg) scale(2.1); }
  62% { opacity: 1; transform: rotate(-14deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}

/* Büyük tamamlanma mührü — ana sayfa mühür dili, yeşil */
.muhur-alan {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.2rem;
  padding: clamp(1.6rem, 4vh, 2.6rem) 0 1rem;
}
.muhur-alan[hidden] { display: none; }
.buyuk-muhur {
  position: relative;
  width: min(64vw, 250px);
  aspect-ratio: 1;
  border: 3.5px solid var(--green);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .55rem;
  text-align: center;
  color: var(--green-deep);
  transform: rotate(-8deg);
  padding: 1.4rem;
}
.buyuk-muhur::before {
  content: ""; position: absolute; inset: 7px;
  border: 1.5px dashed var(--green);
  border-radius: 50%;
}
.js .buyuk-muhur { animation: buyukMuhurVur .55s cubic-bezier(.2, 1.35, .35, 1) .1s both; }
@keyframes buyukMuhurVur {
  0% { opacity: 0; transform: rotate(4deg) scale(2.2); }
  62% { opacity: 1; transform: rotate(-9.5deg) scale(.96); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
.js .buyuk-muhur::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  animation: muhurHalka .8s var(--ease) .4s both;
}
@keyframes muhurHalka {
  from { box-shadow: 0 0 0 0 rgba(34, 197, 94, .35); }
  to { box-shadow: 0 0 0 30px rgba(34, 197, 94, 0); }
}
.bm-yazi {
  font-family: var(--font-d);
  font-weight: 800; font-stretch: 115%;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase;
}
.bm-alt { font-size: .56rem; }
.sec-end, .portal-aktif {
  color: var(--green);
  display: flex; align-items: center; gap: .6rem;
  font-size: .66rem;
}
.sec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); display: inline-block; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
}

/* Evrak kartları */
.alt-baslik {
  color: var(--red-deep);
  margin: clamp(1.8rem, 4vh, 2.8rem) 0 .9rem;
}
.evraklar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 1.5vw, 1.1rem);
}
.evrak {
  background: #fff;
  border: 1px solid var(--hair);
  border-top: 3px solid var(--red);
  padding: 1rem 1.1rem 1.1rem;
  display: flex; flex-direction: column; gap: .45rem;
  transition: box-shadow .3s var(--ease);
}
.evrak:hover { box-shadow: 0 14px 40px rgba(16, 18, 20, .07); }
.ev-tag { color: var(--grey); font-size: .58rem; }
.ev-ad {
  font-family: var(--font-d);
  font-weight: 800; font-stretch: 112%;
  font-size: 1.35rem; line-height: 1;
  text-transform: uppercase; letter-spacing: -.01em;
}
.ev-rozet {
  align-self: flex-start;
  font-size: .58rem;
  padding: 4px 9px;
  margin-top: .3rem;
}
.ev-rozet.hazir { color: var(--green-deep); border: 1px solid rgba(34, 197, 94, .45); }
.ev-rozet.hazir::before { content: "✓ "; }
.ev-rozet.bekliyor { color: var(--red-deep); border: 1px solid rgba(255, 0, 9, .3); }

/* Bildirim satırı */
.bildirim {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
}
.bildirim-l { color: var(--grey); font-size: .62rem; }
.bildirim-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--hair);
  background: #fff;
  padding: .5rem .85rem;
  font-size: .62rem;
  color: var(--ink);
  transition: border-color .25s var(--ease);
}
.bildirim-btn:hover { border-color: var(--ink); }
.bildirim-not { margin-left: auto; color: var(--grey); font-size: .54rem; }

/* ═══ EKRAN 3 — ACENTA BAŞVURUSU ═══ */
.acenta-grid[hidden] { display: none; }
.acenta-grid {
  max-width: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: 62fr 38fr;
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding: clamp(.9rem, 2vh, 1.4rem) var(--gutter) 1.6rem;
  align-items: start;
}
.acenta-form {
  background: #fff;
  border: 1px solid var(--hair);
  padding: clamp(1rem, 2vw, 1.5rem);
}
.af-bolum {
  border: none;
  border-top: 1px solid var(--hair);
  padding: 1.1rem 0 1.3rem;
}
.af-bolum:first-child { border-top: none; padding-top: .2rem; }
.af-tag { color: var(--red-deep); font-size: .62rem; padding-right: .8rem; }
.af-ipucu { font-size: .8rem; color: var(--grey); margin: .6rem 0 .8rem; }
.af-f2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .9rem 1.1rem; margin-top: .8rem;
}
.af-alan { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; }
.af-f2 .af-alan { margin-top: 0; }
.af-alan label, .af-l { color: var(--grey); font-size: .58rem; }
.af-alan input, .af-alan textarea {
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: .6rem .75rem;
  font: inherit; font-size: .88rem; color: var(--ink);
  outline: none; resize: vertical;
  transition: border-color .25s var(--ease);
}
.af-alan input:focus, .af-alan textarea:focus { border-color: var(--red); }
.af-alan input.hata { border-color: var(--red); background: rgba(255, 0, 9, .04); }

/* Gümrük çoklu seçim çipleri */
.gumruk-secim { display: flex; flex-wrap: wrap; gap: .5rem; }
.gum-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: .5rem .8rem;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.gum-chip input { accent-color: var(--red); width: 14px; height: 14px; margin: 0; cursor: pointer; }
.gum-chip span { font-size: .62rem; }
.gum-chip:hover { border-color: var(--red); }
.gum-chip.on { border-color: var(--red); background: #fff; box-shadow: inset 0 2px 0 var(--red); }
.gumruk-secim.hata .gum-chip { border-color: rgba(255, 0, 9, .5); }

/* Ücret matrisi kartları */
.matrisler { display: grid; gap: .8rem; margin-top: 1rem; }
.matris {
  border: 1px solid var(--hair);
  border-top: 3px solid var(--red);
  background: #fff;
  padding: .85rem .95rem 1rem;
}
.js .matris { animation: balonGel .25s var(--ease) both; }
.matris-tag { color: var(--grey); font-size: .6rem; margin-bottom: .6rem; }
.matris-tablo { width: 100%; border-collapse: collapse; }
.matris-tablo th, .matris-tablo td { padding: .4rem .45rem; border-top: 1px dotted var(--hair); }
.matris-tablo thead th { border-top: none; padding-top: 0; }
.matris-tablo th { text-align: left; color: var(--grey); font-size: .56rem; font-weight: 500; }
.matris-tablo thead th:not(:first-child) { text-align: right; }
.para-hucre {
  display: flex; align-items: center; justify-content: flex-end; gap: .3rem;
  color: var(--grey);
}
.para-hucre span { font-size: .72rem; }
.para-hucre input {
  width: 6.2em;
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: .35rem .5rem;
  font-family: var(--font-m); font-size: .74rem;
  font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink);
  outline: none;
  transition: border-color .25s var(--ease);
}
.para-hucre input:focus { border-color: var(--red); }

/* E-posta listesi */
.email-satir { display: flex; gap: .5rem; margin-bottom: .5rem; }
.email-satir input { flex: 1; min-width: 0; }
.email-sil {
  border: 1px solid var(--hair);
  background: #fff; color: var(--grey);
  padding: 0 .7rem; font-size: .7rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.email-sil:hover { border-color: var(--red); color: var(--red-deep); }
.af-ekle {
  align-self: flex-start;
  border: 1px dashed var(--hair);
  background: transparent; color: var(--red-deep);
  padding: .45rem .8rem; font-size: .6rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.af-ekle:hover { border-color: var(--red); color: var(--red); }

/* Teslim yöntemi */
.teslim-secim { display: flex; flex-wrap: wrap; gap: .5rem; }
.teslim-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: .5rem .8rem; cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.teslim-chip input { accent-color: var(--red); margin: 0; cursor: pointer; }
.teslim-chip span { font-size: .62rem; }
.teslim-chip:hover { border-color: var(--red); }
.teslim-chip.on { border-color: var(--red); background: #fff; box-shadow: inset 0 2px 0 var(--red); }
.af-alan.cekmece { max-width: 220px; }

/* Gönderim */
.af-gonder { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .4rem; }
.af-submit {
  border: none;
  background: var(--red-block); color: #fff;
  font-family: var(--font-d); font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .02em;
  padding: .9rem 1.5rem;
  transition: background-color .25s var(--ease);
}
.af-submit:hover { background: var(--ink); }
.af-msg { color: var(--red-deep); font-size: .6rem; min-height: 1em; }
.af-msg:empty { display: none; }

/* Özet paneli — manifest ailesi, yapışkan ve serbest yükseklik */
.manifest.ozet {
  height: auto; min-height: 0;
  position: sticky; top: calc(var(--headerH) + 1rem);
}

/* Başarı ekranı */
.acenta-tamam {
  max-width: 1280px; margin-inline: auto;
  padding: clamp(1.4rem, 5vh, 3rem) var(--gutter) 2rem;
  display: flex; justify-content: center;
}
.acenta-tamam[hidden] { display: none; }
.at-kart {
  position: relative;
  width: min(560px, 100%);
  background: #fff;
  border: 1px solid var(--hair);
  border-top: 3px solid var(--red);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
}
.at-kart .corners b { opacity: 1; transform: scale(1); border-color: var(--red); }
.at-kicker { color: var(--grey); font-size: .6rem; }
.at-no {
  font-family: var(--font-d);
  font-weight: 800; font-stretch: 113%;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1; letter-spacing: -.02em;
  color: var(--red);
}
.at-metin { font-size: .92rem; color: var(--ink); max-width: 30em; }
.at-btnlar { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.at-btnlar .ilerlet { display: inline-flex; align-items: center; }

@media (max-width: 960px) {
  .acenta-grid { grid-template-columns: 1fr; }
  .manifest.ozet { position: static; }
}
@media (max-width: 480px) {
  .af-f2 { grid-template-columns: 1fr; }
  .para-hucre input { width: 5em; }
  .matris-tablo th, .matris-tablo td { padding: .35rem .25rem; }
}

/* ═══ MİNİ FOOTER ═══ */
.mini-footer {
  position: relative; z-index: 1;
  background: var(--ink); color: rgba(255, 255, 255, .82);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .8rem 2.4rem;
  padding: 1.6rem var(--gutter);
}
.footer-note { font-size: .74rem; color: rgba(255, 255, 255, .55); max-width: 38em; flex: 1 1 280px; }
.footer-legal { color: rgba(255, 255, 255, .55); font-size: .62rem; }

/* ═══ TOAST ═══ */
.toast {
  position: fixed; z-index: 300;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 16px);
  background: var(--ink); color: #fff;
  padding: .7rem 1.1rem;
  font-size: .64rem;
  border-left: 2px solid var(--red);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  max-width: min(90vw, 420px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
  .mod-grid { grid-template-columns: 1fr; }
  .sohbet-panel { height: min(560px, calc(100svh - 220px)); }
  .manifest { height: auto; min-height: 0; }
}
@media (max-width: 860px) {
  :root { --headerH: 56px; }
  .topbar-meta { display: none; }
  .topbar-link { margin-left: auto; }
  .salon { min-height: 0; padding-bottom: 0; }
  .kapilar { grid-template-columns: 1fr; }
  .kapi { min-height: 0; }
  .ribbon { display: none; }
  .salon-orta { padding-top: clamp(1.6rem, 5svh, 3rem); }
  .evraklar { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mod-bar { flex-wrap: wrap; gap: .5rem .9rem; }
  .demo-rozet { margin-left: 0; }
  .balon { max-width: 92%; }
  .bildirim-not { margin-left: 0; width: 100%; }
}

/* ═══ DİL SEÇİCİ (üst bar) ═══ */
.dil-sec {
  margin-left: .2rem;
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--ink);
  padding: .4rem 1.6rem .4rem .6rem;
  font-family: var(--font-m); font-size: .62rem;
  letter-spacing: .06em;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--red-deep) 50%), linear-gradient(135deg, var(--red-deep) 50%, transparent 50%);
  background-position: right .75rem center, right .55rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .25s var(--ease);
}
.dil-sec:hover { border-color: var(--red); }
.dil-sec:focus-visible { border-color: var(--red); }
@media (max-width: 860px) {
  .dil-sec { padding: .35rem 1.4rem .35rem .5rem; }
}

/* ═══ RTL (ar / fa) — temel ayna + tofu-önleyici font ═══ */
html[lang="ar"] { --font-d: 'Noto Sans Arabic'; --font-b: 'Noto Sans Arabic'; --font-m: 'Noto Sans Arabic'; }
html[lang="fa"] { --font-d: 'Vazirmatn'; --font-b: 'Vazirmatn'; --font-m: 'Vazirmatn'; }

[dir="rtl"] { text-align: right; }
[dir="rtl"] .skip-link { left: auto; right: 16px; }
[dir="rtl"] .topbar-meta { margin-left: 0; margin-right: auto; }
[dir="rtl"] .dil-sec {
  padding: .4rem .6rem .4rem 1.6rem;
  background-position: left .75rem center, left .55rem center;
}
[dir="rtl"] .kapi { align-items: flex-end; text-align: right; }
[dir="rtl"] .kapi-cta .arr, [dir="rtl"] .as-cta [aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .kapi:hover .kapi-cta .arr { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .demo-rozet { margin-left: 0; margin-right: auto; }
[dir="rtl"] .balon.bot { border-left: none; border-right: 2px solid var(--red); }
[dir="rtl"] .balon.ben { align-self: flex-end; }
[dir="rtl"] .yaziyor { border-left: none; border-right: 2px solid var(--red); }
[dir="rtl"] .chip { text-align: right; }
[dir="rtl"] .mf dd { text-align: left; }
[dir="rtl"] .ciz-dolu { inset: 0 0 0 auto; }
[dir="rtl"] .af-tag { padding-right: 0; padding-left: .8rem; }
[dir="rtl"] .af-alan label, [dir="rtl"] .af-l { text-align: right; }
[dir="rtl"] .matris-tablo th { text-align: right; }
[dir="rtl"] .matris-tablo thead th:not(:first-child) { text-align: left; }
[dir="rtl"] .para-hucre { justify-content: flex-start; }
[dir="rtl"] .para-hucre input { text-align: left; }
[dir="rtl"] .bildirim-not { margin-left: 0; margin-right: auto; }
[dir="rtl"] .toast { border-left: none; border-right: 2px solid var(--red); }

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .ribbon path { stroke-dashoffset: 0; animation: none; }
  .js .screen.on, .js .screen.out { animation: none; }
  .js .balon { animation: none; }
  .mf .imlec { animation: none; opacity: 0; }
  .js .man-dot, .js .durak.aktif .d-dot { animation: none; }
}