/* KINORA, blok sistemi stilleri
   Ölçüler --title-scale / --text-scale / --cols / --gap / --wrap / --flex-al
   değişkenlerinden gelir; bunları her blok için build üretir. */

.blk{position:relative}
.blk > .wrap{position:relative;z-index:1}
.blk h2{
  font-family:var(--font-display);font-weight:800;
  font-size:calc(clamp(1.9rem,3.6vw,2.9rem) * var(--title-scale,1));
  line-height:1.15;margin:0 0 26px;
}
.blk h3{font-size:calc(1.32rem * var(--title-scale,1))}
.blk p,.blk li{font-size:calc(1rem * var(--text-scale,1))}
.blk p{color:var(--ink-dim)}

/* buton satırı, hizalamayı bloktan alır */
.btnrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:var(--flex-al,flex-start);align-items:center}
.btnrow-center{justify-content:center;margin-top:40px}
.hero-actions,.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:var(--flex-al,flex-start)}

/* otomatik ızgara, sütun sayısı ve boşluk bloktan gelir */
.grid-auto{
  display:grid;gap:var(--gap,22px);
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
}


/* hero */
.blk-hero{min-height:var(--hero-h,100svh)}
.hero-bg{position:absolute;inset:0;z-index:0}
.blk-hero .hero-eyebrow{font-size:calc(15px * var(--text-scale,1))}
.blk-hero h1{font-size:calc(clamp(2.4rem,7.2vw,5.2rem) * var(--title-scale,1))}
.hero-lead{font-size:calc(clamp(1rem,1.35vw,1.22rem) * var(--text-scale,1))}
.al-center-help{margin-inline:auto}
[style*="--flex-al:center"] .hero-lead,[style*="--flex-al:center"] .rt{margin-inline:auto}

/* sayılar */
.stats-grid .stat{padding:0 20px;border-left:1px solid rgba(255,255,255,.10)}
.stats-grid .stat:first-child{border-left:0}
@media (max-width:760px){
  .stats-grid .stat{border-left:0;border-top:1px solid rgba(255,255,255,.10);padding:26px 0 0}
  .stats-grid .stat:first-child{border-top:0;padding-top:0}
}
.stat-num{font-size:calc(clamp(2.8rem,6vw,4.6rem) * var(--title-scale,1))}

/* kartlar */
.service-img{margin:-34px -30px 20px;overflow:hidden;border-radius:6px 6px 0 0}
.service-img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* MOBİL kart kompaktlığı: "Sütun sayısı" mobilde 2-3 yapıldığında kartlar sığsın,
   tekli düzende de daha az yer kaplasın. Padding ve yazı boyutu doğrudan --cols
   değerine göre ölçeklenir (sütun arttıkça küçülür), sadece mobilde, masaüstü
   etkilenmez. .grid-auto öneki, tipografi rol seçicisini özgüllükte yener. */
