@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   ECHO AJANS
   Antrasit yüzey · ECHO mavisi cam · halka geometrisi
   Tek sabit sahne; kaydırma filmi sürer.
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:#0d0e11;
  --coal:#131519;
  --coal-2:#191c21;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.42);  /* UI kenarı AA: 2.11:1 -> 3.3:1 */
  --text:#eef0f4;
  --text-2:rgba(238,240,244,.62);
  --text-3:rgba(238,240,244,.58);  /* küçük punto AA: 3.03:1 -> 6.1:1 */

  --blue:#364e9d;
  --blue-lit:#5b7ce0;
  --blue-glow:#8fa9f5;
  --wa:#25d366;                    /* WhatsApp yeşili */
  --wa-soft:rgba(37,211,102,.55);
  --wa-txt:#b9f2ce;

  --gut:clamp(18px,3.6vw,56px);
  --rail:clamp(44px,5vw,66px);
  --v1:clamp(18px,3vw,42px);
  --col:clamp(112px,12vw,168px);   /* sol sütun: dikey çizginin yeri */
  --hdr:clamp(54px,6.6vh,76px);    /* başlık satırının yüksekliği */

  --ser:'Source Serif 4',Georgia,'Times New Roman',serif;
  --san:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --e:cubic-bezier(.22,1,.36,1);
  --ei:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
html,body{scrollbar-width:none;-ms-overflow-style:none}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--san);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
body.lock{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue-glow);outline-offset:3px;border-radius:4px}
/* diyalog kutusu odağı programla alıyor; halka gösterilmesi formu
   seçili gibi gösteriyordu. İçindeki gerçek denetimler halkasını korur. */
[role="dialog"]:focus,[role="dialog"]:focus-visible{outline:none}
ul{list-style:none}
::selection{background:var(--blue-lit);color:#fff}

.mono{font-family:var(--mono);font-weight:400;letter-spacing:.16em;text-transform:uppercase}

/* klavye kullanıcısı doğrudan içeriğe atlasın */
.atla{position:fixed;top:8px;left:8px;z-index:1000;padding:10px 16px;border-radius:6px;
  background:var(--coal-2);border:1px solid var(--line-2);font-size:13px;
  transform:translateY(-160%);transition:transform .2s}
.atla:focus{transform:none}
/* bal küpü — görünmez ama display:none değil, botlar yine de doldurur */
.tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lbl{display:block;font-size:10px;color:var(--text-3);margin-bottom:12px}

/* ══ SAHNE ══ */
.stage{height:var(--track,900vh);position:relative}
.pin{position:sticky;top:0;height:100dvh;overflow:clip;background:var(--ink)}
/* ── film: kaydırmayla sürülen kare dizisi (tek canvas) ── */
.film{position:absolute;inset:0;display:block;width:100%;height:100%;
  will-change:transform;backface-visibility:hidden}
.vig{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(122% 96% at 50% 50%,transparent 44%,rgba(4,5,8,.68) 100%);
}
.grain{
  position:absolute;inset:-40%;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1.5%)}
  50%{transform:translate(1.5%,-2%)}75%{transform:translate(-1.5%,-1%)}
  100%{transform:translate(0,0)}
}

/* ══ AÇILIŞ ══ */
.boot{position:fixed;inset:0;z-index:999;background:var(--ink);
  transition:opacity .8s var(--e),visibility .8s}
.boot.off{opacity:0;visibility:hidden;pointer-events:none}
.boot__bar{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);height:1px;
  background:rgba(255,255,255,.14)}
.boot__bar i{display:block;height:100%;width:0;background:var(--blue-glow)}

/* ══ IZGARA — pear düzeni: sol sütun çizgisi + başlık satırı ══ */
.grid{position:fixed;inset:0;z-index:58;pointer-events:none}
.grid__v{
  position:absolute;left:var(--col);top:0;bottom:0;width:1px;
  background:rgba(238,240,244,.12);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.4s var(--e) .3s;
}
.grid__h{
  position:absolute;left:0;right:0;top:var(--hdr);height:1px;
  background:rgba(238,240,244,.09);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.4s var(--e) .5s;
}
body.ready .grid__v{transform:scaleY(1)}
body.ready .grid__h{transform:scaleX(1)}

