/* Temel Tekstil portalı — Dark Crimson Glassmorphism.
   Bu dosya yalnızca temel-tekstil.html içindir; diğer sektör sayfaları sector.css'teki
   lacivert/altın temada kalır. Yönlendirme için mümkün olan her yerde mantıksal özellikler
   (inline-start/end) kullanılıyor ki Arapça/Farsça (RTL) seçildiğinde yerleşim kendiliğinden
   aynalansın. */

:root{
  --bg-0:#050102;
  --crimson-950:#1a0307;
  --crimson-900:#2b050b;
  --red-600:#d10a1f;
  --red-500:#ff1f35;
  --red-400:#ff4a5c;
  --red-300:#ff8792;
  --text-100:#fff5f5;
  --text-200:#f5d7da;
  --text-300:#dca7ad;
  --text-500:#a8707a;
  --ok:#8ff0b6;
  --glass:linear-gradient(150deg, rgba(78,10,18,.52), rgba(20,3,7,.58));
  --glass-solid:rgba(22,3,7,.84);
  --glass-line:rgba(255,86,100,.22);
  --glass-line-strong:rgba(255,110,122,.55);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -24px rgba(0,0,0,.85), 0 0 46px -18px rgba(255,31,53,.38);
  --blur:blur(18px) saturate(140%);
  --r-lg:22px; --r-md:16px; --r-sm:10px;
  --font-display:"Unbounded","Vazirmatn",system-ui,sans-serif;
  --font-body:"Manrope","Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","Vazirmatn",ui-monospace,"SF Mono",Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:60px;
  /* Çentik, Dynamic Island ve ana ekran çizgisi (viewport-fit=cover) boşlukları. */
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
  --edge:12px;
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:auto; overscroll-behavior-x:none; -webkit-tap-highlight-color:transparent; }
/* Sabit ekran: iki parmakla yakınlaştırma ve çift dokunma zoom'u kapalı, kaydırma serbest.
   touch-action kalıtılmadığı için her öğeye verilir; sürüklenen 3D sahnelerin kendi kuralı daha özgül. */
*{ touch-action:pan-x pan-y; }
body{
  margin:0; min-height:100svh; color:var(--text-100); font-family:var(--font-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(200,8,30,.36), transparent 62%),
    radial-gradient(70% 55% at 50% 20%, rgba(110,6,18,.34), transparent 70%),
    linear-gradient(180deg, #0b0205 0%, #060102 55%, #0a0204 100%);
  background-attachment:fixed;
}
html[dir="rtl"] body{ line-height:1.8; }
::selection{ background:var(--red-500); color:#fff; }
img{ max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

.mono{ font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
html[dir="rtl"] .mono{ letter-spacing:0; }
.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; }
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ico .fill, .ico path.fill, .ico circle.fill{ fill:currentColor; stroke:none; }
html[dir="rtl"] .flip{ transform:scaleX(-1); }

.skip-link{
  position:fixed; top:10px; inset-inline-start:10px; z-index:100; padding:10px 16px; border-radius:10px;
  background:var(--red-500); color:#fff; text-decoration:none; font-weight:700; transform:translateY(-160%);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:none; }
:focus-visible{ outline:2px solid var(--red-300); outline-offset:3px; }

/* ---------------- Arka plan katmanları ---------------- */
#tt-scene{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; opacity:0; transition:opacity 1.4s ease; }
#tt-scene.is-ready{ opacity:1; }
.fx{ position:fixed; inset:0; pointer-events:none; }
.fx-vignette{ z-index:1; background:radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0,0,0,.62) 100%); }
.fx-scan{
  z-index:1; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}

/* Hayal Dünyası uyarı ışıkları: kenarlardan kırmızı nabız + iki dönen siren huzmesi.
   İlk giriş anında (alarm-burst) sert, sonra sakin bir nefes ritmine iner. */
.fx-alarm{ z-index:2; opacity:0; overflow:hidden; transition:opacity .6s ease; }
.fx-alarm::before{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 140px 30px rgba(255,0,25,.5);
  animation:alarm-breathe 3.2s ease-in-out infinite;
}
.alarm-beam{
  position:absolute; top:-40vmax; width:80vmax; height:80vmax; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,25,45,.3) 14deg, transparent 32deg, transparent 180deg, rgba(255,25,45,.22) 194deg, transparent 212deg);
  filter:blur(10px); mix-blend-mode:screen; animation:beam-spin 5s linear infinite;
}
.alarm-beam--l{ left:-40vmax; }
.alarm-beam--r{ right:-40vmax; animation-direction:reverse; }
html[data-view="hayal-dunyasi"] .fx-alarm{ opacity:.7; }
html.alarm-burst .fx-alarm{ opacity:1; }
html[data-view="hayal-dunyasi"][data-dream="charging"] .fx-alarm{ opacity:1; }
html[data-dream="charging"] .alarm-beam{ animation-duration:1.1s; }
html[data-view="hayal-dunyasi"][data-dream="open"] .fx-alarm{ opacity:.14; }
html[data-dream="open"] .alarm-beam{ animation-duration:14s; }
/* Kilit kırıldığı an ekranı bir kez aydınlatan parlama. */
html.dream-break body::after{
  content:""; position:fixed; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(255,240,242,.6), rgba(255,31,53,.28) 38%, transparent 72%);
  animation:dream-flash 1.1s ease-out forwards;
}
@keyframes dream-flash{ from{ opacity:1; } to{ opacity:0; } }
html.alarm-burst .fx-alarm::before{ animation:alarm-flash .45s steps(2,end) 4, alarm-breathe 3.2s ease-in-out 1.8s infinite; }
html.alarm-burst .alarm-beam{ animation-duration:1.6s; }
@keyframes alarm-breathe{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
@keyframes alarm-flash{ 0%{ opacity:1; } 100%{ opacity:.15; } }
@keyframes beam-spin{ to{ transform:rotate(360deg); } }

/* WebGL yoksa sahne yerine sabit bir kızıl ufuk parıltısı kalır. */
.no-webgl .stage::before{
  content:""; position:absolute; inset:12%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,31,53,.28), transparent 65%);
  border:1px solid rgba(255,86,100,.2);
}