@media (max-width:760px){
  .grid-auto .service{padding:calc(26px / var(--cols,1)) calc(22px / var(--cols,1))}
  .grid-auto .service .service-img{margin:calc(-26px / var(--cols,1)) calc(-22px / var(--cols,1)) 14px}
  .grid-auto .service h3{font-size:calc(1.28rem / (0.55 + var(--cols,1) * 0.45));margin-bottom:calc(11px / var(--cols,1));line-height:1.22}
  .grid-auto .service p{font-size:calc(1rem / (0.6 + var(--cols,1) * 0.4));line-height:1.6}
  .grid-auto .pf-card .pf-body{padding:calc(17px / var(--cols,1)) calc(18px / var(--cols,1))}
  .grid-auto .pf-card h3{font-size:calc(1.18rem / (0.6 + var(--cols,1) * 0.4));line-height:1.2}
  .grid-auto .pf-card .pf-cat{font-size:calc(11px / (0.7 + var(--cols,1) * 0.3));letter-spacing:.12em}
  .grid-auto .pf-card .pf-client{font-size:calc(12.5px / (0.7 + var(--cols,1) * 0.3))}
  .grid-auto .post-card .post-card-body{padding:calc(20px / var(--cols,1)) calc(18px / var(--cols,1))}
  .grid-auto .post-card h3{font-size:calc(1.15rem / (0.6 + var(--cols,1) * 0.4))}
  /* "Hizmetlerimiz" öne çıkan kart ızgarası (.svc-feat-grid, .grid-auto değil)
     aynı sorunu yaşıyordu: sütun sayısı arttıkça kart genişliği düşüyor ama
     dolgu/yazı boyutu sabit kalıp kartı taşırıyordu. Aynı bölme formülü. */
  .svc-feat-card{
    gap:calc(16px / (0.5 + var(--cols,1) * 0.5) * var(--title-scale,1));
    min-height:calc(180px / (0.5 + var(--cols,1) * 0.5) * var(--title-scale,1));
    padding:calc(28px / (0.5 + var(--cols,1) * 0.5) * var(--title-scale,1))
            calc(24px / (0.5 + var(--cols,1) * 0.5) * var(--title-scale,1))
            calc(22px / (0.5 + var(--cols,1) * 0.5) * var(--title-scale,1));
  }
  .svc-feat-num{font-size:calc(2.5rem / (0.5 + var(--cols,1) * 0.5) * var(--title-scale,1))}
  .blk-services .svc-feat-card h3{font-size:calc(1.34rem / (0.55 + var(--cols,1) * 0.45) * var(--title-scale,1))}
  .svc-feat-card p,.blk-services .svc-feat-card p{font-size:calc(1.04rem / (0.6 + var(--cols,1) * 0.4) * var(--text-scale,1))}
}

/* galeri */
.gallery .gal-cell{position:relative;border-radius:4px;overflow:hidden}
.gallery img{width:100%;height:auto;aspect-ratio:var(--ratio,4/3);object-fit:cover;display:block}
.gallery .ph{aspect-ratio:var(--ratio,4/3)}

/* yer tutucu */
.ph{
  border:1px dashed rgba(255,255,255,.22);border-radius:4px;aspect-ratio:4/3;
  display:grid;place-items:center;color:var(--ink-mute);font-size:14px;
}