/* ══ ÜST ÇUBUK — logo ilk hücrenin içinde ══ */
.bar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr);
  display:flex;align-items:center;gap:11px;padding:0 var(--gut)}
.tile{width:44px;height:34px;flex:0 0 auto;display:grid;place-items:center}
.tile svg{width:34px;overflow:visible}
.tile circle{fill:none;stroke:#fff;stroke-width:9;transform-origin:center;transform-box:fill-box}
.tile circle:nth-child(2){opacity:.55;stroke-width:7}
.tile circle:nth-child(3){opacity:.3;stroke-width:5.5}
.tile circle:nth-child(4){opacity:.15;stroke-width:4}
.tile:hover circle{animation:pulse 1.5s var(--ei) infinite}
.tile:hover circle:nth-child(2){animation-delay:.12s}
.tile:hover circle:nth-child(3){animation-delay:.24s}
.tile:hover circle:nth-child(4){animation-delay:.36s}
@keyframes pulse{0%,100%{opacity:.2;transform:scale(.95)}45%{opacity:1;transform:scale(1.03)}}
.bar__name{font-size:11px;font-weight:500;letter-spacing:.22em}

/* ══ MENÜ — sütunun içinde dört kare; açılınca liste çizginin sağına ══ */
.menu{position:fixed;left:0;top:var(--hdr);z-index:59}
/* Referanslar sayfasında kapanış bölümü görününce menü, o bölümü ayıran
   yatay çizginin hemen ÜSTÜNE oturur — sol sütunun boş kalan yerine.
   Kaydırma değeri js/isler.js'ten --menu-kay ile geliyor; menü çizgiyi
   izlediği için geçiş uygulanmaz, yoksa peşinden sürüklenir. */
body.menu-asagi .menu{transform:translateY(var(--menu-kay, 0px));transition:none}
/* Orada liste aşağı değil yukarı açılsın */
body.menu-asagi .menu__list{top:auto;bottom:0}
/* Kutu vermeden okunurluk: ince gölge */
body.menu-asagi .menu__link{text-shadow:0 1px 10px rgba(6,7,10,.95),0 0 3px rgba(6,7,10,.9)}
.menu__btn{
  width:var(--col);height:clamp(50px,6.2vh,72px);display:grid;place-items:center;
  color:var(--text-2);opacity:0;transition:color .3s,opacity .9s var(--e) .95s;
}
body.ready .menu__btn{opacity:1}
.menu__btn:hover{color:var(--text)}
.menu__ico{
  display:grid;grid-template-columns:repeat(2,4px);gap:3px;
  transition:transform .6s var(--e);
}
.menu__ico i{width:4px;height:4px;background:currentColor;display:block;transition:opacity .4s}
.menu.open .menu__ico{transform:rotate(45deg)}
.menu__btn:hover .menu__ico i:nth-child(2),
.menu__btn:hover .menu__ico i:nth-child(3){opacity:.45}

.menu__list{
  position:absolute;left:calc(var(--col) + clamp(20px,2.2vw,34px));
  top:clamp(13px,1.7vh,20px);
  display:grid;justify-items:start;gap:clamp(7px,1.1vh,11px);
  pointer-events:none;
}
.menu.open .menu__list{pointer-events:auto}
.menu__link{
  font-size:10px;color:var(--text-3);position:relative;padding:2px 0;white-space:nowrap;
  opacity:0;transform:translateX(-8px);
  transition:color .3s,opacity .45s var(--e),transform .55s var(--e);
}
.menu.open .menu__link{opacity:1;transform:none}
.menu.open .menu__link:nth-child(1){transition-delay:0s,.05s,.05s}
.menu.open .menu__link:nth-child(2){transition-delay:0s,.12s,.12s}
.menu.open .menu__link:nth-child(3){transition-delay:0s,.19s,.19s}
.menu.open .menu__link:nth-child(4){transition-delay:0s,.26s,.26s}
.menu__link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e);
}
.menu__link:hover{color:var(--text)}
.menu__link:hover::after{transform:scaleX(1);transform-origin:left}

.meter{position:fixed;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.08);z-index:58}
.meter i{display:block;height:100%;width:0;background:var(--blue-glow)}