/* ---------------- Üst şerit ---------------- */
.topbar{
  position:fixed; top:calc(var(--edge) + var(--sat)); left:max(var(--edge), var(--sal)); right:max(var(--edge), var(--sar)); z-index:30; height:var(--header-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:0 10px 0 12px; border-radius:18px;
  background:rgba(18,2,6,.62); border:1px solid var(--glass-line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9), 0 0 30px -18px rgba(255,31,53,.5);
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; justify-self:start; min-width:0; }
.brand img{ width:36px; height:36px; border-radius:50%; box-shadow:0 0 16px rgba(250,2,3,.6); }
/* Unbounded'ın küçük harf "s"si bu boyutta "e"ye benziyor ("Teketil"); marka adı amblemdeki gibi büyük harf. */
.brand span{ font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.holding-link{
  justify-self:center; text-decoration:none; font-family:var(--font-display); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-200); white-space:nowrap;
  display:inline-flex; align-items:center; min-height:40px;
  padding:8px 12px; border-radius:10px; transition:color .2s ease, background .2s ease;
}
html[dir="rtl"] .holding-link{ letter-spacing:0; }
.holding-link:hover{ color:#fff; background:rgba(255,31,53,.1); }
.topbar-actions{ justify-self:end; display:flex; align-items:center; gap:8px; }

.icon-btn{
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px; border-radius:12px; cursor:pointer;
  background:rgba(255,31,53,.07); border:1px solid var(--glass-line); color:var(--text-100);
  transition:border-color .2s ease, background .2s ease;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"]{ border-color:var(--glass-line-strong); background:rgba(255,31,53,.14); }
.lang-current{ font-family:var(--font-mono); font-size:.74rem; font-weight:600; letter-spacing:.06em; }

.lang{ position:relative; }
.lang-menu{
  position:absolute; top:calc(100% + 10px); inset-inline-end:0; z-index:40; width:230px; padding:6px;
  border-radius:16px; background:var(--glass-solid); border:1px solid var(--glass-line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--glass-shadow);
  animation:pop .22s var(--ease-out);
}
.lang-menu ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.lang-menu button{
  width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:8px 10px; border-radius:10px;
  background:none; border:1px solid transparent; cursor:pointer; text-align:start;
}
.lang-menu button b{ font-family:var(--font-mono); font-size:.72rem; color:var(--red-300); }
.lang-menu button span{ font-size:.8rem; color:var(--text-200); }
.lang-menu button:hover{ background:rgba(255,31,53,.1); }
.lang-menu button[aria-pressed="true"]{ border-color:var(--glass-line-strong); background:rgba(255,31,53,.16); }
@keyframes pop{ from{ opacity:0; transform:translateY(-6px) scale(.98); } }

/* ---------------- Düğmeler ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 22px; border-radius:12px;
  font-family:var(--font-display); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer; text-decoration:none; line-height:1.2;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
html[dir="rtl"] .btn{ letter-spacing:0; font-size:.86rem; }
.btn-primary{
  color:#fff; background:linear-gradient(180deg, #ff3447, #c4081a); border-color:rgba(255,150,160,.45);
  box-shadow:0 12px 30px -12px rgba(255,31,53,.85), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 16px 38px -10px rgba(255,31,53,1), 0 0 0 1px rgba(255,170,178,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost{ color:var(--text-100); background:rgba(255,31,53,.07); border-color:var(--glass-line); }
.btn-ghost:hover{ border-color:var(--glass-line-strong); background:rgba(255,31,53,.14); }
.btn-sm{ padding:10px 14px; font-size:.66rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:progress; transform:none; }
.login-btn{ height:40px; }

/* ---------------- Görünümler (portal + 6 meta alan) ----------------
   JS varken aynı anda yalnızca bir görünüm açıktır; JS yoksa hepsi alt alta akar ve
   portal kartları sayfa içi bağlantı olarak çalışır. */
main{ position:relative; z-index:3; }
.js .view{ display:none; }
.js .view.is-active{ display:block; }
.i18n-pending main, .i18n-pending .topbar, .i18n-pending .dock{ visibility:hidden; }

/* Görünüm geçişi: opaklık yalnızca cam öğelerin KENDİSİNE uygulanır. Kapsayıcıya verilen
   opacity/filter, içteki backdrop-filter'ı arka plan tuvalinden koparır (backdrop root) ve
   geçiş boyunca cam bulanıklığı kaybolurdu. */
.view.is-entering [data-anim]{ animation:view-in .8s var(--ease-out) backwards; }
.view.is-entering [data-anim]:nth-child(2), .view.is-entering .contact-side [data-anim]:nth-child(2){ animation-delay:.08s; }
.view.is-leaving [data-anim], .view.is-leaving .card, .view.is-leaving .emblem{ animation:view-out .26s ease-in forwards; }
@keyframes view-in{ from{ opacity:0; transform:translateY(22px) scale(.985); } }
@keyframes view-out{ to{ opacity:0; transform:translateY(-8px) scale(.975); } }

/* ---------------- PORTAL ---------------- */
.view--hub{ overflow:hidden; overflow:clip; }
.hub{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:calc(var(--header-h) + 40px + var(--sat)) max(16px, var(--sar)) 72px max(16px, var(--sal)); gap:16px;
}
.emblem{
  --rx:0deg; --ry:0deg;
  position:relative; width:clamp(180px, 29vh, 320px); aspect-ratio:1; margin:6px 0 10px;
  transform-style:preserve-3d; transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .6s var(--ease-out);
  animation:emblem-in 1.5s var(--ease-out) backwards;
}
.emblem picture, .emblem img{ display:block; width:100%; height:100%; }
.emblem img{
  position:relative; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(250,2,3,.55), 0 0 150px rgba(250,2,3,.3);
}
.emblem picture{ position:relative; z-index:2; border-radius:50%; overflow:hidden; transform:translateZ(0); }
/* Amblemin üstünden geçen ışık yansıması — dairenin dışına taşmaz. */
.emblem picture::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%);
  background-size:260% 100%; background-position:120% 0; mix-blend-mode:screen;
  animation:shine 7s ease-in-out 1.6s infinite;
}
.emblem-halo{
  position:absolute; inset:-8%; z-index:1; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 12%, rgba(255,70,85,.95) 22%, transparent 32% 62%, rgba(255,70,85,.95) 72%, transparent 82%);
  -webkit-mask:radial-gradient(circle closest-side, transparent 92%, #000 93%, #000 97%, transparent 98%);
          mask:radial-gradient(circle closest-side, transparent 92%, #000 93%, #000 97%, transparent 98%);
  animation:spin 8s linear infinite; filter:drop-shadow(0 0 8px rgba(255,31,53,.8));
}
.emblem-orbit{
  position:absolute; inset:-22%; z-index:3; border-radius:50%; border:1px solid rgba(255,90,105,.38);
  transform:rotateX(74deg) rotateZ(0deg); animation:orbit 16s linear infinite; pointer-events:none;
}
.emblem-orbit::after{
  content:""; position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%;
  background:#fff; box-shadow:0 0 10px 3px rgba(255,40,60,.9);
}
.emblem-orbit--b{ inset:-34%; border-color:rgba(255,90,105,.2); transform:rotateX(74deg) rotateY(-18deg); animation-duration:26s; animation-direction:reverse; }
@keyframes orbit{ to{ transform:rotateX(74deg) rotateZ(360deg); } }
.emblem-orbit--b{ animation-name:orbit-b; }
@keyframes orbit-b{ from{ transform:rotateX(74deg) rotateY(-18deg) rotateZ(0deg); } to{ transform:rotateX(74deg) rotateY(-18deg) rotateZ(-360deg); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes shine{ 0%,55%{ background-position:120% 0; } 85%,100%{ background-position:-40% 0; } }
@keyframes emblem-in{ from{ opacity:0; transform:perspective(900px) translateZ(-260px) rotateY(-30deg); filter:blur(8px); } }

.chip{
  display:inline-flex; align-items:center; gap:10px; margin:0; padding:7px 14px; border-radius:999px;
  font-size:.68rem; color:var(--text-200); background:rgba(255,31,53,.08); border:1px solid var(--glass-line);
  animation:rise .9s var(--ease-out) .25s backwards;
}
.chip-dot{ width:7px; height:7px; border-radius:50%; background:var(--red-500); box-shadow:0 0 10px var(--red-500); animation:blink 2.2s ease-in-out infinite; flex:none; }
@keyframes blink{ 50%{ opacity:.35; } }
.hub-title{
  margin:4px 0 0; max-width:22ch; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.35rem, 3.1vw, 2.35rem); line-height:1.18; letter-spacing:-.01em; text-wrap:balance;
  text-shadow:0 0 28px rgba(255,31,53,.45); animation:rise .9s var(--ease-out) .35s backwards;
}
.hub-lead{ margin:0; max-width:56ch; color:var(--text-300); font-size:.98rem; animation:rise .9s var(--ease-out) .45s backwards; }
.hub-lead a{ padding-block:8px; color:var(--text-100); text-decoration:none; border-bottom:1px solid rgba(255,110,122,.55); transition:color .2s ease, border-color .2s ease, text-shadow .2s ease; }
.hub-lead a:hover{ color:#fff; border-color:var(--red-400); text-shadow:0 0 14px rgba(255,31,53,.7); }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } }

.cards{ width:min(1120px, 100%); margin-top:14px; }
.cards ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.card{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  position:relative; isolation:isolate; overflow:hidden; height:100%;
  display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; border-radius:var(--r-md);
  text-align:start; text-decoration:none; color:inherit;
  background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .4s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
  animation:rise .9s var(--ease-out) backwards; animation-delay:calc(.5s + var(--i) * 80ms);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(255,50,70,.24), transparent 62%);
}
.card::after{
  content:""; position:absolute; inset-inline:18px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,120,130,.7), transparent); opacity:.5;
}
.card:hover, .card:focus-visible{ border-color:var(--glass-line-strong); box-shadow:var(--glass-shadow), 0 0 44px -10px rgba(255,31,53,.7); }
.card:hover::before, .card:focus-visible::before{ opacity:1; }
.card-top{ display:flex; align-items:center; gap:10px; }
.card-icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--red-300);
  background:rgba(255,31,53,.1); border:1px solid rgba(255,86,100,.3); box-shadow:inset 0 0 18px rgba(255,31,53,.22);
}
.card-icon .ico{ width:22px; height:22px; }
.card-index{ margin-inline-start:auto; font-size:.66rem; color:var(--text-500); }
.card-lock{ font-size:.6rem; color:var(--red-300); padding:3px 8px; border-radius:999px; border:1px solid rgba(255,86,100,.4); background:rgba(255,31,53,.12); }
.card-lock{ margin-inline-start:auto; }
.card-lock ~ .card-index{ margin-inline-start:0; }
.card-title{ font-family:var(--font-display); font-weight:700; font-size:.9rem; letter-spacing:.05em; text-transform:uppercase; margin-top:6px; }
html[dir="rtl"] .card-title{ letter-spacing:0; font-size:1rem; }
.card-desc{ font-size:.82rem; line-height:1.55; color:var(--text-300); padding-inline-end:26px; }
.card-go{
  position:absolute; bottom:16px; inset-inline-end:16px; color:var(--red-300); opacity:.55;
  transition:transform .3s var(--ease-out), opacity .3s ease;
}
.card:hover .card-go{ opacity:1; transform:translateX(4px); }
html[dir="rtl"] .card:hover .card-go{ transform:translateX(-4px); }
.card--locked .card-icon{ color:#fff; background:rgba(255,31,53,.25); animation:lock-pulse 2.4s ease-in-out infinite; }
@keyframes lock-pulse{ 50%{ box-shadow:inset 0 0 18px rgba(255,31,53,.22), 0 0 22px rgba(255,31,53,.6); } }

.trust{
  list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  font-size:.76rem; color:var(--text-300); animation:rise .9s var(--ease-out) 1s backwards;
}
.trust li{ display:inline-flex; align-items:center; gap:10px; }
.trust li::before{ content:""; width:14px; height:1px; background:var(--red-400); box-shadow:0 0 6px var(--red-500); }

/* ---------------- META ALAN yerleşimi ---------------- */
.view-inner{
  position:relative; display:grid; grid-template-columns:minmax(0, 580px) minmax(0, 1fr);
  gap:clamp(20px, 4vw, 64px); align-items:center; min-height:100svh; max-width:1440px; margin-inline:auto;
  padding:calc(var(--header-h) + 40px + var(--sat)) max(clamp(16px, 4vw, 56px), var(--sar)) 140px max(clamp(16px, 4vw, 56px), var(--sal));
}
.view-inner--contact{ grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); align-items:start; }
.panel{
  position:relative; padding:clamp(22px, 3vw, 38px); border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
/* HUD köşe çizgileri */
.panel::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(var(--red-400), var(--red-400)) top left / 22px 1px no-repeat,
    linear-gradient(var(--red-400), var(--red-400)) top left / 1px 22px no-repeat,
    linear-gradient(var(--red-400), var(--red-400)) bottom right / 22px 1px no-repeat,
    linear-gradient(var(--red-400), var(--red-400)) bottom right / 1px 22px no-repeat;
  opacity:.75;
}
.stage{ position:relative; align-self:stretch; min-height:420px; }
.stage--interactive{ cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.stage--interactive.is-dragging{ cursor:grabbing; }
.stage-hint{
  position:absolute; bottom:4%; left:50%; transform:translateX(-50%); margin:0;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:.64rem; color:var(--text-300); padding:7px 12px; border-radius:999px;
  background:rgba(18,2,6,.55); border:1px solid var(--glass-line);
}
.stage-hint .ico{ width:16px; height:16px; }

.eyebrow{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:.68rem; color:var(--red-300); }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--red-400); box-shadow:0 0 8px var(--red-500); }
.view-title{
  margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem, 3vw, 2.45rem);
  line-height:1.14; letter-spacing:-.01em; text-wrap:balance; text-shadow:0 0 30px rgba(255,31,53,.45);
}
.view-title:focus{ outline:none; }
.lead{ margin:16px 0 0; color:var(--text-200); font-size:1rem; line-height:1.7; max-width:62ch; }
.body-text{ margin:18px 0 0; color:var(--text-200); }
.note{ margin:12px 0 0; font-size:.8rem; color:var(--text-500); }
.sub-title{ margin:28px 0 12px; font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red-300); }
html[dir="rtl"] .sub-title{ letter-spacing:0; font-size:.9rem; }