/* serbest metin */
.rt{line-height:1.9;font-size:calc(1.05rem * var(--text-scale,1));color:#dcdcdf;max-width:var(--wrap)}
.rt h2{margin:36px 0 14px}
.rt h3{font-family:var(--font-display);font-weight:700;margin:28px 0 12px;color:var(--ink)}
.rt p{margin:0 0 18px}
.rt ul,.rt ol{margin:0 0 18px;padding-left:22px}
.rt a{color:var(--red-soft);text-decoration:underline;text-underline-offset:3px}
.rt img{border-radius:4px;margin:22px 0;max-width:100%}
.rt blockquote{border-left:2px solid var(--red);padding-left:20px;margin:22px 0;color:var(--ink-dim);font-style:italic}

/* logolar */
.blk-logos{overflow:hidden}
.logos-title{font-family:var(--font-display);font-weight:800;font-size:calc(clamp(1.4rem,2.6vw,2rem) * var(--title-scale,1));margin:0 0 44px}

/* çağrı bandı */
.cta-title{font-family:var(--font-display);font-weight:800;font-size:calc(clamp(1.9rem,3.6vw,2.9rem) * var(--title-scale,1));margin:0 0 28px}

/* blog kartı */
.blk-blogList .post-card h3{font-family:var(--font-display);font-weight:700;line-height:1.3;margin:0}

/* animasyon */
@media (prefers-reduced-motion:no-preference){
  .anim{opacity:0;transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
  .anim-fade{transform:none}
  .anim-up{transform:translateY(38px)}
  .anim-left{transform:translateX(-46px)}
  .anim-zoom{transform:scale(.94)}
  .anim.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .anim{opacity:1;transform:none} }

/* ikili kolon mobilde alt alta */
@media (max-width:760px){
  .split{grid-template-columns:1fr !important;gap:32px}
  .split--flip .split-media{order:0}
}

/* teklif formu + yanındaki hikaye/görsel (isim hikayesi tarzı ikili blok) */
.form-split{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.form-split .form-wrap{max-width:none;margin:0}
.form-story{max-width:380px;margin-inline:auto;text-align:center}
.form-story-media{
  aspect-ratio:3/4;overflow:hidden;
  border-radius:50% 50% 6px 6px / 26% 26% 6px 6px;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.form-story-media img{width:100%;height:100%;object-fit:cover;display:block}
.form-story-media .ph{height:100%;border-radius:inherit;aspect-ratio:auto}
.form-story-cap{margin-top:28px;font-style:italic;font-size:.98rem;line-height:1.85;color:var(--ink-dim)}
.form-story-cap p{margin:0}
/* genel tipografi rolü (".rt p", %76 ölçek + 200 kalınlık) bu italik alıntıyı da
   eziyordu, burada iki sınıfla (".form-story .form-story-cap p") daha yüksek
   özgüllükle okunur boyuta sabitliyoruz. */
.form-story .form-story-cap p{font-size:.98rem;font-weight:400;line-height:1.85;text-transform:none;letter-spacing:0}
@media (max-width:860px){
  .form-split{grid-template-columns:1fr;gap:36px}
}

/* ---------- serbest yerleşim (canvas) ---------- */
.cv{position:relative;width:100%;height:var(--cv-h,520px)}
.cv-i{position:absolute;display:flex;flex-direction:column;justify-content:center}
.cv-i > *{margin:0}
.cv-h{font-family:var(--font-display);font-weight:800;line-height:1.12;
  font-size:calc(2.4rem * var(--item-scale,1) * var(--title-scale,1))}
h1.cv-h{font-size:calc(3.4rem * var(--item-scale,1) * var(--title-scale,1))}
h3.cv-h{font-size:calc(1.5rem * var(--item-scale,1) * var(--title-scale,1))}
.cv-t{font-size:calc(1rem * var(--item-scale,1) * var(--text-scale,1));line-height:1.8}
.cv-t p:last-child{margin-bottom:0}
.cv-img{width:100%;height:100%;overflow:hidden}
.cv-img img{width:100%;height:100%;display:block}
.cv-button{align-items:var(--flex-al,flex-start)}
.cv-button .btn{display:inline-block}
.cv-shape{pointer-events:none}

/* mobilde otomatik istifleme */
@media (max-width:760px){
  /* istif modu: öğeler alt alta, yükseklik içeriğe göre */
  .cv-mstack{height:auto !important;display:flex;flex-direction:column;gap:var(--cv-gap,20px)}
  .cv-mstack .cv-i{
    position:relative !important;left:auto !important;top:auto !important;
    width:100% !important;height:auto !important;
  }
  /* görsel öğeleri istifte de boyutlandırılabilir kalsın */
  .cv-mstack .cv-image{height:var(--mh,240px) !important}
  .cv-mstack .cv-img{height:100%}
  .cv-mstack .cv-shape{height:var(--mh,120px) !important}
  /* serbest mod: masaüstündeki gibi mutlak konum */
  .cv-mfree{height:var(--cv-hm)}
}

/* ---------- slider ---------- */
.kn-slider{position:relative;overflow:hidden;border-radius:4px}
.kn-track{display:flex;transition:transform var(--sl-speed,600ms) cubic-bezier(.22,.61,.36,1);will-change:transform}
.kn-slide{flex:0 0 calc(100% / var(--sl-per,1));position:relative;padding-right:var(--gap,14px)}
.kn-slider[data-effect="fade"] .kn-track{display:block;transition:none}
.kn-slider[data-effect="fade"] .kn-slide{
  position:absolute;inset:0;width:100%;padding:0;opacity:0;
  transition:opacity var(--sl-speed,600ms) ease;pointer-events:none;
}
.kn-slider[data-effect="fade"] .kn-slide.on{opacity:1;position:relative;pointer-events:auto}
.kn-slide img,.kn-slide .ph{width:100%;height:auto;aspect-ratio:var(--sl-ratio,16/9);object-fit:cover;display:block;border-radius:4px}
.kn-cap{
  position:absolute;left:0;right:var(--gap,14px);bottom:0;padding:26px 20px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;
  font-size:.95rem;border-radius:0 0 4px 4px;
}
.kn-prev,.kn-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(15,15,18,.62);color:#fff;font-size:20px;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,opacity .2s;backdrop-filter:blur(5px);
}
.kn-prev:hover,.kn-next:hover{background:var(--red);border-color:var(--red)}
.kn-prev[disabled],.kn-next[disabled]{opacity:.25;cursor:default}
.kn-prev{left:14px}
.kn-next{right:calc(14px + var(--gap,14px))}
.kn-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.kn-dots button{
  width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .2s,width .2s;
}
.kn-dots button.on{background:var(--red);width:22px;border-radius:99px}

/* ---------- kayan yazı ---------- */
.kn-mq{overflow:hidden;width:100%}
.kn-mq-track{
  display:flex;width:max-content;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;
  font-size:calc(1.6rem * var(--mq-size,1.8));line-height:1.1;
  animation:knMq var(--mq-speed,26s) linear infinite var(--mq-dir,normal);
}
@keyframes knMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .kn-mq-track{animation:none} }

/* ---------- portfolyo ---------- */
.pf-filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:var(--flex-al,flex-start);margin-bottom:30px}
.pf-filters button{
  background:none;border:1px solid rgba(255,255,255,.16);color:var(--ink-dim);
  border-radius:999px;padding:8px 17px;font-size:13px;cursor:pointer;transition:.2s;
}
.pf-filters button:hover{color:var(--ink);border-color:var(--red)}
.pf-filters button.on{background:var(--red);border-color:var(--red);color:#fff}
.pf-card{display:block;border-radius:5px;overflow:hidden;background:var(--bg-700);
  border:1px solid rgba(255,255,255,.07);transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s}
.pf-card:hover{transform:translateY(-5px);border-color:var(--red)}
.pf-img{overflow:hidden;aspect-ratio:4/3}
.pf-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.pf-card:hover .pf-img img{transform:scale(1.06)}
.pf-body{padding:18px 20px 22px}
.pf-cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red-soft);display:block;margin-bottom:8px}
.pf-card h3{margin:0 0 6px;font-family:var(--font-display);font-weight:700;line-height:1.25}
.pf-client{font-size:12.5px;color:var(--ink-mute)}
.pf-card.hide{display:none}
@supports (grid-template-rows:masonry){ .pf-masonry{grid-template-rows:masonry} }
.pf-masonry .pf-img{aspect-ratio:auto}
.pf-masonry .pf-img img{height:auto}