.hint{position:fixed;right:var(--gut);bottom:calc(var(--gut) + 6px);z-index:55;
  font-size:9px;color:var(--text-3);display:flex;align-items:center;gap:9px;
  transition:opacity .6s var(--e)}
.hint.off{opacity:0}
.hint i{width:30px;height:1px;background:currentColor;position:relative;overflow:hidden}
.hint i::after{content:'';position:absolute;inset:0;background:#fff;animation:scrub 2.4s var(--ei) infinite}
@keyframes scrub{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}


/* ══════════ STATİK DÜZEN — JS yokken ve hareket azaltıldığında ══════════
   .no-js  : JS çalışmadı. Film çizilmiyor, boot çubuğu ekranı kilitliyordu;
             sayfa tamamen boştu. Artık bloklar akan bir belge olarak diziliyor.
   .duragan: kullanıcı prefers-reduced-motion dedi. Sahne tek kare olarak
             kalıyor, kaydırmaya bağlı hareket yok, metinler aynı şekilde akıyor.
   İki durumda da METİN AYNI — bota veya kullanıcıya farklı içerik verilmiyor. */
.no-js .boot{display:none}
.nojs-not{position:relative;z-index:40;margin:0;padding:calc(var(--hdr) + 20px) var(--gut) 0;
  font-size:13px;color:var(--text-2)}
.duragan .stage{height:auto}
.no-js .pin,.duragan .pin{position:relative}
/* JS yoksa tuvale hiçbir şey çizilmiyor: boş siyah kutuyu göstermenin anlamı yok */
.no-js .stage{display:none}
.no-js .meter,.duragan .meter,.no-js .hint,.duragan .hint{display:none}

.no-js .blok,.duragan .blok{
  position:relative;inset:auto;opacity:1;visibility:visible;pointer-events:auto;
  transform:none;min-height:0;
  padding-top:clamp(40px,7vh,84px);padding-bottom:clamp(40px,7vh,84px);
  border-top:1px solid var(--line);
}
.no-js .blok::after,.duragan .blok::after{display:none}
.no-js .blok--acilis,.duragan .blok--acilis{border-top:0}
.no-js .blok--ara .blok__h,.duragan .blok--ara .blok__h{font-size:clamp(22px,2.6vw,32px)}
/* statik düzende sahne blokları arka planı kapatmasın diye zemin veriliyor */
.no-js body,.duragan body{background:var(--ink)}

/* JS yoksa paneller normal bölüm olarak akar: hizmet açıklamaları ve iletişim
   bilgileri sayfada okunur durumda kalır, bağlantılar #p-... çapasına gider. */
.no-js .panel{
  position:relative;clip-path:none;visibility:visible;
  border-top:1px solid var(--line);
}
.no-js .panel__in{opacity:1;transform:none}
.no-js .panel__x{display:none}

/* hareket azaltıldığında sahne tek karede donuyor, sayfa normal akıyor */
.duragan .pin{height:56vh;min-height:320px}
.duragan .film{position:absolute;inset:0;width:100%;height:100%}

/* ══════════ METİN BLOKLARI ══════════ */
/* Üç blok var: açılış · atölye · iletişim. Opaklık ve konumu js/main.js
   yazar; hangi blok ne zaman açılır bilgisi HTML’de data-a/b/c/d ile durur. */
.blok{
  position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;
  /* tamamen sönmüş blok sekme sırasından da çıksın — görünmeyen butona
     klavyeyle odaklanılmasın; js/main.js .gor sınıfını yazar */
  visibility:hidden;
  display:grid;align-content:center;justify-items:start;
  padding:calc(var(--hdr) + 24px) var(--gut) clamp(58px,11vh,124px)
          calc(var(--col) + clamp(24px,3vw,56px));
  will-change:opacity,transform;
}
.blok.gor{visibility:visible}
.blok.on{pointer-events:auto}
/* karartma yalnızca metnin durduğu yana — sahnenin ana nesnesi açıkta kalır */
.blok::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(6,7,10,.93) 0%,rgba(6,7,10,.76) 26%,rgba(6,7,10,.28) 54%,rgba(6,7,10,0) 74%);
}
/* sahneye göre dikey yer — başlık ana nesnenin ve yüzlerin üstüne düşmesin */
.blok--cam,.blok--tunel,.blok--atolye{align-content:end}
.blok__in{max-width:min(640px,94%)}
/* ara sahneler: tek başlık, ana bloklardan bir tık küçük */
.blok--ara .blok__h{font-size:clamp(24px,3.3vw,44px);max-width:22ch}
.blok--ara .blok__in{max-width:min(560px,94%)}