.quote{
  margin:22px 0 0; padding:16px 20px; border-inline-start:2px solid var(--red-500); border-radius:0 12px 12px 0;
  background:linear-gradient(90deg, rgba(255,31,53,.14), transparent);
}
html[dir="rtl"] .quote{ border-radius:12px 0 0 12px; background:linear-gradient(-90deg, rgba(255,31,53,.14), transparent); }
.quote p{ margin:0; font-family:var(--font-display); font-weight:500; font-size:1.06rem; line-height:1.45; }
.quote p::before{ content:"“"; color:var(--red-400); }
.quote p::after{ content:"”"; color:var(--red-400); }

.timeline{ list-style:none; margin:24px 0 0; padding:0; position:relative; display:grid; gap:4px; }
.timeline::before{
  content:""; position:absolute; top:10px; bottom:10px; inset-inline-start:7px; width:1px;
  background:linear-gradient(var(--red-500), rgba(255,31,53,.1));
}
.timeline li{ position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:10px; padding-inline-start:30px; padding-block:6px; }
.timeline li::before{
  content:""; position:absolute; top:12px; inset-inline-start:2px; width:11px; height:11px; border-radius:50%;
  background:var(--bg-0); border:2px solid var(--red-500); box-shadow:0 0 12px rgba(255,31,53,.8);
}
.timeline li:first-child::before{ background:var(--red-500); }
.tl-k{ font-size:.7rem; color:var(--red-300); align-self:center; min-width:4.5em; }
.tl-title{ font-size:.95rem; }
.tl-desc{ grid-column:2; font-size:.86rem; color:var(--text-300); }

