/* Nefes Ajans · web görünümü (Claude, 16 Ekim 2026) — /onizleme-web/ önizlemesinden canlıya alındı.
   Mobil sitenin aynısı: aynı metin, aynı sıra, aynı ct.js. Telefon çerçevesi yok;
   900px üstünde içerik 1240px'lik bir sütuna oturur, kısa bölümler iki sütuna açılır.
   Yalnız düzen kuralları; hareketler ve davranışlar ct.js'ten aynen gelir. */


/* ---------- açılış (her genişlikte): GIF yerine sitenin kendi çizimi, çerçevesiz ---------- */
.acilis.ac-yeni{display:block;background:radial-gradient(70% 60% at 50% 46%,#0a1a1d 0%,#050c0e 55%,#040608 100%);overflow:hidden}
.ac-kalem{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 7px rgba(65,236,227,.55))}
.ac-orta{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.ac-logo{position:relative;width:min(78vw,560px);aspect-ratio:760/290}
.ac-logo img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.ac-taban{opacity:var(--taban,0)}

.ac-ajans{margin:clamp(20px,3.4vw,36px) 0 0;padding-left:.62em;font:500 clamp(22px,4.6vw,40px)/1 'Montserrat',sans-serif;letter-spacing:.62em;color:#eef7f5;opacity:var(--yazi,0);transform:translateY(calc((1 - var(--yazi,0)) * 10px))}
.ac-slogan{margin:clamp(22px,4vw,44px) 0 0;padding-left:.34em;font:600 clamp(11px,1.9vw,16px)/1 'Montserrat',sans-serif;letter-spacing:.34em;color:#6f9c99;opacity:calc(var(--yazi,0) * .95);transform:translateY(calc((1 - var(--yazi,0)) * 10px))}
.ac-slogan img.nf{height:1.25em!important;vertical-align:-.28em;margin-left:.1em}
.ac-isik{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(circle,rgba(220,255,252,.95),rgba(101,236,227,.35) 40%,transparent 70%);opacity:0;pointer-events:none;transition:opacity .2s}

/* işler bölümü: ct.js'in çizgileri ve f tuvali yerine nefes kalemi (web.js) */
.ara-f.kalemli #afF,.ara-f.kalemli .af-cizgi,.ara-f.kalemli .af-isik{display:none!important}
.ara-f.kalemli .af-logo{z-index:2}
.af-kalem{position:absolute;left:0;top:-260px;width:100%;height:calc(100% + 520px);pointer-events:none;z-index:1;filter:drop-shadow(0 0 6px rgba(65,236,227,.6))}
.af-kalem-isik{position:absolute;left:0;top:0;z-index:3;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:radial-gradient(circle,rgba(205,255,250,.95),rgba(101,236,227,.35) 40%,transparent 70%);opacity:0;pointer-events:none;transition:opacity .25s}

/* "nefes Ajans yönetir" telefonun içinde taşıyordu: telefonun hemen altına alındı (her genişlikte; kurucu, 16 Ekim) */
.kz-tel .kz-ok{position:absolute;left:50%;top:calc(100% + 16px);margin:0;transform:translate(-50%,8px)}
.tamam .kz-tel .kz-ok{transform:translate(-50%,0)}
/* beyazdan griye geçişli düğme; içinde nefes'in orijinal hâli: koyu harf + turkuaz f (kurucu, 16 Ekim) */
.kz-tel .kz-ok{padding:10px 16px;background:linear-gradient(180deg,#ffffff 0%,#eef2f1 48%,#cdd6d4 100%);color:#0b2226;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.35),0 10px 26px rgba(0,0,0,.4)}
.kz-tel .kz-ok svg{stroke:#10a8a4}
.kz-yapis .kz-sahne{height:min(410px,calc(100svh - var(--ust) - 290px));min-height:336px}
.kz-yapis .kz-alt{margin-top:64px}
@media (prefers-reduced-motion:reduce){.kz-tel .kz-ok{transform:translate(-50%,0)!important}}

@media (min-width:900px){
  html.web{--kenar:max(48px,calc((100vw - 1240px) / 2));--ust:72px;--sol-sutun:minmax(0,5fr);--sag-sutun:minmax(0,7fr);--aralik:clamp(48px,6vw,96px)}
  html.web body{font-size:17px}

  /* üst çubuk */
  html.web .ust{padding:0 var(--kenar)}
  html.web .ust-logo img{width:100px}
  html.web .ust-panel{min-height:44px;padding:0 20px;font-size:14.5px}
  html.web .ust-menu{margin-right:-10px}

  /* başlıklar */
  html.web h2{font-size:clamp(40px,3.7vw,58px);line-height:1.02}
  html.web .bolum-giris{font-size:18px;max-width:40ch;margin-top:18px}

  /* ---------- giriş: başlık solda, Reels sağda kendi oranında ---------- */
  html.web .giris{--tel-y:calc(100vh - var(--ust) - 24px);--tel-g:calc(var(--tel-y) * 9 / 16);
    min-height:max(100vh,640px);justify-content:center;padding:var(--ust) calc(var(--kenar) + var(--tel-g) * .86 + var(--aralik)) 0 var(--kenar);
    background:radial-gradient(60% 70% at 78% 52%,rgba(101,236,227,.10),rgba(101,236,227,0) 70%),var(--gece)}
  /* Reels: çerçevesiz, yuvarlak; kenarları bulut gibi arka plana erir (kurucu, 16 Ekim) */
  html.web .giris-medya{inset:auto;top:calc(var(--ust) + 4px);right:calc(var(--kenar) - var(--tel-g) * .08);width:var(--tel-g);height:var(--tel-y);border-radius:0;overflow:hidden;background:none;box-shadow:none;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 38%,rgba(0,0,0,.86) 52%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.16) 88%,rgba(0,0,0,0) 100%);
    mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 38%,rgba(0,0,0,.86) 52%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.16) 88%,rgba(0,0,0,0) 100%)}
  html.web .giris-medya img,html.web .giris-medya video{top:0;height:100%;object-position:center;transform:scale(1.3);transform-origin:50% 82%}
  html.web .giris-medya::after{background:none}
  html.web .giris h1{font-size:clamp(64px,6.6vw,108px);line-height:.94}
  html.web .giris-kunye{left:auto;right:calc(var(--kenar) + var(--tel-g) * .12);width:calc(var(--tel-g) * .68);bottom:34px;font-size:13.5px}

  /* rakam şeridi */
  html.web .kanit{padding:34px 0 30px}
  html.web .kanit p{font-size:16px}
  html.web .kanit p b{font-size:26px}

  /* ---------- hizmetler: yazı solda, ağ sağda ---------- */
  html.web .aile{display:grid;grid-template-columns:var(--sol-sutun) var(--sag-sutun);grid-template-rows:auto 1fr;column-gap:var(--aralik);align-items:start;padding-top:96px;padding-bottom:88px}
  html.web .aile>h2{grid-column:1;grid-row:1}
  html.web .aile>.bolum-giris{grid-column:1;grid-row:2}
  html.web .aile>.ag{grid-column:2;grid-row:1 / span 2;margin-top:0;grid-template-columns:168px 1fr;column-gap:56px}
  html.web .ag-merkez{width:168px;height:72px;border-radius:26px}
  html.web .ag-merkez img{width:206px;top:-130px}
  html.web .ag-liste li{padding-left:22px}
  html.web .ag-liste b{font-size:32px}
  html.web .ag-liste small{font-size:16px;margin-top:8px}

  /* ---------- nasıl çalışıyoruz ---------- */
  html.web .ara-baslik{padding-top:24px}
  html.web .ara-baslik h2{font-size:clamp(64px,6.4vw,104px)}
  html.web .ara-baslik svg{width:48px;height:48px;margin-bottom:14px}

  /* dişliler: yazı solda, sahne sağda */
  html.web .ds-yapis{display:grid;grid-template-columns:var(--sol-sutun) var(--sag-sutun);column-gap:var(--aralik);padding:0 var(--kenar)}
  html.web .ds-alan{grid-column:2;grid-row:1;height:100%}
  html.web .ds-yazi{grid-column:1;grid-row:1;align-self:center;padding:0}
  html.web .ds-cubuk{width:160px;margin-bottom:22px}
  html.web .ds-yazi h3{font-size:clamp(34px,3.2vw,48px)}
  html.web .ds-yazi p{font-size:18px;margin-top:14px}
  html.web .ds-cip{margin-top:18px}
  html.web .ds-cip span{font-size:14px;padding:9px 14px}

  /* tek ajans: sahne zaten tam genişlik; yazı biraz büyür */
  html.web .kz-yapis h2{font-size:clamp(36px,3.2vw,50px)}
  html.web .kz-yapis .bolum-giris{font-size:17px}
  html.web .kz-yapis .kz-sahne{height:min(500px,calc(100vh - var(--ust) - 320px));width:min(100%,1000px);margin-left:auto;margin-right:auto}
  html.web .kz-yapis .kz-alt{font-size:26px}

  /* ---------- işler: başlık ve marka solda, karşılaştırma sağda ---------- */
  html.web .donusum{display:grid;grid-template-columns:var(--sol-sutun) var(--sag-sutun);column-gap:var(--aralik);align-items:center;padding-top:110px}
  html.web .donusum>.ara-f{grid-column:1 / -1;height:250px}
  html.web .af-logo{width:330px}
  /* f, çizgiyle aynı ışığı taşısın: birleşme yerinde parlaklık kopmasın */
  html.web .af-logo canvas{filter:drop-shadow(0 0 5px rgba(65,236,227,.55))}
  html.web .donusum>h2{grid-column:1;grid-row:2;align-self:end;font-size:clamp(48px,4.6vw,72px)}
  html.web .donusum>.ka{grid-column:2;grid-row:2 / span 2;justify-self:center;margin-top:0;width:calc(min(76vh,760px) * 9 / 16)}
  html.web .donusum>.ka-alt{grid-column:1;grid-row:3;align-self:start;margin:22px 0 0;width:auto}
  html.web .ka-marka{font-size:18px}
  html.web .ka-marka small{font-size:15px}
  html.web .donusum>.deste-sar,html.web .donusum>.deste{grid-column:1 / -1}
  html.web .deste{height:280px;padding-top:30px}
  html.web .deste button{width:128px;margin:0 -12px}
  html.web .donusum>.ig-takip{grid-column:1 / -1;margin:32px 0 0}
  html.web .ig-takip .ia-dugme{width:auto;padding:0 40px}

  /* ---------- plan: yazı solda, saat sağda ---------- */
  html.web .plan{display:grid;grid-template-columns:var(--sol-sutun) var(--sag-sutun);grid-template-rows:auto 1fr;column-gap:var(--aralik);align-items:start}
  html.web .plan>h2{grid-column:1;grid-row:1}
  html.web .plan>.bolum-giris{grid-column:1;grid-row:2}
  html.web .plan>.gk{grid-column:2;grid-row:1 / span 2;margin-top:0;gap:26px}
  html.web .gk-kadran,html.web.masa .gk-kadran{width:340px}

  /* ---------- analiz ---------- */
  html.web #nefes-analiz>h2{font-size:clamp(44px,4.2vw,66px)}

  /* ---------- kim ne yapıyor ---------- */
  html.web .nasil>h2{font-size:clamp(48px,4.6vw,72px)}
  html.web .ai{margin-top:36px;padding:40px 44px;border-radius:30px}
  html.web .ai-bas{font-size:26px}
  html.web .ai-giris{font-size:18px;max-width:52ch}
  html.web .ai-tablo{margin-top:26px}
  html.web .ai-tablo div{grid-template-columns:200px 1fr;gap:24px;padding:18px 0;font-size:17px}
  html.web .tek-cta{margin-top:36px}
  html.web .tek-cta .dugme-ana{width:auto;min-height:60px;padding:0 44px;font-size:17px}

  /* ---------- alt ---------- */
  html.web .alt{padding:64px var(--kenar) 72px}
  html.web .alt .alt-link a{font-size:14.5px}
  html.web .alt-logo{width:180px}

  /* sabit "ÜCRETSİZ dene" çağrısı geniş ekranda yok: sayfanın altında aynı düğme var (kurucu, 16 Ekim) */
  html.web .alt-cta{display:none!important}

  /* ---------- katmanlar: tam ekran kalır, içerik ortada okunur genişlikte ---------- */
  html.web .ss-ic{max-width:1120px;margin:0 auto;padding-left:48px;padding-right:48px}
  html.web .sektor-sec h2{font-size:56px}
  html.web .ss-kartlar{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:32px}
  html.web .ss-kart b{font-size:22px}
  html.web .ss-kart small{font-size:14px}
  html.web .ss-kart:hover img{transform:scale(1.04)}

  html.web .katman.menu{left:auto;width:min(520px,100vw);padding-left:44px;padding-right:44px;box-shadow:-40px 0 120px rgba(0,0,0,.6)}
  html.web .menu-liste a:hover b{color:var(--tq)}

  html.web .tum{padding-left:var(--kenar);padding-right:var(--kenar)}
  html.web .tum-izgara{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}

  html.web .iz-bilgi{padding-left:var(--kenar);padding-right:var(--kenar)}
  html.web .iz-ust{padding-left:var(--kenar);padding-right:var(--kenar)}

  html.web .dene .dn-ust{padding-left:var(--kenar);padding-right:var(--kenar)}
  html.web .dn-govde{width:100%;max-width:620px;margin:0 auto;padding-left:24px;padding-right:24px}
  html.web .dn-adim h2{font-size:42px}
  html.web .dn-adim-sonuc{margin:0 -24px}

  html.web .ia-adim{width:100%;max-width:720px;margin:0 auto}
  html.web .ia-karsila h2{font-size:clamp(56px,5.4vw,84px)}
  html.web .ia-paket{max-width:none}
  html.web .ia-pk-ray{justify-content:safe center}
  html.web .ia-pk{flex-basis:340px}

  html.web .rp-kutu{width:min(100%,400px)}

  /* dil seçimi ve panel girişi: kenar boşluğu sabit (geniş ekranda düğmeler sıkışmasın) */
  html.web .dl-ic{max-width:380px;padding:0 24px}
  html.web .dl-ic img{width:170px}

  /* yatay desteler fareyle: tut-sürükle imleci ve ok düğmeleri (web.js) */
  html.web .deste,html.web .an-serit{cursor:grab}
  html.web .web-surukle{cursor:grabbing;scroll-snap-type:none!important;user-select:none}
  html.web .web-surukle *{pointer-events:none}
  html.web .deste-sar{position:relative}
  html.web .web-ok{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(5,14,17,.72);box-shadow:inset 0 0 0 1px var(--cizgi2);transition:background .2s,box-shadow .2s}
  html.web .web-ok svg{width:20px;height:20px;fill:none;stroke:var(--kopuk);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  html.web .web-ok:hover{background:var(--tq);box-shadow:none}
  html.web .web-ok:hover svg{stroke:#032222}
  html.web .deste-sar .web-ok{position:absolute;top:118px;z-index:5;width:52px;height:52px}
  html.web .deste-sar .web-ok.sol{left:max(0px,calc(50% - 360px))}
  html.web .deste-sar .web-ok.sag{right:max(0px,calc(50% - 360px))}
  html.web .an-bas{align-items:center}
  html.web .an-bas small{margin-left:auto;margin-right:12px}
  html.web .web-oklar{display:flex;gap:8px}
}

/* Mobile performance: pause invisible section animations, reduce fullscreen GPU filters. */
@media (max-width:767px) {
  main > .nf-perf-off *,main > .nf-perf-off *::before,main > .nf-perf-off *::after {
    animation-play-state:paused!important;
  }
  .ac-kalem,.af-kalem,.gk-dolu {filter:none!important}
  .an-serit button {will-change:auto}
  .ia-pk-asili .ic {-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,14,17,.97)}
}


/* NEFES motion sonrası söz, 2026-10-16. Handwritten typography, readable on mobile. */
@font-face{
  font-family:"NefesYalom";
  src:url("/assets/fonts/nefes-caveat-600.woff2?v=1") format("woff2");
  font-style:normal;font-weight:600;font-display:swap;
}
.acilis.ac-yeni .ac-quote{
  position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;
  padding:calc(48px + env(safe-area-inset-top,0px)) 24px calc(32px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(ellipse 66% 56% at 50% 46%,#0b2226 0%,#081719 45%,#04090b 100%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s ease,visibility 0s linear .34s;
}
.acilis.ac-yeni .ac-quote.ac-quote-show{
  opacity:1;visibility:visible;pointer-events:auto;transition:opacity .34s ease;
}
.ac-quote-center{width:min(100%,980px);margin:auto;text-align:center;transform:translateY(-2svh)}
.ac-quote-line{
  margin:0 auto;min-height:2.05em;color:#eff9f6;
  font:600 clamp(39px,6.8vw,80px)/1.1 "NefesYalom","Segoe Print",cursive;
  letter-spacing:0;text-wrap:balance;
  -webkit-font-smoothing:antialiased;
}
.ac-quote-rule{display:block;width:0;height:1px;margin:12px auto 9px;background:rgba(101,236,227,.73);transition:width .4s ease}
.ac-quote-name-on .ac-quote-rule{width:52px}
.ac-quote-by{
  margin:0 auto;min-height:1.28em;color:#b0d7d2;
  font:600 clamp(27px,3.2vw,42px)/1.1 "NefesYalom","Segoe Print",cursive;
  letter-spacing:.01em;
}
.ac-quote-skip{
  position:absolute;right:clamp(22px,4vw,56px);top:calc(20px + env(safe-area-inset-top,0px));
  padding:10px 7px;min-width:49px;min-height:40px;color:rgba(233,247,244,.8);
  font:600 12px/1 "Manrope",system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap;
}
.ac-quote-skip span{color:#65ece3;margin-left:4px;font-size:15px}
.ac-quote-skip:focus-visible{outline:2px solid #65ece3;outline-offset:3px}
@media(max-width:599px){
  .acilis.ac-yeni .ac-quote{padding-left:16px;padding-right:16px}
  .ac-quote-center{width:min(100%,480px);transform:translateY(-3svh)}
  .ac-quote-line{font-size:clamp(40px,10.7vw,55px);line-height:1.08;min-height:2.56em}
  .ac-quote-by{font-size:clamp(27px,7vw,35px)}
  .ac-quote-rule{margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
  .ac-quote-rule{transition:none}
}