.blok__h{
  font-family:var(--ser);font-weight:300;
  font-size:clamp(30px,4.6vw,64px);line-height:1.08;letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(0,0,0,.75);
}
.blok__p{
  margin-top:clamp(13px,1.7vw,20px);max-width:44ch;
  font-size:clamp(13.5px,1.15vw,16.5px);line-height:1.62;color:var(--text-2);
}
.blok--iletisim .blok__p{max-width:56ch}
.blok__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.8vw,36px)}

/* hizmet dizisi: iki satır, araları nokta; dar ekranda kendi içinde kırılır */
.blok__svc{
  margin-top:clamp(15px,2vw,24px);
  font-size:10.5px;color:var(--text-2);
  display:grid;gap:clamp(6px,.9vh,10px);
}
.blok__svc ul{display:flex;flex-wrap:wrap;align-items:baseline}
.blok__svc li{white-space:nowrap}
.blok__svc li:not(:last-child)::after{
  content:'·';color:var(--text-3);margin:0 .9em;letter-spacing:0;
}

@media (max-width:640px){
  .blok__svc{font-size:10px}
}
@media (max-width:420px){
  .blok__h br{display:none}
  .blok__p br{display:none}
}

/* ══ BUTON ══
   Hepsi aynı cam gövde: dolu mavi kutu yok. Mavi zeminde beyaz yazı üstüne
   gelince kayboluyordu; artık üstüne gelince gövde koyulaşıp çerçeve
   parlıyor, yazı hep açık kalıyor.                                        */
.btn{display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:12px 12px 12px 20px;border-radius:6px;position:relative;overflow:hidden;will-change:transform;
  color:var(--text);border:1px solid var(--line-2);
  background:rgba(9,11,15,.44);
  backdrop-filter:blur(9px) saturate(120%);-webkit-backdrop-filter:blur(9px) saturate(120%);
  transition:border-color .35s var(--e),color .35s var(--e)}
.btn i{font-style:normal;width:22px;height:22px;border-radius:3px;display:grid;place-items:center;
  font-size:12px;flex:0 0 auto;background:rgba(255,255,255,.13);color:var(--text);
  transition:transform .45s var(--e),background-color .35s var(--e)}
.btn>*{position:relative;z-index:2}
/* üstüne gelince yükselen perde — beyazın onda biri, yazıyı yutmaz */
.btn::before{content:'';position:absolute;inset:0;z-index:1;transform:translateY(101%);
  background:rgba(255,255,255,.10);
  transition:transform .5s var(--e)}