/* proje sayfası */
.project{padding:calc(var(--nav-h) + 70px) 0 110px}
.project-head{max-width:820px;margin:0 auto 44px;text-align:center}
.project-head h1{font-family:var(--font-display);font-weight:800;margin:12px 0 16px;line-height:1.12}
.project-meta{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin-top:26px}
.project-meta div{text-align:center}
.project-meta dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:5px}
.project-meta dd{margin:0;font-size:.98rem;color:var(--ink)}
.project-cover{max-width:1100px;margin:0 auto 48px;border-radius:5px;overflow:hidden}
.project-cover img{width:100%;display:block}
.project-body{max-width:760px;margin:0 auto 52px;line-height:1.9;color:#dcdcdf}
.project-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;max-width:1100px;margin:0 auto}
.project-gallery img{width:100%;border-radius:4px;cursor:zoom-in}

/* ---------- video ---------- */
.kn-video{position:relative;width:100%;aspect-ratio:var(--v-ratio,16/9);border-radius:5px;overflow:hidden;background:#0d0d0f}
.kn-video iframe,.kn-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.kn-video .ph{height:100%;aspect-ratio:auto}
.kn-vcap{font-size:.9rem;color:var(--ink-mute);margin:12px 0 0;text-align:center}
/* YouTube başlık/kanal şeridini URL parametreleriyle tam kapatamıyoruz,
   videoyu hafifçe büyütüp taşan kısmı kırpıyoruz (yalnızca overlay gizliyken). */
.kn-video iframe.kn-yt-crop,.cv-video iframe.kn-yt-crop{width:130%;height:130%;left:-15%;top:-15%}

/* ---------- SSS ---------- */
.kn-acc{max-width:820px;margin-inline:auto;border-top:1px solid rgba(255,255,255,.09)}
.kn-acc-i{border-bottom:1px solid rgba(255,255,255,.09)}
.kn-acc-i summary{
  cursor:pointer;padding:20px 34px 20px 0;position:relative;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:1.08rem;transition:color .2s;
}
.kn-acc-i summary::-webkit-details-marker{display:none}
.kn-acc-i summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:300;color:var(--red-soft);transition:transform .25s;
}
.kn-acc-i[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.kn-acc-i summary:hover{color:var(--red-soft)}
.kn-acc-b{padding:0 34px 22px 0;color:var(--ink-dim);line-height:1.85}

/* ---------- gömme ---------- */
.kn-embed{width:100%}
.kn-embed iframe{max-width:100%;border:0}

/* ---------- canvas: kod alanı ---------- */
.cv-embed{width:100%;height:100%;overflow:hidden}
.cv-embed-auto{height:auto;min-height:40px}
.cv-embed-scroll{overflow:auto;-webkit-overflow-scrolling:touch}
.cv-embed > iframe,.cv-embed > video,.cv-embed > canvas{width:100%;height:100%;border:0;display:block}
.cv-embed iframe{max-width:100%}
.cv-embed .ph{aspect-ratio:auto}
.cv-i.cv-embed-item{overflow:visible}

/* ---------- başlık kelime döngüsü ---------- */
.kn-cycle{min-height:1.05em}
.kn-cycle.kn-cycling{opacity:.92}
.kn-cycle.kn-fadeout{opacity:0;transition:opacity .3s ease}
.kn-cycle.kn-reveal{animation:knReveal .5s forwards ease-out}
@keyframes knReveal{
  0%{opacity:0;transform:scale(.9);filter:blur(10px);letter-spacing:0}
  50%{opacity:.5;filter:blur(2px)}
  100%{opacity:1;transform:scale(1.1);filter:blur(0);letter-spacing:.04em}
}
.kn-cycle.kn-glow{text-shadow:0 0 25px rgba(230,57,70,.7)}
@media (max-width:768px){
  @keyframes knReveal{
    0%{opacity:0;transform:scale(.9);filter:blur(10px);letter-spacing:0}
    50%{opacity:.5;filter:blur(2px)}
    100%{opacity:1;transform:scale(1.05);filter:blur(0);letter-spacing:.02em}
  }
}
@media (prefers-reduced-motion:reduce){
  .kn-cycle.kn-reveal{animation:none}
  .kn-cycle.kn-fadeout{transition:none}
}
.consent-check span{font-size:12.5px;line-height:1.55;border-radius:6px;padding:9px 14px;text-align:left}
.form-note.ok{color:var(--green)}

/* canvas: video ve görsel kırpma */
.cv-video{width:100%;height:100%;overflow:hidden;position:relative;background:#0d0d0f;border-radius:inherit}
.cv-video iframe,.cv-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.cv-video .ph{height:100%;aspect-ratio:auto}
/* Editörde video/iframe fareyi kendine çekip kutuyu sürüklemeyi engellemesin,
   tıklamalar kutunun altına, taşıma/seçim mantığına geçsin. Yayında normal çalışır. */
.kn-editor .cv-video iframe,.kn-editor .cv-video video{pointer-events:none}
.cv-img{position:relative}
.cv-img img{transform-origin:center}