.svc{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.svc li, .feature{
  display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:12px;
  background:rgba(255,31,53,.06); border:1px solid rgba(255,86,100,.16);
}
.svc strong, .feature strong{ font-size:.88rem; }
.svc span, .feature > span:last-child{ font-size:.8rem; color:var(--text-300); line-height:1.5; }

.features{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.tag{ align-self:flex-start; font-size:.58rem; padding:3px 8px; border-radius:999px; color:var(--red-300); border:1px solid rgba(255,86,100,.35); }

.stats{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.stats li{
  display:flex; flex-direction:column; gap:4px; padding:16px 14px; border-radius:14px;
  background:linear-gradient(160deg, rgba(255,31,53,.16), rgba(255,31,53,.03)); border:1px solid rgba(255,86,100,.26);
}
.stats b{ font-family:var(--font-display); font-size:clamp(1rem, 1.7vw, 1.3rem); color:#fff; text-shadow:0 0 18px rgba(255,31,53,.7); overflow-wrap:anywhere; }
.stats span{ font-size:.78rem; color:var(--text-300); line-height:1.4; }

/* 3D sahnedeki noktalara iliştirilen HUD etiketleri (konumlarını 3D modülü yazar). */
.hud-label{
  position:absolute; left:0; top:0; z-index:2; opacity:0; pointer-events:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px; transition:opacity .35s ease;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-100);
}
.hud-label i{ width:9px; height:9px; margin:-4.5px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(255,31,53,.9); flex:none; }
.hud-label span{ margin-inline-start:26px; padding:5px 10px; border-radius:8px; background:rgba(18,2,6,.72); border:1px solid var(--glass-line-strong); position:relative; }
.hud-label span::before{ content:""; position:absolute; top:50%; inset-inline-end:100%; width:22px; height:1px; background:var(--red-400); }
/* Etiketler 3D sahnedeki bir noktaya bağlı; sahne RTL'de aynalanmadığı için etiketin hangi
   yöne açılacağı da fiziksel kalmalı (yazı yönünden bağımsız). */
.hud-label{ direction:ltr; }
.hud-label span{ unicode-bidi:plaintext; }
.hud-label[data-side="left"]{ flex-direction:row-reverse; }
.hud-label[data-side="left"] span{ margin-inline-start:0; margin-inline-end:26px; }
.hud-label[data-side="left"] span::before{ inset-inline-end:auto; inset-inline-start:100%; }

/* ---------------- Formlar ---------------- */
.form{ display:grid; gap:14px; margin-top:20px; }
.form--grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.field{ display:grid; gap:6px; min-width:0; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.66rem; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-300); }
html[dir="rtl"] .field label{ letter-spacing:0; font-size:.8rem; }
.field-hint{ font-size:.74rem; color:var(--text-500); }
.input{
  width:100%; min-width:0; padding:12px 14px; border-radius:11px; font:inherit; font-size:16px; color:var(--text-100);
  background:rgba(8,1,3,.6); border:1px solid rgba(255,86,100,.24);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input::placeholder{ color:var(--text-500); }
.input:hover{ border-color:rgba(255,110,122,.4); }
.input:focus{ outline:none; border-color:var(--red-400); background:rgba(14,1,4,.75); box-shadow:0 0 0 3px rgba(255,31,53,.18), 0 0 24px -6px rgba(255,31,53,.7); }
textarea.input{ resize:vertical; min-height:110px; }
select.input{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-inline-end:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8792' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:16px; background-position:right 12px center;
}
html[dir="rtl"] select.input{ background-position:left 12px center; }
select.input option{ background:#1a0307; color:#fff; }
.honeypot{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.form-status{ margin:0; min-height:1.3em; font-size:.86rem; color:var(--text-300); }
.form-status.is-ok{ color:var(--ok); }
.form-status.is-err{ color:var(--red-300); }
.privacy{ margin:0; font-size:.74rem; color:var(--text-500); line-height:1.5; }

/* ---------------- Hayal Dünyası ---------------- */
.panel--alarm{ border-color:rgba(255,60,75,.45); box-shadow:var(--glass-shadow), 0 0 60px -14px rgba(255,20,40,.75); }
.denied{ display:flex; align-items:center; gap:14px; }
.denied-icon{
  width:52px; height:52px; flex:none; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle, #ff2a3e, #8d0412); box-shadow:0 0 0 1px rgba(255,150,160,.5), 0 0 34px rgba(255,20,40,.9);
  animation:siren 1.2s ease-in-out infinite;
}
.denied-icon .ico{ width:26px; height:26px; }
@keyframes siren{ 50%{ box-shadow:0 0 0 1px rgba(255,150,160,.5), 0 0 12px rgba(255,20,40,.5); filter:brightness(.8); } }
.view--dream .view-title{ text-transform:uppercase; color:#fff; letter-spacing:.02em; text-shadow:0 0 22px rgba(255,20,40,.95), 0 0 60px rgba(255,20,40,.6); }
html[dir="rtl"] .view--dream .view-title{ letter-spacing:0; }
.glitch{ position:relative; }
.glitch::before, .glitch::after{
  content:attr(data-text); position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.glitch::before{ color:#ff4a5c; transform:translate(2px,0); clip-path:inset(0 0 60% 0); animation:glitch-a 3.2s steps(1) infinite; mix-blend-mode:screen; }
.glitch::after{ color:#7ff; opacity:.35; transform:translate(-2px,0); clip-path:inset(55% 0 0 0); animation:glitch-b 2.7s steps(1) infinite; mix-blend-mode:screen; }
@keyframes glitch-a{ 0%,86%,100%{ transform:translate(0); clip-path:inset(0 0 100% 0); } 88%{ transform:translate(3px,-1px); clip-path:inset(10% 0 55% 0); } 92%{ transform:translate(-3px,1px); clip-path:inset(40% 0 30% 0); } }
@keyframes glitch-b{ 0%,80%,100%{ transform:translate(0); clip-path:inset(100% 0 0 0); } 83%{ transform:translate(-3px,0); clip-path:inset(60% 0 10% 0); } 87%{ transform:translate(2px,1px); clip-path:inset(20% 0 60% 0); } }
.denied-msg{
  margin:18px 0 0; padding:14px 16px; border-radius:12px; font-weight:600; line-height:1.6;
  color:#fff; background:linear-gradient(90deg, rgba(255,20,40,.26), rgba(255,20,40,.08)); border:1px solid rgba(255,60,75,.5);
}

.gate{ margin-top:22px; }
.gate > *{ display:none; }
.gate[data-state="form"] > .gate-form,
.gate[data-state="quiz"] > [data-steps="quiz"],
.gate[data-state="locate"] > .gate-locate,
.gate[data-state="online"] > .gate-online,
.gate[data-state="profile"] > [data-steps="profile"],
.gate[data-state="wait"] > .gate-wait,
.gate[data-state="approved"] > .gate-wait{ display:block; }
.gate[data-state="quiz"] ~ .behind, .gate[data-state="locate"] ~ .behind,
.gate[data-state="online"] ~ .behind, .gate[data-state="profile"] ~ .behind{ display:none; }

/* Başlık: form'da "Erişim Reddedildi", taramada "Zihin Taraması", kilit açılınca "Online". */
.view--dream:not(.is-locked) .denied-msg{ display:none; }
.online-line{ display:none; align-items:center; gap:10px; margin:14px 0 0; font-size:.72rem; color:var(--ok); }
.view--dream.is-open .online-line{ display:flex; }
/* "Online" duyurusu kartta büyük yazıyla çıkıyor; o anda panel başlığı tekrar etmesin. */
.view--dream[data-phase="online"] .denied, .view--dream[data-phase="online"] .online-line{ display:none; }
.online-dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px rgba(143,240,182,.9); animation:blink 1.6s ease-in-out infinite; flex:none; }
.view--dream.is-open .panel--alarm{ border-color:var(--glass-line-strong); box-shadow:var(--glass-shadow), 0 0 50px -18px rgba(255,31,53,.6); }
.view--dream.is-open .denied-icon{ animation:none; background:radial-gradient(circle, #ff5a6a, #a1061a); box-shadow:0 0 0 1px rgba(255,190,196,.6), 0 0 26px rgba(255,60,80,.7); }

/* Tek tek sorulan adımlar (zihin taraması + son adım) */
.steps-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; margin-bottom:20px; }
.steps-kicker{ font-size:.66rem; color:var(--red-300); }
.steps-count{ font-size:.7rem; color:var(--text-300); }
.steps-bar{ grid-column:1 / -1; height:3px; border-radius:3px; background:rgba(255,86,100,.15); overflow:hidden; }
.steps-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--red-600), var(--red-300)); box-shadow:0 0 12px var(--red-500); transition:width .5s var(--ease-out); }
.step{ --dir:1; display:none; gap:16px; }
html[dir="rtl"] .step{ --dir:-1; }
.step.is-current, .step.is-out{ display:grid; }
.step:focus{ outline:none; }
.step.is-in{ animation:step-in .42s var(--ease-out) both; }
.step.is-out{ position:absolute; inset-inline:0; pointer-events:none; animation:step-out .22s ease-in both; }
@keyframes step-in{ from{ opacity:0; transform:translateX(calc(var(--dir) * 44px)) scale(.98); filter:blur(6px); } }
@keyframes step-out{ to{ opacity:0; transform:translateX(calc(var(--dir) * -44px)) scale(.98); filter:blur(6px); } }
.gate-steps{ position:relative; }
.step-q{ margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.12rem, 2.3vw, 1.5rem); line-height:1.32; text-wrap:balance; color:#fff; text-shadow:0 0 22px rgba(255,31,53,.5); }
html[dir="rtl"] .step-q{ line-height:1.7; }
.step-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.step-row--pair{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
.step-input{ font-size:1.05rem; padding:14px 16px; }
.step-go{ padding-inline:18px; }
.step-go .ico{ width:18px; height:18px; }
.picks{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.picks button{
  position:relative; overflow:hidden; padding:15px 8px; border-radius:12px; cursor:pointer;
  font-family:var(--font-mono); font-size:1rem; font-weight:600; letter-spacing:.04em; color:var(--text-100);
  background:rgba(255,31,53,.07); border:1px solid rgba(255,86,100,.3);
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.picks--text button{ font-family:var(--font-body); font-size:.86rem; font-weight:600; letter-spacing:0; padding-inline:6px; }
/* "999+" gibi etiketler Arapça/Farsça'da "+999"a dönmesin; sayaç da öyle. */
.picks:not(.picks--text) button, .steps-count{ direction:ltr; unicode-bidi:isolate; }
.picks button:hover{ background:rgba(255,31,53,.18); border-color:var(--glass-line-strong); box-shadow:0 0 22px -6px rgba(255,31,53,.8); }
.picks button:active{ transform:scale(.96); }
.picks button.is-picked{ color:#fff; background:linear-gradient(180deg, #ff3447, #c4081a); border-color:rgba(255,150,160,.6); box-shadow:0 0 26px -4px rgba(255,31,53,1); }
.gate-steps .form-status{ margin-top:12px; }
.phone{ display:flex; min-width:0; direction:ltr; }
.phone-cc{ display:grid; place-items:center; padding:0 12px; border-radius:11px 0 0 11px; border:1px solid rgba(255,86,100,.24); border-inline-end:0; background:rgba(255,31,53,.1); color:var(--red-300); font-size:.9rem; letter-spacing:.04em; }
.phone .input{ border-radius:0 11px 11px 0; font-family:var(--font-mono); letter-spacing:.06em; }

/* Konumlandırma → kilit kırılır → Online */
.gate-locate, .gate-online{
  text-align:center; padding:28px 18px; border-radius:16px;
  background:radial-gradient(circle at 50% 0%, rgba(255,31,53,.25), transparent 65%), rgba(8,1,3,.5);
  border:1px solid rgba(255,86,100,.3);
}
.locate-lock{
  display:grid; place-items:center; width:78px; height:78px; margin:0 auto 16px; border-radius:50%; color:#fff;
  background:radial-gradient(circle, rgba(255,31,53,.4), rgba(255,31,53,.05)); border:1px solid rgba(255,110,122,.55);
  box-shadow:0 0 36px rgba(255,31,53,.6);
}
.locate-lock svg{ width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.locate-shackle{ transform-box:fill-box; transform-origin:100% 100%; }
.gate[data-state="locate"] .locate-lock{ animation:lock-shake .12s linear infinite; }
.gate[data-state="locate"] .locate-shackle{ animation:shackle-open 3.2s ease-in forwards; }
@keyframes lock-shake{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(-1.5px,.6px); } 50%{ transform:translate(1.5px,-.6px); } 75%{ transform:translate(-.8px,-.6px); } }
@keyframes shackle-open{ 0%,82%{ transform:none; } 100%{ transform:translateY(-3px) rotate(30deg); } }
.locate-title{ margin:0 auto; max-width:30ch; font-family:var(--font-display); font-weight:700; font-size:clamp(1rem, 2vw, 1.25rem); line-height:1.4; text-wrap:balance; }
.locate-bar{ display:block; height:3px; margin:18px auto 14px; max-width:320px; border-radius:3px; background:rgba(255,86,100,.15); overflow:hidden; }
.locate-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--red-600), #ffd6da); box-shadow:0 0 14px var(--red-500); }
.gate[data-state="locate"] .locate-bar i{ animation:locate-fill 3.2s cubic-bezier(.45,.05,.3,1) forwards; }
@keyframes locate-fill{ to{ width:100%; } }
.locate-log{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.64rem; color:var(--text-500); }
.locate-log li{ opacity:0; }
.locate-log li::before{ content:"› "; color:var(--red-400); }
.gate[data-state="locate"] .locate-log li{ animation:log-in .4s ease forwards; }
.gate[data-state="locate"] .locate-log li:nth-child(2){ animation-delay:1s; }
.gate[data-state="locate"] .locate-log li:nth-child(3){ animation-delay:2s; }
@keyframes log-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; color:var(--text-200); } }
.gate-online{ padding:36px 18px 30px; }
.online-big{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.2rem, 3vw, 1.85rem); line-height:1.2;
  text-transform:uppercase; color:#fff; text-shadow:0 0 24px rgba(255,31,53,.9); text-wrap:balance;
}
html[dir="rtl"] .online-big{ line-height:1.6; }
.online-big b{ font-size:.58em; letter-spacing:.32em; color:var(--ok); text-shadow:0 0 18px rgba(143,240,182,.8); padding:7px 16px; border:1px solid rgba(143,240,182,.5); border-radius:999px; }
.gate[data-state="online"] .online-big{ animation:online-in 1s var(--ease-out) both; }
@keyframes online-in{ from{ opacity:0; transform:scale(1.18); filter:blur(12px); } }
.online-next{ margin:20px 0 0; display:flex; justify-content:center; align-items:center; gap:10px; font-size:.7rem; color:var(--text-300); }
.online-next b{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1px solid var(--glass-line-strong); color:#fff; font-size:.8rem; }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; background:rgba(8,1,3,.55); border:1px solid var(--glass-line); }
.seg button{
  min-height:42px; padding:9px 10px; border-radius:9px; border:0; background:none; cursor:pointer; color:var(--text-300);
  font-family:var(--font-display); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
html[dir="rtl"] .seg button{ letter-spacing:0; font-size:.82rem; }
.seg button[aria-selected="true"]{ color:#fff; background:linear-gradient(180deg, rgba(255,52,71,.9), rgba(196,8,26,.9)); box-shadow:0 6px 18px -8px rgba(255,31,53,.9); }
.gate .form{ margin-top:16px; }
.note--gmail{ margin:0; }

.gate-wait{
  text-align:center; padding:26px 18px 22px; border-radius:16px;
  background:radial-gradient(circle at 50% 0%, rgba(255,31,53,.22), transparent 65%), rgba(8,1,3,.5);
  border:1px solid rgba(255,86,100,.3);
}
.watcher{
  position:relative; width:84px; height:84px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  color:#fff; background:radial-gradient(circle, rgba(255,31,53,.35), rgba(255,31,53,.05)); border:1px solid rgba(255,110,122,.5);
  box-shadow:0 0 36px rgba(255,31,53,.55);
}
.watcher .ico{ width:40px; height:40px; animation:watch 4s ease-in-out infinite; }
.watcher-scan{ position:absolute; inset-inline:0; height:2px; top:0; background:linear-gradient(90deg, transparent, #ff6b78, transparent); box-shadow:0 0 12px #ff1f35; animation:scan 2.2s linear infinite; }
@keyframes watch{ 0%,100%{ transform:translateX(0); } 30%{ transform:translateX(-6px); } 65%{ transform:translateX(6px); } }
@keyframes scan{ from{ top:0; } to{ top:100%; } }
.wait-title{ margin:0; font-family:var(--font-display); font-size:1.1rem; }
.wait-msg{ margin:10px auto 0; max-width:46ch; color:var(--text-200); line-height:1.7; }
.wait-email{ margin:14px 0 16px; font-size:.7rem; color:var(--red-300); }
.gate[data-state="approved"] .watcher{ box-shadow:0 0 44px rgba(143,240,182,.4); border-color:rgba(143,240,182,.6); }

.behind{ margin-top:26px; padding-top:20px; border-top:1px solid var(--glass-line); }
.behind-label{ display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:.64rem; color:var(--text-300); }
.behind-label .ico{ width:15px; height:15px; color:var(--red-400); }
.behind-strip{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.behind-strip li{ position:relative; display:flex; flex-direction:column; gap:6px; font-size:.66rem; color:var(--text-500); text-align:center; }
.behind-strip img, .behind-final .behind-star{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px; display:block;
  filter:blur(5px) saturate(.4) brightness(.55) sepia(1) hue-rotate(-50deg) saturate(3);
  border:1px solid rgba(255,86,100,.2);
}
.behind-final .behind-star{ filter:none; background:radial-gradient(circle, rgba(255,31,53,.5), rgba(40,3,8,.9) 70%); }
.behind-strip li::after{
  content:""; position:absolute; top:0; inset-inline:0; aspect-ratio:4/5; border-radius:10px;
  background:repeating-linear-gradient(135deg, rgba(255,31,53,.12) 0 6px, transparent 6px 12px);
}

/* ---------------- İletişim ---------------- */
.contact-side{ display:grid; gap:14px; align-content:start; position:sticky; top:calc(var(--header-h) + 28px); }
.vip, .channels{
  position:relative; padding:22px; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.vip{ border-color:rgba(255,110,122,.45); background:radial-gradient(circle at 0% 0%, rgba(255,31,53,.25), transparent 55%), var(--glass); }
.vip-head{ display:flex; align-items:center; gap:14px; }
.vip-head h3{ margin:0; font-family:var(--font-display); font-size:.92rem; line-height:1.3; }
.vip-avatar{ position:relative; flex:none; }
.vip-avatar img{ width:56px; height:56px; border-radius:50%; display:block; box-shadow:0 0 0 2px rgba(255,255,255,.12), 0 0 24px rgba(250,2,3,.7); }
.vip-badge{ position:absolute; bottom:-4px; inset-inline-end:-6px; font-size:.54rem; font-weight:600; padding:2px 6px; border-radius:6px; color:#fff; background:var(--red-500); box-shadow:0 0 10px var(--red-500); }
.vip-line{ display:flex; align-items:center; gap:8px; margin:6px 0 0; font-size:.6rem; color:var(--text-300); }
.vip-desc{ margin:14px 0 16px; font-size:.86rem; color:var(--text-200); }
.channels .sub-title{ margin-top:0; }
.channels ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.channels a{
  display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; text-decoration:none;
  transition:background .2s ease;
}
.channels a:hover{ background:rgba(255,31,53,.1); }
.channels .ico{ width:34px; height:34px; padding:8px; border-radius:10px; color:var(--red-300); background:rgba(255,31,53,.1); border:1px solid rgba(255,86,100,.25); }
.channels span{ display:flex; flex-direction:column; min-width:0; }
.channels small{ font-size:.66rem; color:var(--text-500); text-transform:uppercase; letter-spacing:.08em; }
.channels b{ font-weight:600; font-size:.9rem; overflow-wrap:anywhere; }
html[dir="rtl"] .channels b{ text-align:end; }

/* ---------------- BABALAR ONLİNE: referanslar + 2040 hedefi ---------------- */
.view-inner--est{ min-height:auto; padding-bottom:clamp(28px, 4vw, 48px); }
.est-refs{
  position:relative; width:calc(min(1440px, 100%) - 2 * clamp(16px, 4vw, 56px)); margin:0 auto; padding:clamp(18px, 2.4vw, 28px);
  border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.est-refs-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.est-refs-head .sub-title{ margin:0; }
.est-refs-all{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:7px 14px; border-radius:999px; text-decoration:none; white-space:nowrap;
  font-size:.78rem; color:var(--text-300); border:1px solid var(--glass-line); transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.est-refs-all:hover{ color:#fff; border-color:var(--glass-line-strong); background:rgba(255,31,53,.1); }
.est-refs-all .ico{ width:16px; height:16px; }
/* Yüklenen görsellerin oranı ne olursa olsun hepsi aynı kare kutuda, ortadan kırpılarak durur. */
.est-refs-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(8px, 1.2vw, 14px); }
.est-refs-grid:empty{ display:none; }
.est-ref{
  position:relative; aspect-ratio:1; padding:0; overflow:hidden; cursor:zoom-in; border-radius:14px;
  border:1px solid rgba(255,86,100,.22); background:linear-gradient(135deg, #2b050b, #12020a);
  transition:border-color .25s ease, box-shadow .25s ease; animation:tile-in .6s var(--ease-out) backwards;
}
.est-ref img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
.est-ref::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 -46px 50px -34px rgba(10,1,3,.85); }
.est-ref:hover, .est-ref:focus-visible{ border-color:var(--glass-line-strong); box-shadow:0 0 30px -8px rgba(255,31,53,.75); }
.est-ref:hover img, .est-ref:focus-visible img{ transform:scale(1.05); }
.est-ref.is-skeleton{ cursor:default; animation:skeleton 1.4s ease-in-out infinite; }
@keyframes skeleton{ 50%{ opacity:.45; } }
.est-refs-empty{ margin:0; padding:26px 12px; text-align:center; font-size:.9rem; color:var(--text-300); border:1px dashed rgba(255,86,100,.25); border-radius:14px; }

.goal{ position:relative; display:flex; flex-direction:column; height:clamp(440px, 86svh, 900px); margin-top:clamp(12px, 3vw, 36px); }
.stage--goal{ flex:1; min-height:0; }
.goal-caption{
  position:absolute; left:50%; bottom:clamp(18px, 4vh, 40px); transform:translateX(-50%); margin:0; white-space:nowrap;
  font-size:.66rem; color:var(--text-200); padding:7px 14px; border-radius:999px; background:rgba(18,2,6,.55); border:1px solid var(--glass-line);
}
/* WebGL yoksa kule çizilemez; hedef yılı düz yazı olarak kalır. */
.no-webgl .goal::after{
  content:"2040"; position:absolute; left:50%; top:45%; transform:translate(-50%, -50%);
  font-family:var(--font-display); font-weight:800; font-size:clamp(3rem, 12vw, 7rem); color:#fff; text-shadow:0 0 40px rgba(255,31,53,.9);
}

/* ---------------- Referanslarımız ----------------
   Instagram profili dilinde: bölüm başlığı + öne çıkanlar halkaları (kategoriler) + 4:5 ızgara.
   En yeni paylaşım en üstte; içerik panelden yüklendikçe akış kendiliğinden birikir. */
.view-inner--refs{ min-height:auto; padding-bottom:28px; }
.view-inner--refs .stage{ min-height:460px; }
.ref-sections{ display:grid; gap:10px; margin-top:24px; }
.ref-section{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; width:100%;
  padding:14px 16px; border-radius:14px; cursor:pointer; text-align:start;
  background:rgba(255,31,53,.06); border:1px solid rgba(255,86,100,.2);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ref-section:hover{ border-color:var(--glass-line-strong); }
.ref-section[aria-selected="true"]{
  background:linear-gradient(135deg, rgba(255,52,71,.28), rgba(196,8,26,.1));
  border-color:rgba(255,150,160,.55); box-shadow:0 0 30px -10px rgba(255,31,53,.8);
}
.ref-section-icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; background:rgba(255,31,53,.2); border:1px solid rgba(255,110,122,.4); }
.ref-section-icon .ico{ width:22px; height:22px; }
.ref-section-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ref-section-text strong{ font-family:var(--font-display); font-size:.84rem; letter-spacing:.05em; text-transform:uppercase; }
html[dir="rtl"] .ref-section-text strong{ letter-spacing:0; font-size:.95rem; }
.ref-section-text small{ font-size:.8rem; color:var(--text-300); line-height:1.4; }
.ref-section-count{ font-size:.74rem; color:var(--red-300); padding:4px 10px; border-radius:999px; border:1px solid rgba(255,86,100,.3); min-width:2.6em; text-align:center; }

.refs{
  position:relative; width:min(1100px, calc(100% - 32px)); margin:0 auto 140px; padding:clamp(18px, 3vw, 32px);
  border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.refs-head{ display:flex; align-items:center; gap:clamp(14px, 3vw, 28px); padding-bottom:18px; }
.refs-avatar{
  flex:none; width:clamp(64px, 10vw, 92px); aspect-ratio:1; border-radius:50%; padding:3px;
  background:conic-gradient(from 210deg, #ff2a3e, #ffb0b8, #b0061a, #ff2a3e); box-shadow:0 0 30px rgba(255,31,53,.45);
}
.refs-avatar img{ width:100%; height:100%; border-radius:50%; display:block; border:3px solid #14040a; }
.refs-meta{ min-width:0; }
.refs-title{ margin:0; font-family:var(--font-display); font-size:clamp(1.05rem, 2.2vw, 1.45rem); }
.refs-stats{ margin:6px 0 0; font-size:.9rem; color:var(--text-300); }
.refs-stats b{ color:#fff; font-weight:700; }
.refs-dot{ margin:0 10px; color:var(--text-500); }
.refs-desc{ margin:4px 0 0; font-size:.86rem; color:var(--text-300); }

.highlights{ display:flex; gap:16px; overflow-x:auto; padding:14px 4px 18px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:rgba(255,86,100,.4) transparent; }
.hl{ flex:none; width:82px; display:flex; flex-direction:column; align-items:center; gap:7px; padding:0; border:0; background:none; cursor:pointer; color:var(--text-200); scroll-snap-align:start; }
.hl-ring{ width:70px; height:70px; border-radius:50%; padding:3px; background:rgba(255,255,255,.14); transition:transform .25s var(--ease-out), box-shadow .25s ease; }
.hl.has-posts .hl-ring{ background:conic-gradient(from 200deg, #ff2a3e, #ffb0b8, #c10716, #ff2a3e); }
.hl:hover .hl-ring{ transform:scale(1.06); }
.hl[aria-pressed="true"] .hl-ring{ box-shadow:0 0 0 2px #14040a, 0 0 0 4px #fff, 0 0 26px rgba(255,31,53,.85); }
.hl-ring img, .hl-ph{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:3px solid #14040a; background:#1b0409; }
.hl-ph{ display:grid; place-items:center; color:var(--red-300); }
.hl-ph .ico{ width:24px; height:24px; }
.hl-name{ font-size:.72rem; line-height:1.25; text-align:center; max-width:82px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.hl[aria-pressed="true"] .hl-name{ color:#fff; font-weight:700; }
.hl-count{ font-size:.62rem; color:var(--text-500); margin-top:-4px; }
.hl.is-empty{ opacity:.55; }

.feed{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; border-top:1px solid var(--glass-line); padding-top:4px; }
.tile{
  position:relative; aspect-ratio:4/5; padding:0; border:0; overflow:hidden; cursor:zoom-in; border-radius:4px;
  background:linear-gradient(135deg, #2b050b, #12020a); animation:tile-in .6s var(--ease-out) backwards;
}
.tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(10,1,3,.88)); opacity:0; transition:opacity .25s ease; }
.tile-cap{
  position:absolute; inset-inline:10px; bottom:10px; z-index:1; text-align:start; font-size:.74rem; line-height:1.35; color:#fff;
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.tile:hover img, .tile:focus-visible img{ transform:scale(1.06); }
.tile:hover::after, .tile:focus-visible::after, .tile:hover .tile-cap, .tile:focus-visible .tile-cap{ opacity:1; transform:none; }
.tile-new{ position:absolute; top:8px; inset-inline-start:8px; z-index:1; font-size:.56rem; padding:3px 7px; border-radius:999px; color:#fff; background:var(--red-500); box-shadow:0 0 12px rgba(255,31,53,.8); }
@keyframes tile-in{ from{ opacity:0; transform:scale(.96); } }
.refs-empty{ margin:0; padding:48px 12px; text-align:center; color:var(--text-300); border-top:1px solid var(--glass-line); }
.refs-more-wrap{ display:flex; justify-content:center; margin-top:18px; }
.refs-more-wrap .btn[hidden]{ display:none; }

/* Büyük görsel penceresi (lightbox) */
html.lb-open{ overflow:hidden; }
.lightbox{ padding:0; border:0; margin:0; width:100vw; height:100vh; max-width:100vw; max-height:100vh; background:transparent; color:var(--text-100); overflow:hidden; }
.lightbox[open]{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:clamp(12px, 3vw, 40px); }
.lightbox::backdrop{ background:rgba(5,1,2,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lb-figure{ margin:0; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lb-img{ max-width:100%; max-height:calc(100vh - 190px); object-fit:contain; border-radius:10px; background:#1b0409; box-shadow:0 30px 80px -30px #000, 0 0 60px -22px rgba(255,31,53,.7); }
.lb-figure figcaption{ text-align:center; max-width:640px; }
.lb-cat{ font-size:.66rem; color:var(--red-300); }
.lb-caption{ margin:6px 0; line-height:1.55; }
.lb-caption:empty{ display:none; }
.lb-meta{ display:flex; justify-content:center; gap:14px; font-size:.62rem; color:var(--text-500); }
.lb-btn{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(255,31,53,.14); border:1px solid var(--glass-line); transition:background .2s ease, border-color .2s ease; }
.lb-btn:hover{ background:rgba(255,31,53,.3); border-color:var(--glass-line-strong); }
.lb-btn[hidden]{ visibility:hidden; display:grid; }
.lb-close{ position:fixed; top:calc(16px + var(--sat)); inset-inline-end:max(16px, var(--sar)); z-index:2; }
.lb-prev .ico{ transform:scaleX(-1); }
html[dir="rtl"] .lb-prev .ico{ transform:none; }
html[dir="rtl"] .lb-next .ico{ transform:scaleX(-1); }

/* ---------------- Alt gezgin (dock) ---------------- */
.dock{
  position:fixed; bottom:calc(14px + var(--sab)); left:50%; z-index:25; transform:translate(-50%, 160%); opacity:0;
  display:flex; align-items:center; gap:4px; padding:6px; max-width:calc(100% - 20px); border-radius:999px;
  background:var(--glass-solid); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:transform .55s var(--ease-out), opacity .35s ease;
}
html.js:not([data-view="portal"]) .dock{ transform:translate(-50%, 0); opacity:1; }
.no-js .dock{ display:none; }
.dock-step, .dock-home, .dock-list a{
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:999px;
  border:1px solid transparent; background:none; color:var(--text-300); text-decoration:none; cursor:pointer; white-space:nowrap;
  font-size:.72rem; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.dock-step, .dock-home{ flex:none; }
.dock-step{ width:38px; padding:0; justify-content:center; }
.dock-step[data-step="-1"] .ico{ transform:scaleX(-1); }
html[dir="rtl"] .dock-step[data-step="-1"] .ico{ transform:none; }
html[dir="rtl"] .dock-step[data-step="1"] .ico{ transform:scaleX(-1); }
.dock-home{ color:var(--text-100); border-color:var(--glass-line); }
.dock-step:hover, .dock-home:hover, .dock-list a:hover{ background:rgba(255,31,53,.12); color:#fff; }
.dock-list{ list-style:none; margin:0; padding:0; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; }
/* Liste kaydığında kenardaki yarım kalan ad sert kesilmesin, solarak kaybolsun. */
@media (max-width:1100px){
  .dock-list{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); padding-inline:10px; }
}
.dock-list::-webkit-scrollbar{ display:none; }
.dock-list a[aria-current="page"]{ color:#fff; background:linear-gradient(180deg, rgba(255,52,71,.85), rgba(196,8,26,.85)); box-shadow:0 0 18px -4px rgba(255,31,53,.9); }

/* ---------------- Alt bilgi ---------------- */
.site-footer{
  position:relative; z-index:3; text-align:center; padding:24px 16px calc(96px + var(--sab)); font-size:.74rem; color:var(--text-500);
  border-top:1px solid rgba(255,86,100,.12); background:linear-gradient(transparent, rgba(5,1,2,.8));
}
.site-footer p{ margin:4px 0; }
.site-footer .mono{ font-size:.62rem; }
.site-footer a{ color:var(--text-300); }
.site-footer a:hover{ color:#fff; }
html[data-view="portal"] .site-footer{ padding-bottom:28px; }

/* ---------------- Duyarlı yerleşim ---------------- */
@media (max-width:980px){
  .cards ul{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .view-inner, .view-inner--contact{ grid-template-columns:minmax(0,1fr); align-items:start; padding-top:calc(var(--header-h) + 28px); }
  .stage{ order:-1; min-height:42svh; }
  .contact-side{ position:static; }
  .svc{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px){
  :root{ --header-h:54px; --blur:blur(12px) saturate(130%); }
  :root{ --edge:8px; }
  .topbar{ grid-template-columns:auto 1fr auto; padding-inline:8px; border-radius:14px; }
  .brand span{ display:none; }
  .holding-link{ font-size:.6rem; letter-spacing:.1em; padding-inline:6px; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .login-btn span{ display:none; }
  .login-btn{ width:40px; padding:0; }
  .hub{ padding-top:calc(var(--header-h) + 30px); }
  .cards ul{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .card{ padding:14px 14px 16px; }
  .form--grid, .features, .stats{ grid-template-columns:minmax(0,1fr); }
  .stats{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .stats li{ padding:12px 10px; }
  .refs{ width:calc(100% - 20px); padding:16px 12px; margin-bottom:110px; }
  .highlights{ gap:12px; }
  .hl{ width:72px; }
  .hl-ring{ width:62px; height:62px; }
  .feed{ gap:3px; }
  .tile-cap{ display:none; }
  .lightbox[open]{ grid-template-columns:minmax(0,1fr); padding:64px 10px 90px; }
  .lb-prev, .lb-next{ position:fixed; bottom:calc(20px + var(--sab)); z-index:2; }
  .lb-prev{ inset-inline-start:20px; }
  .lb-next{ inset-inline-end:20px; }
  .lb-img{ max-height:calc(100vh - 260px); }
  .behind-strip{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:5px; }
  .est-refs{ width:calc(100% - 20px); padding:16px 12px; }
  .est-refs-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .goal{ height:clamp(420px, 78svh, 640px); }
  .step-row--pair{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .step-row--pair .step-go{ grid-column:1 / -1; }
  .picks button{ padding:14px 4px; font-size:.92rem; }
  .picks--text button{ font-size:.8rem; }
  .behind-strip span{ font-size:.58rem; }
  /* Dar ekranda etiketler sahne kutusundan taşıyor; dekoratif oldukları için gizleniyor. */
  .hud-label{ display:none; }
  .dock-home span{ display:none; }
  .dock-home{ width:38px; padding:0; justify-content:center; }
  .dock-list a{ padding:0 10px; font-size:.68rem; }
  .view-inner{ padding-bottom:110px; }
}
@media (max-width:420px){
  /* Dar telefonlarda dock tek satıra sığsın diye ileri/geri okları gizlenir; alan adları kaydırılarak seçilir. */
  .dock-step{ display:none; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .holding-link{ display:none; }
  .topbar{ grid-template-columns:auto 1fr; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .emblem{ transform:none; }
  .fx-alarm::before{ animation:none; opacity:.8; }
  .alarm-beam{ display:none; }
}