.btn:hover{border-color:rgba(255,255,255,.46);color:#fff}
.btn:hover::before{transform:translateY(0)}
.btn:hover i{transform:translateX(3px);background:rgba(255,255,255,.24)}
.btn:focus-visible{outline:2px solid var(--blue-glow);outline-offset:2px}
/* birincil ile ikincil arasındaki fark yalnızca çerçevenin tokunda */
.btn--fill{border-color:rgba(255,255,255,.38)}
/* WhatsApp — aynı cam gövde, rengi kendi yeşili */
.btn--wa{border-color:var(--wa-soft);color:var(--wa-txt)}
.btn--wa::before{background:rgba(37,211,102,.20)}
.btn--wa:hover{border-color:var(--wa);color:#eafff2}
.btn--wa i{background:rgba(37,211,102,.22)}
.btn--wa:hover i{background:rgba(37,211,102,.34)}
.btn--wide{width:100%;justify-content:space-between;margin-top:6px}

/* ══════════ PANELLER ══════════ */
.panel{
  position:fixed;inset:0;z-index:80;
  background:color-mix(in srgb,var(--coal) 92%,transparent);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  clip-path:inset(0 0 100% 0);
  /* visibility geçiş listesinde olmazsa panel kapanırken bir anda yok oluyor
     ve yukarı toplanma animasyonu hiç görünmüyordu */
  transition:clip-path .8s var(--e),visibility 0s linear .8s;
  overflow-y:auto;overscroll-behavior:contain;
  display:grid;align-content:center;padding:calc(var(--rail) + 24px) var(--gut) var(--gut);
}
.panel{visibility:hidden}
.panel.open{clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .8s var(--e),visibility 0s}
.panel__x{position:fixed;top:16px;right:var(--gut);z-index:2;width:44px;height:44px;
  border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}
.panel__x i{position:absolute;width:13px;height:1px;background:#fff}
.panel__x i:nth-child(1){transform:rotate(45deg)}
.panel__x i:nth-child(2){transform:rotate(-45deg)}
.panel__in{max-width:1080px;width:100%;margin:0 auto;
  opacity:0;transform:translateY(18px);transition:opacity .6s .25s,transform .7s var(--e) .25s}
.panel.open .panel__in{opacity:1;transform:none}
.panel__in--two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:start}
.panel h2{font-family:var(--ser);font-weight:300;
  font-size:clamp(24px,3.2vw,40px);line-height:1.14;letter-spacing:-.014em;
  margin-bottom:clamp(22px,3vw,40px);max-width:18ch}

.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
.svc li{background:var(--coal-2);padding:clamp(16px,2.2vw,26px)}
.svc li .mono{font-size:9.5px;color:var(--text-3)}
.svc h3{font-family:var(--ser);font-weight:400;font-size:clamp(17px,1.9vw,23px);
  margin:clamp(16px,2.4vw,34px) 0 7px}
.svc p{font-size:13.5px;color:var(--text-2)}


#form{display:grid;gap:16px;max-width:520px}
.fld{position:relative}
.fld input,.fld textarea{width:100%;padding:13px 2px 9px;border-bottom:1px solid var(--line);
  font-size:15px;resize:none;transition:border-color .35s}
.fld label{position:absolute;left:2px;top:13px;color:var(--text-3);font-size:15px;pointer-events:none;
  transform-origin:left top;transition:transform .4s var(--e),color .3s}
.fld input:focus+label,.fld textarea:focus+label,
.fld input:not(:placeholder-shown)+label,.fld textarea:not(:placeholder-shown)+label{
  transform:translateY(-14px) scale(.66);color:var(--text-2)}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--blue-lit)}
.fld.bad input,.fld.bad textarea{border-bottom-color:#ff7a68}
.fld.bad label{color:#ff7a68}
.pickers>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pickers button{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 15px;min-height:36px;border:1px solid var(--line);border-radius:99px;color:var(--text-2);
  transition:background-color .3s,color .3s,border-color .3s}
.pickers button:hover{border-color:var(--line-2)}
.pickers button.on{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.44);color:#fff}
.formmsg{min-height:14px;font-size:10px;color:var(--text-2)}
/* form gönderilemezse doğrudan e-posta çıkışı — iletişim yolu hep açık kalsın */
.formalt{margin-top:10px;font-size:12.5px;color:var(--text-3)}
.formalt a{color:var(--blue-glow);text-decoration:underline;text-underline-offset:3px}

/* gönder ile WhatsApp yan yana; dar ekranda alt alta düşer */
.formcta{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.formcta .btn{flex:1 1 0;min-width:172px;justify-content:center;padding:12px 16px}
.formmsg.bad{color:#ff7a68}

.card{background:var(--coal-2);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.card>div{padding:clamp(13px,1.7vw,18px) clamp(15px,2vw,22px);border-bottom:1px solid var(--line)}
.card .lbl{margin-bottom:5px;font-size:9px}
.card a,.card p{font-family:var(--ser);font-size:clamp(15px,1.6vw,19px);display:block}
.card a + a{margin-top:5px}
.card a{transition:color .3s}
.card a:hover{color:var(--blue-glow)}
.card__legal{border-bottom:0;font-size:9px;color:var(--text-3)}
.card__legal i{font-style:normal}

/* ══ DUYARLI ══ */
@media (max-width:960px){
  .grid__h{top:var(--hdr)}
  .panel__in--two{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .blok{padding-left:var(--gut)}
  }
@media (max-width:520px){
  .hint{display:none}
  .blok__h{font-size:clamp(26px,7vw,34px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .grain{display:none}
}

@media (max-width:900px){
  .blok{padding-left:var(--gut)}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBİL — 760px altında kurumsal site düzeni

   Düzen, uniparinsaat.com sitesinin mobil yapısını izler: kutulu hamburger,
   noktalı hero slider, ortalanmış bölüm başlıkları, kutu kartlar, çok satırlı
   footer ve sabit WhatsApp düğmesi.

   Masaüstündeki kaydırmalı film OLDUĞU GİBİ durur; bu blok yalnızca dar
   ekranda devreye girer ve filmi tamamen kapatır. Kare dizisi indirilmez.
   ══════════════════════════════════════════════════════════════════════════ */
.mob{display:none}

@media (max-width:760px){

  /* .blok bölümleri .stage'in DIŞINDA ve position:fixed — yalnızca .stage'i
     gizlemek yetmiyordu, sahne yazıları mobil düzenin üzerine biniyordu. */
  .stage,.blok,.meter,.hint,.grain,.grid__v{display:none}
  .mob{display:block;position:relative;z-index:20;background:var(--ink)}

  /* ── Başlık çubuğu: logo solda, kutulu hamburger sağda ── */
  .bar{position:fixed;top:0;left:0;right:0;z-index:60;
    background:rgba(6,7,10,.9);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line)}
  .menu{position:fixed;top:0;right:var(--gut);z-index:61;left:auto;bottom:auto;
    height:var(--hdr);display:grid;place-items:center;transform:none}
  .menu__btn{width:40px;height:40px;padding:0;opacity:1;color:var(--text);
    border:1px solid var(--line-2);border-radius:8px;display:grid;place-items:center}
  .menu__ico{display:grid;grid-template-columns:17px;gap:4px;transform:none}
  .menu__ico i{width:17px;height:2px;border-radius:2px;transform-origin:50% 50%;
    transition:transform .3s var(--e),opacity .2s}
  .menu__ico i:nth-child(4){display:none}
  .menu.open .menu__ico{transform:none}
  .menu.open .menu__ico i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu.open .menu__ico i:nth-child(2){opacity:0}
  .menu.open .menu__ico i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .menu__list{
    position:fixed;left:0;right:0;top:var(--hdr);bottom:0;
    display:flex;flex-direction:column;justify-content:center;
    gap:4px;padding:0 var(--gut) 16vh;background:var(--ink);clip-path:none;
    transform:translateY(-100%);visibility:hidden;
    transition:transform .42s var(--e),visibility 0s linear .42s;
  }
  .menu.open .menu__list{transform:translateY(0);visibility:visible;
    transition:transform .42s var(--e),visibility 0s}
  .menu__link{font-size:19px;letter-spacing:.06em;padding:15px 0;
    border-bottom:1px solid var(--line);text-transform:none}

  /* ── Hero — tek görsel ──
     Slider denendi ve kaldırıldı: aynı nesnenin üç soyut karesi kaydırmaya
     değmiyor, ziyaretçiye bir şey anlatmıyordu. Tek kare daha hızlı açılıyor
     ve başlık hemen görünüyor. */
  .mob__hero{padding-top:var(--hdr)}
  .mob__hero img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
    -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}

  /* ── Giriş metni — slider görselinin altında ── */
  .mob__giris{padding:clamp(28px,7vw,40px) var(--gut) clamp(44px,11vw,60px)}
  .mob__giris h1{font-family:var(--ser);font-weight:400;
    font-size:clamp(29px,8.2vw,40px);line-height:1.06;letter-spacing:-.015em;max-width:15ch}
  .mob__giris p{margin-top:14px;color:var(--text-2);font-size:15.5px;
    line-height:1.62;max-width:34ch}
  .mob__cta{margin-top:26px;display:grid;gap:10px}

  /* ── Bölüm ortak — başlıklar ortalanmış ── */
  .mob__bol{padding:clamp(54px,13vw,78px) var(--gut);border-top:1px solid var(--line)}
  .mob__bas{text-align:center;max-width:30ch;margin:0 auto clamp(28px,7vw,40px)}
  .mob__bas .lbl{display:block;color:var(--text-3);font-size:9.5px;letter-spacing:.22em}
  .mob__bas h2{font-family:var(--ser);font-weight:400;font-size:clamp(26px,7.4vw,34px);
    line-height:1.12;letter-spacing:-.01em;margin-top:10px}

  /* ── Hizmet kartları ── */
  .mob .svc{list-style:none;display:grid;gap:12px}
  .mob .svc li{padding:22px 20px;display:grid;gap:8px;
    background:var(--coal);border:1px solid var(--line);border-radius:14px}
  .mob .svc .mono{color:#8ecdf5;font-size:10px;letter-spacing:.18em}
  .mob .svc h3{font-family:var(--ser);font-weight:400;font-size:19px;line-height:1.25}
  .mob .svc p{color:var(--text-2);font-size:14.5px;line-height:1.6}

  /* ── Hizmetler açılır menü (akordiyon) ──
     Masaüstündeki <li><span>01</span><h3>…</h3><p>…</p></li> yapısı AYNEN
     kalır — yayıncı iki kopyayı da aynı kalıpla yazıyor. Açılır davranış
     yalnızca burada CSS + küçük bir JS ile kuruluyor; masaüstü etkilenmez. */
  .mob .svc li{padding:0;cursor:pointer}
  .mob .svc h3{
    display:flex;align-items:center;gap:12px;
    margin:0;padding:18px 52px 18px 20px;position:relative;
  }
  /* Sıra numarası akordiyonda gereksiz; başlık + artı işareti yeterli.
     Öğe kaldırılmıyor, yalnızca gizleniyor — masaüstü kalıbı aynı kalsın. */
  .mob .svc .mono{display:none}
  /* Artı/eksi işareti */
  .mob .svc h3::after{
    content:'';position:absolute;right:20px;top:50%;
    width:13px;height:13px;margin-top:-6px;
    background:
      linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) center/1.5px 13px no-repeat;
    opacity:.75;transition:transform .3s var(--e);
  }
  .mob .svc li.acik h3::after{transform:rotate(45deg)}
  .mob .svc p{
    margin:0;padding:0 20px;max-height:0;overflow:hidden;opacity:0;
    transition:max-height .34s var(--e),opacity .24s,padding .34s var(--e);
  }
  .mob .svc li.acik p{max-height:22em;opacity:1;padding:0 20px 20px}

  /* ── Hakkımızda ── */
  .mob__hak{padding-top:0}
  .mob__hak>img{display:block;height:auto;aspect-ratio:16/10;object-fit:cover;
    margin-left:calc(-1 * var(--gut));width:calc(100% + 2 * var(--gut));max-width:none}
  .mob__hak .mob__bas{margin-top:clamp(34px,8vw,46px)}
  .mob__surec{list-style:none;display:grid;gap:2px;max-width:34ch;margin:0 auto}
  .mob__surec li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
    padding:16px 0;border-top:1px solid var(--line)}
  .mob__surec li:first-child{border-top:0}
  .mob__surec .mono{color:var(--text-3);font-size:10px;letter-spacing:.18em}
  .mob__surec p{font-family:var(--ser);font-size:17.5px;line-height:1.3}

  /* ── Referans kartları ── */
  .mob__seri{list-style:none;display:grid;gap:16px}
  .mob__kart{background:var(--coal);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .mob__kart a{display:block}
  .mob__kart img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
  .mob__kat{display:block;margin:16px 18px 0;color:#8ecdf5;font-size:9.5px;letter-spacing:.18em}
  .mob__kart h3{font-family:var(--ser);font-weight:400;font-size:19px;margin:5px 18px 0}
  .mob__kart p{color:var(--text-2);font-size:14px;line-height:1.55;margin:7px 18px 20px}
  .mob__tumu{display:flex;margin:26px auto 0;width:max-content}

  /* ── Çağrı bandı ── */
  .mob__cagri{padding:clamp(52px,13vw,74px) var(--gut);text-align:center;
    border-top:1px solid var(--line);background:var(--coal)}
  .mob__cagri h2{font-family:var(--ser);font-weight:400;font-size:clamp(26px,7.4vw,34px);
    line-height:1.1;max-width:16ch;margin:0 auto}
  .mob__cagri .btn{margin-top:24px}

  /* ── Footer ── */
  .mob__footer{padding:clamp(44px,11vw,64px) var(--gut) 96px;
    border-top:1px solid var(--line);display:grid;gap:30px;text-align:center}
  .mob__flogo{display:grid;justify-items:center;gap:10px}
  .mob__flogo svg{width:54px;height:auto;fill:none;stroke:var(--text);stroke-width:6;opacity:.9}
  .mob__flogo .mono{font-size:11px;letter-spacing:.24em}
  .mob__fsutun{display:grid;gap:9px}
  .mob__fsutun h3{color:var(--text-3);font-size:9.5px;letter-spacing:.22em;margin-bottom:3px}
  .mob__fsutun a{color:var(--text-2);font-size:15px}
  .mob__fsutun p{color:var(--text-3);font-size:14px;line-height:1.6}
  .mob__fsosyal{display:flex;justify-content:center;gap:22px}
  .mob__fsosyal a{color:var(--text-2);font-size:14px}
  .mob__telif{color:var(--text-3);font-size:9.5px;letter-spacing:.16em;
    padding-top:22px;border-top:1px solid var(--line)}
  .mob__telif i{font-style:normal}

  /* ── Sabit WhatsApp ── */
  .mob__wa{position:fixed;left:16px;bottom:16px;z-index:58;
    width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
    background:#25d366;box-shadow:0 6px 20px rgba(0,0,0,.45)}
  .mob__wa svg{width:28px;height:28px;fill:#0d0e11}

  /* Butonlar telefonda geniş — dokunma hedefi büyür. */
  .mob .btn{justify-content:center;padding:15px 22px}

  /* "Hareketi Azalt" açıkken de aynı düzen; ayrı statik görünüm tutulmuyor. */
  .duragan .stage,.no-js .stage{display:none}
  .duragan .mob,.no-js .mob{display:block}
  /* Politika bağlantıları — mobil alt bilgi */
  .mob__yasal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
                font-size: 11px; opacity: .65; margin: 0 0 8px; }
  .mob__yasal:empty { display: none; }
  .mob__yasal a { color: inherit; text-decoration: none; }
}

/* Alt bilgideki politika bağlantıları (KVKK, gizlilik, çerez).
   İçeriği panel dolduruyor; yayında politika yoksa alan boş kalır ve
   :empty kuralıyla hiç yer kaplamaz. */
.card__yasal { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; }
.card__yasal:empty { display: none; }
.card__yasal a { color: inherit; opacity: .6; text-decoration: none; border-bottom: 1px solid transparent; }
.card__yasal a:hover, .card__yasal a:focus-visible { opacity: 1; border-bottom-color: currentColor; }


/* ── Çerez bandı ─────────────────────────────────────────────────
   Sitenin kendi diliyle: mono, büyük harf, geniş harf aralığı, ince
   kenar ve cam etkisi. Düğmeler .btn ile aynı ölçülerde — ilk hâli
   kaba bir kutuydu, sayfaya yabancı duruyordu.

   İKİ DÜĞME ÖZDEŞ: KVKK rehberi reddetmenin kabul etmek kadar kolay
   olmasını şart koşuyor. Birini vurgulamak rızayı yönlendirmek olur. */
#cerez-band{
  position:fixed;z-index:120;left:18px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  max-width:340px;
  background:rgba(9,11,15,.55);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border:1px solid var(--line-2);border-radius:6px;
  padding:14px 16px;
  font-size:11px;line-height:1.65;color:var(--text-2);
}
#cerez-band p{margin:0 0 12px}
#cerez-band a{color:var(--text);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28)}
#cerez-band a:hover,#cerez-band a:focus-visible{border-bottom-color:currentColor}

.cerez-dugmeler{display:flex;gap:8px}
.cerez-dugmeler button{
  flex:1;cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 8px;border-radius:5px;
  background:transparent;color:var(--text-2);border:1px solid var(--line-2);
  transition:border-color .35s var(--e),color .35s var(--e);
}
.cerez-dugmeler button:hover,.cerez-dugmeler button:focus-visible{
  border-color:rgba(255,255,255,.46);color:#fff;outline:none}

@media (max-width:520px){
  #cerez-band{left:12px;right:12px;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom))}
}