/* izowhite teması: base.css + site.css üzerine kurumun görünümü. Renkler logodan: lacivert #1E124B (yazı, koyu zeminler)
   ve turuncu #EE7C00 (vurgu, düğmeler). Logodaki çatı üçgeni çapraz turuncu kesimlerde tekrarlanır. Başlık Barlow Condensed
   (dar, güçlü), metin Inter. Köşeler keskin (endüstriyel), düğmeler eğik kesimli. */
:root{
  --orange:#ee7c00; --orange-2:#f7972c; --orange-d:#c96600;
  --teal:#ee7c00; --teal-2:#f7972c;
  --ink:#1e124b; --ink-2:#261a5c; --ink-3:#33276f; --deep:#140c36; --water:#3ea8e5;
  --paper:#f4f3f8; --muted:#5c586c; --line:#e2e0ea;
  --radius:4px; --wrap:1280px;
  --font-h:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --cut:14px;
}
body{color:#1d1d1d}
h1,h2,h3,h4{letter-spacing:0;font-weight:700}
::selection{background:var(--orange);color:var(--ink)}

/* Üst etiket: turuncu üçgen + koyu yazı (açık zeminde turuncu yazı zayıf) */
.eyebrow{font-size:14px;letter-spacing:.2em;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:0;height:0;border-left:12px solid var(--orange);border-top:7px solid transparent;border-bottom:7px solid transparent}
.hero .eyebrow,.stats-band .eyebrow,.b-cta .eyebrow,.page-hero .eyebrow,.site-footer .eyebrow{color:var(--orange-2)}

/* Düğmeler: eğik kesim */
.btn{border-radius:0;font-size:15px;letter-spacing:.1em;text-transform:uppercase;padding:15px 30px;clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
.btn-sm{padding:11px 22px;font-size:13px;--cut:10px}
.btn-primary,.btn-primary:hover{color:var(--ink)}
.btn-primary:hover{background:var(--orange-2)}
.btn-ghost{border:0;box-shadow:inset 0 0 0 2px currentColor;clip-path:none}
.btn-ghost.on-light,.section .btn-ghost{color:var(--ink)}
.btn-ghost.on-light:hover,.section .btn-ghost:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--orange)}
.btn svg,.sec-more svg{width:18px;height:18px;flex:none}
.btn-link{color:var(--ink);clip-path:none;padding:0;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:6px;text-decoration-thickness:2px}

/* Görsel yer tutucu (görsel yokken): grafit + ince ızgara */
.ph{background:linear-gradient(135deg,var(--ink-3),var(--deep));color:#ddd}
.ph::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px}
.ph.old{background:linear-gradient(135deg,var(--ink-3),var(--deep))}

/* ---------- Üst kısım ---------- */
.topbar{background:var(--deep);color:#b8b3cc}
.topbar a:hover{color:var(--orange-2)}
.topbar .social a:hover{background:none;color:var(--orange-2)}
.lang-current{border-radius:0}
.lang-current:hover,.lang-menu.open .lang-current{border-color:var(--orange);color:var(--orange-d)}
.lang-list{border-radius:0;border-top:3px solid var(--orange)}
.lang-list a{border-radius:0}
.lang-list a.on::after{color:var(--orange)}
/* 981–1100 px: menü + Katalog + dil + arama tek satıra sığsın (yazılar kırılmasın) */
@media (min-width:981px) and (max-width:1100px){nav.main > ul > li > a{padding-left:10px;padding-right:10px}nav.main > ul > li > a::after{left:10px;right:10px}}
.lang a{border-radius:0}
.lang a.on{background:var(--orange);color:var(--ink)}
header.site{background:rgba(255,255,255,.96);border-bottom:0;box-shadow:0 1px 0 var(--line)}
header.site::after{content:"";position:absolute;left:0;bottom:-3px;height:3px;width:min(34vw,420px);background:var(--orange);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
header.site .wrap{height:86px}
.logo img{height:46px}
nav.main ul{gap:2px}
nav.main a{font-size:17px;font-weight:600;letter-spacing:.06em;border-radius:0;padding:10px 14px;position:relative}
nav.main > ul > li > a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav.main > ul > li > a:hover::after,nav.main > ul > li > a.on::after{transform:scaleX(1)}
nav.main > ul > li > a:hover,nav.main a.on{color:var(--ink)}
nav.main .sub{border-radius:0;border:0;border-bottom:3px solid var(--orange);padding:6px 0;min-width:260px;box-shadow:0 24px 50px rgba(0,0,0,.14)}
nav.main .sub a{font:500 15px var(--font-b);letter-spacing:0;padding:11px 20px;border-radius:0}
nav.main .sub a:hover,nav.main .sub a.on{background:var(--paper);color:var(--orange-d)}
.search{border-radius:0;border-color:var(--line)}
.search:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.burger{border-radius:0}
@media (max-width:980px){
  nav.main{top:86px;box-shadow:0 20px 40px rgba(0,0,0,.12)}
  nav.main > ul > li > a::after{display:none}
  nav.main .sub{border-bottom:0;box-shadow:none}
  .logo img{height:38px}
}

/* ---------- Giriş (slider) ---------- */
.hero{background:var(--deep)}
.slide::after{background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.62) 45%,rgba(10,10,10,.12) 100%),rgba(var(--shade-rgb,0,0,0),var(--overlay,0))}
/* Logo üçgenleri: sağ altta iki turuncu kesim, solda ince çizgi */
.hero::before,.hero::after{content:"";position:absolute;z-index:3;pointer-events:none}
.hero::before{right:0;bottom:0;width:min(38vw,560px);height:min(30vh,240px);background:var(--orange);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.92}
.hero::after{right:min(10vw,140px);bottom:0;width:min(22vw,320px);height:min(18vh,150px);background:var(--deep);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.55}
.slide .content{padding-bottom:40px}
.slide .kicker span{text-transform:uppercase;font-size:15px;letter-spacing:.32em;color:var(--orange-2)}
.slide .kicker i{width:46px;height:3px}
.slide h1,.slide h2{font-size:clamp(46px,7vw,100px);font-weight:700;line-height:.98;text-transform:uppercase;max-width:980px}
.slide p{color:#e4ded6;max-width:600px}
.slide .ph img.cover{transform:scale(1.06);transition:transform 7s ease-out}
.slide.on .ph img.cover{transform:scale(1)}
.hero-nav{z-index:6}
.hero-nav button{font:600 15px var(--font-h);letter-spacing:.12em;color:#bdb6ad}
.hero-nav button::before,.hero-nav button::after{border-radius:0}
.hero-nav button span{text-transform:uppercase}
@media (max-width:700px){.hero::before{width:50vw;height:70px}.hero::after{display:none}}

/* ---------- Bölüm başlığı ---------- */
.sec-head{align-items:end;gap:40px}
.sec-head h2{font-size:clamp(36px,4.4vw,60px);line-height:1;text-transform:uppercase}
.sec-head > p{max-width:460px;color:var(--muted);font-size:17px}
.sec-more{margin-top:40px;text-align:center}

/* ---------- Tanıtım ---------- */
.intro{position:relative;overflow:hidden}
.intro::before{content:"";position:absolute;right:-40px;top:0;width:220px;height:220px;background:var(--paper);clip-path:polygon(100% 0,100% 100%,0 0)}
.intro .block-heading h2,.intro h2{font-size:clamp(38px,4.6vw,64px);line-height:1;text-transform:uppercase}
.intro .rich p:first-child{font-family:var(--font-b);font-size:21px;font-weight:600;color:var(--ink)}
.intro-media img{border-radius:0}

/* ---------- Genel bölümler ---------- */
.block-heading h2{font-size:clamp(32px,3.8vw,52px);line-height:1.02;text-transform:uppercase}
.block-heading h3{font-size:clamp(24px,2.6vw,34px)}
.block-heading.align-center .eyebrow{justify-content:center}

/* ---------- Kategori kartları (iş bölümleri): bento ızgara ---------- */
.cat-cards{padding:110px 0;background:var(--paper);position:relative}
.cat-cards::before{content:"";position:absolute;left:0;top:0;width:180px;height:180px;background:var(--orange);clip-path:polygon(0 0,100% 0,0 100%)}
.cat-cards .wrap{position:relative}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:260px;gap:14px}
/* Sayıya göre ilk kart(lar) büyür; ızgara boşluksuz kapanır */
.cat-grid:is(.n-3,.n-7,.n-11) .cat-card:first-child{grid-column:span 2}
.cat-grid:is(.n-6,.n-10) .cat-card:nth-child(-n+2){grid-column:span 2}
.cat-grid:is(.n-5,.n-9) .cat-card:first-child{grid-column:span 2;grid-row:span 2}
.cat-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;background:var(--ink);isolation:isolate}
.cat-card .ph{position:absolute;inset:0;z-index:-2}
.cat-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.85)}
.cat-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,12,12,.15) 0%,rgba(12,12,12,.5) 45%,rgba(12,12,12,.92) 100%);transition:background .4s}
.cat-card::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;border-right:0 solid var(--orange);border-top:0 solid transparent;transition:border-width .45s cubic-bezier(.2,.7,.2,1);z-index:-1}
.cat-card .ic{position:absolute;left:24px;top:24px;width:56px;height:56px;display:grid;place-items:center;background:var(--orange);color:var(--ink);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);transition:background .3s,color .3s}
.cat-card .ic svg{width:30px;height:30px}
.cat-card .tx{display:flex;flex-direction:column;gap:4px;padding-right:56px}
.cat-card strong{font:700 clamp(22px,1.9vw,28px)/1.05 var(--font-h);text-transform:uppercase;letter-spacing:.02em}
.cat-card small{font:600 13px var(--font-h);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-2)}
.cat-card .go{position:absolute;right:20px;bottom:22px;width:44px;height:44px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.5);color:#fff;transition:.35s}
.cat-card .go svg{width:20px;height:20px}
.cat-card:hover .ph img{transform:scale(1.08);filter:saturate(1)}
.cat-card:hover::before{background:linear-gradient(180deg,rgba(12,12,12,.05) 0%,rgba(12,12,12,.45) 50%,rgba(12,12,12,.94) 100%)}
.cat-card:hover::after{border-right-width:120px;border-top-width:120px}
.cat-card:hover .go{background:var(--deep);border-color:var(--ink);color:var(--orange)}
.cat-card:hover .ic{background:#fff}
.cat-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat-grid .cat-card:is(:first-child,:nth-child(2)){grid-column:auto;grid-row:auto}
  .cat-grid:is(.n-5,.n-8,.n-11) .cat-card:first-child{grid-column:span 2}
}
@media (max-width:760px){
  .cat-cards{padding:70px 0}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px;gap:10px}
  .cat-card strong{font-size:20px}
  .cat-card small{font-size:12px;letter-spacing:.1em}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
  .cat-grid .cat-card:first-child{grid-column:span 2}
  .cat-grid:is(.n-5,.n-8,.n-11) .cat-card:first-child{grid-column:span 2}
  .cat-card{padding:16px}
  .cat-card .ic{left:16px;top:16px;width:44px;height:44px}
  .cat-card .ic svg{width:24px;height:24px}
  .cat-card .tx{padding-right:0}
  .cat-card .go{display:none}
}
@media (max-width:420px){.cat-grid{grid-template-columns:1fr}.cat-grid .cat-card:first-child{grid-column:auto}}

/* ---------- Sayaçlar: koyu bant ---------- */
.stats-band{position:relative;overflow:hidden;background:var(--deep);color:#fff;padding:90px 0}
.stats-band::before{content:"";position:absolute;left:-60px;top:0;bottom:0;width:38%;background:var(--orange);clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
.stats-band::after{content:"";position:absolute;left:calc(38% - 120px);top:0;bottom:0;width:220px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04));clip-path:polygon(55% 0,100% 0,45% 100%,0 100%)}
.stats-band .wrap{position:relative;z-index:1}
.stats-band .b-stats{gap:0}
.stats-band .b-stat{background:none;border-radius:0;padding:10px 30px;text-align:left;border-left:1px solid rgba(255,255,255,.18)}
.stats-band .b-stat:first-child{border-left:0}
.stats-band .b-stat-val{font:700 clamp(56px,6.4vw,96px)/.95 var(--font-h);color:#fff}
.stats-band .b-stat:first-child .b-stat-val,.stats-band .b-stat:first-child .b-stat-fix{color:var(--ink)}
.stats-band .b-stat:first-child .b-stat-lbl{color:#2a1a07}
.stats-band .b-stat-fix{color:var(--orange-2)}
.stats-band .b-stat-lbl{font:600 15px var(--font-h);letter-spacing:.16em;color:#bdb6ad;margin-top:14px}
@media (max-width:800px) and (min-width:601px){
  .stats-band::before{width:38%;left:-40px}
  .stats-band .b-stats{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
  .stats-band .b-stat{padding:10px 18px}
}
@media (max-width:600px){
  .stats-band{padding:60px 0}
  .stats-band::before{width:90px;height:90px;left:0;clip-path:polygon(0 0,100% 0,0 100%)}
  .stats-band::after{display:none}
  .stats-band .b-stat:first-child .b-stat-val{color:#fff}
  .stats-band .b-stat:first-child .b-stat-fix{color:var(--orange-2)}
  .stats-band .b-stat:first-child .b-stat-lbl{color:#bdb6ad}
  .stats-band .b-stats{grid-template-columns:1fr 1fr;row-gap:30px}
  .stats-band .b-stat{border-left:0;padding:10px 6px}
  .stats-band .b-stat:first-child{grid-column:1 / -1}
}
.b-stat{border-radius:0}
.b-stat-fix{color:var(--orange-d)}

/* ---------- Projeler ---------- */
.project-showcase .project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.project-showcase .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.project-showcase .project-grid{grid-template-columns:1fr}}
.project-grid{gap:26px}
.project-card{border-radius:0;border:0;background:#fff;box-shadow:0 1px 0 var(--line);position:relative}
.project-card::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--orange);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.project-card:hover{box-shadow:0 24px 50px rgba(0,0,0,.12);transform:translateY(-6px)}
.project-card:hover::after{width:100%}
.project-card .ph{aspect-ratio:3/2;background:var(--ink)}
.project-status{border-radius:0;left:0;top:18px;padding:7px 16px 7px 14px;font:700 13px var(--font-h);letter-spacing:.14em;background:var(--deep);color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);z-index:2}
.project-status.is-ongoing{background:var(--orange);color:var(--ink)}
.project-card .body{padding:22px 24px 26px;gap:12px;flex:1;position:relative}
.project-card h3{font-size:24px;line-height:1.1;font-weight:700;text-transform:uppercase}
.project-facts-mini{font-size:14px}
.project-facts-mini li:first-child{color:var(--ink);font-weight:600}
.project-facts-mini li+li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--orange);vertical-align:middle;margin-right:14px;transform:rotate(45deg)}
/* Ok: görselin sağ alt köşesinde turuncu üçgen (logodaki üçgenler); gövdenin üst kenarı = görselin alt kenarı */
.project-card .go{position:absolute;right:0;top:-58px;width:58px;height:58px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 8px 8px 0;background:#fff;color:var(--ink);clip-path:polygon(100% 0,100% 100%,0 100%);z-index:2;transition:color .3s,width .35s,height .35s,top .35s}
/* turuncu üçgen beyaz üçgenin içinde 2px içeri: fotoğrafla birleştiği çaprazda ~3px beyaz boşluk */
.project-card .go::before{content:"";position:absolute;inset:2px 0 0 2px;background:var(--orange);clip-path:polygon(100% 0,100% 100%,0 100%);transition:background .3s}
.project-card .go svg{position:relative;width:17px;height:17px;transition:transform .3s}
.project-card:hover .go{color:var(--orange);width:66px;height:66px;top:-66px}
.project-card:hover .go::before{background:var(--deep)}
.project-card:hover .go svg{transform:translateX(3px)}
.section:has(.project-showcase){background:var(--paper)}

/* Proje sayfası */
.project-facts{border-radius:0;background:var(--deep);color:#fff;border-top:4px solid var(--orange)}
.project-facts dt{color:var(--orange-2);font-size:13px}
.project-facts dd{color:#fff;font:600 19px/1.3 var(--font-h);letter-spacing:.02em}
.project-facts .fact{border-bottom-color:rgba(255,255,255,.12)}
.project-scope h2{font-size:30px;text-transform:uppercase}
.chips-filter a,.chips a{border-radius:0}

/* ---------- Çağrı bandı ---------- */
.b-cta{padding:120px 0;overflow:hidden}
.b-cta::before{background:linear-gradient(100deg,rgba(12,12,12,.94) 0%,rgba(12,12,12,.72) 55%,rgba(12,12,12,.35) 100%)}
.b-cta.ov-light::before{background:linear-gradient(100deg,rgba(12,12,12,.6),rgba(12,12,12,.2))}
.b-cta.no-image{background:var(--ink)}
.b-cta::after{content:"";position:absolute;right:0;top:0;bottom:0;width:min(24vw,340px);background:var(--orange);clip-path:polygon(70% 0,100% 0,100% 100%,0 100%);z-index:-1;opacity:.95}
.b-cta.align-center::after{width:min(18vw,240px)}
.b-cta h2{font-size:clamp(38px,4.8vw,66px);line-height:1;text-transform:uppercase;font-weight:700}
.b-cta p{color:#d9d3ca}
.b-cta .btn-ghost{color:#fff}
.b-cta-counter strong{font-weight:700;font-size:64px}
@media (max-width:800px){.b-cta::after{width:22vw;opacity:.85}}
@media (max-width:600px){.b-cta::after{width:14vw}}

/* ---------- İç sayfa başlığı ---------- */
.page-hero::after{background:linear-gradient(90deg,rgba(12,12,12,.95) 0%,rgba(12,12,12,.75) 55%,rgba(12,12,12,.4) 100%)}
.page-hero .wrap{padding-top:80px;padding-bottom:84px}
.page-hero .wrap::after{content:"";position:absolute;left:24px;bottom:0;width:140px;height:6px;background:var(--orange);clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.page-hero h1{font-size:clamp(40px,5.6vw,78px);line-height:1;text-transform:uppercase;max-width:1000px}
/* uzun başlık kademeleri (page-head: karakter sayısına göre) — resmî proje adları bandı taşırmasın */
.page-hero h1.t-l{font-size:clamp(32px,4.2vw,58px);line-height:1.04}
.page-hero h1.t-xl{font-size:clamp(28px,3.3vw,46px);line-height:1.06}
.page-hero h1.t-xxl{font-size:clamp(24px,2.7vw,38px);line-height:1.08}
@media (max-width:560px){.page-hero h1.t-xl{font-size:25px}.page-hero h1.t-xxl{font-size:22px;line-height:1.1}}
.page-hero::before{content:"";position:absolute;right:0;bottom:0;width:min(30vw,380px);height:100%;background:var(--orange);clip-path:polygon(100% 20%,100% 100%,30% 100%);z-index:1;opacity:.95}
.page-hero p.sub{color:#d9d3ca}
@media (max-width:700px){.page-hero::before{width:45vw;clip-path:polygon(100% 45%,100% 100%,0 100%)}}

/* ---------- Alt kısım ---------- */
.site-footer{background:var(--deep);color:#b8b3cc;position:relative;border-top:0}
.site-footer::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:linear-gradient(90deg,var(--orange) 0 32%,#2a2a2a 32%)}
.site-footer h4{font:700 17px var(--font-h);letter-spacing:.16em;text-transform:uppercase}
.site-footer h4::after{content:"";display:block;width:28px;height:3px;background:var(--orange);margin-top:12px}
.f-logo{border-radius:0;padding:12px 16px}
.f-logo img{height:44px}
.f-contact small{color:var(--orange-2)}
.f-contact svg{color:var(--orange-2)}
.site-footer a:hover,.f-contact a:hover,.site-footer h4 a:hover{color:var(--orange-2)}
.social a{border-radius:0}
.social a:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.f-bottom{border-top-color:rgba(255,255,255,.08)}

/* ---------- Genel uyumlar ---------- */
.rich a{color:var(--orange-d)}
.rich a:hover,.search-results h2 a:hover,.b-card.is-link:hover h3,.b-card-go,.b-stat-fix{color:var(--ink)}
.b-card,.card,.post,.c-card,.form-card,.fx-input,.fx-input input,.fx-input textarea,.fx-input select,.gallery-grid a,.gallery-grid img,.acc-item,.files a{border-radius:0}
.fx-submit{border-radius:0;color:var(--ink);clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
.fx-submit:hover{background:var(--orange-2)}
.video-play-icon,.acc-item[open] .acc-icon{color:var(--ink)}

/* ---------- Hizmet (iş bölümü) tanıtımı ---------- */
.cat-intro{border-left:4px solid var(--orange);padding-left:26px}
.cat-intro .lead-text{font-family:var(--font-b)}
.cat-projects-title{text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:14px}
.cat-projects-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Kutular (ör. çalışma ilkeleri) ---------- */
.b-card{border-radius:0;border:0;border-top:3px solid var(--orange);background:var(--paper);transition:.3s}
.b-card:hover{background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.08);transform:translateY(-4px)}
.b-card h3{font:700 22px/1.1 var(--font-h);text-transform:uppercase;letter-spacing:.02em}
@media (max-width:760px){.cat-intro{padding-left:18px}.cat-intro .lead-text{font-size:18px}}
nav.main .nav-btn a{color:var(--orange-d)}
@media (max-width:640px){.project-scope .spec tr{border:0;border-left:3px solid var(--orange);box-shadow:0 1px 0 var(--line)}}
/* Keskin köşe: galeri ve medya ızgarası, görsel bloğu */
.media-grid .m,.media-grid .m img,.media-grid .m a,.gallery-item img,.gallery-item a,.gallery-item.is-video,.block-image img,.b-image img{border-radius:0}

/* Köşe üçgenleri dar ekranda küçülür (başlık etiketinin üstüne binmesin) */
@media (max-width:1100px){.cat-cards::before{width:110px;height:110px}.intro::before{width:140px;height:140px}}
@media (max-width:760px){.cat-cards::before{width:64px;height:64px}.intro::before{display:none}}
/* Formlar keskin köşe (tema dili) */
.form-card,.form,.field input,.field textarea,.fx-consent-text > div,.fx-status.is-ok,.fx-status.is-error,.form-closed,.form-invite,.search-form input,.search-form button{border-radius:0}
.fx-form input[type="text"],.fx-form input[type="email"],.fx-form input[type="tel"],.fx-form input[type="number"],.fx-form input[type="date"],.fx-form select,.fx-form textarea{border-radius:0}
.fx-form input:focus,.fx-form select:focus,.fx-form textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(233,124,10,.18)}
.fx-check input{accent-color:var(--orange)}
nav.main .nav-lang a.on{background:var(--orange);border-color:var(--orange);color:var(--ink)}
@media (max-width:980px){.topbar .lang{display:none}} /* dil seçimi dar ekranda menünün sonunda (site.php mobile_menu_lang) */

/* Ürün kategori kartları (izowhite): ürün fotoğrafı kesilmez — üstte beyaz zeminde ürün (contain), altta lacivert gövde */
.sectors .card{min-height:0;justify-content:flex-start;background:var(--ink);border-radius:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.sectors .card::before{display:none}
.sectors .card .ph{position:relative;inset:auto;z-index:0;aspect-ratio:4/3;background:#fff!important;overflow:hidden}
.sectors .card .ph img.cover{width:100%;height:100%;object-fit:contain;padding:18px;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sectors .card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(20,12,54,.55)}
.sectors .card:hover .ph{transform:none}
.sectors .card:hover .ph img.cover{transform:scale(1.06)}
.sectors .card .body{flex:1;padding:22px 24px 24px;border-top:4px solid var(--orange)}
.sectors .card h3{font-size:22px;line-height:1.1;margin:6px 0 14px}
.sectors .card li a{font-size:14px}
@media (max-width:980px){.sectors .cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sectors .cards{grid-template-columns:1fr}}

/* ═══════════ izowhite ana sayfa (2026-10-22) ═══════════ */

/* Slider: ekranın altına kadar (üst bant + menü düşülür; --hero-top site.js ölçer, varsayılan 40 + 100 px) — açılışta alttaki
   damlalar kaydırmadan görünür. Görsel yavaşça yakınlaşır, karartma yalnız yazı alanında (sol alt) + üstte ince bant */
.hero{height:max(560px,calc(100svh - var(--hero-top,140px)));touch-action:pan-y;cursor:grab}
.hero.is-drag{cursor:grabbing;user-select:none}
.hero img{-webkit-user-drag:none;user-select:none}
.slide::after{background:radial-gradient(135% 115% at 0% 85%,rgba(20,12,54,.94) 0%,rgba(20,12,54,.78) 34%,rgba(20,12,54,.25) 58%,rgba(20,12,54,0) 74%),linear-gradient(180deg,rgba(20,12,54,.5),rgba(20,12,54,0) 24%)}
/* Yazı sağdaysa karartma da sağdan (ürün solda kalsın) */
.slide.text-end::after{background:radial-gradient(135% 115% at 100% 85%,rgba(20,12,54,.94) 0%,rgba(20,12,54,.78) 34%,rgba(20,12,54,.25) 58%,rgba(20,12,54,0) 74%),linear-gradient(180deg,rgba(20,12,54,.5),rgba(20,12,54,0) 24%)}
.slide.text-end .kicker{flex-direction:row-reverse}
/* Yazılar dikeyde ortada (alttaki damla şeridine yer bırakılır) */
.slide .content{justify-content:center;padding-top:0;padding-bottom:110px}
.slide .ph img.cover{transform:scale(1);transition:transform .8s ease}
.slide.on .ph img.cover{transform:scale(1.07);transition:transform 9s cubic-bezier(.3,.45,.45,1)}
.slide h1,.slide h2{font-size:clamp(38px,4.6vw,72px);max-width:17ch;text-shadow:0 2px 24px rgba(20,12,54,.45)}
.slide p{max-width:46ch;font-size:clamp(17px,1.35vw,21px)}
.slide .content>*{transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.slide.on .content>:nth-child(1){transition-delay:.3s}
.slide.on .content>:nth-child(2){transition-delay:.45s}
.slide.on .content>:nth-child(3){transition-delay:.6s}
.slide.on .content>:nth-child(4){transition-delay:.75s}
/* Eski temadan kalan sağ alt turuncu üçgen: slaytların arkasında kalıyor, yalnız geçiş perdesinde beliriyordu (kullanıcı:
   "alakasız bir yansıma") — kaldırıldı */
.hero::before,.hero::after{display:none}

/* Gösterge: dolan su damlası (geçilenler dolu kalır), duraklat düğmesi */
.hero-nav{bottom:40px}
.hero-nav .wrap{align-items:flex-end;gap:6px}
.hero-nav button{flex:0 1 auto;max-width:none;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;color:#cfcae0;font:600 14px var(--font-h);letter-spacing:.1em}
.hero-nav button::before,.hero-nav button::after{display:none}
.hero-nav button span{text-transform:uppercase;white-space:nowrap;transition:color .3s}
.hero-nav button:hover span,.hero-nav button.on span{color:#fff}
/* Damla: boş cam gövde; içinde su seviyesi dalgalı yüzeyle yükselir (uzama yok), dolunca parıltı + halka, renk turuncuya döner */
.drop{width:20px;height:27px;flex:none;overflow:visible;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.drop-glass{fill:rgba(255,255,255,.07)}
.drop-line{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5;transition:stroke .4s}
.drop-level{transform:translateY(33px)}
.drop-water{fill:var(--water);transition:fill .7s ease;animation:dropWave 1.8s linear infinite}
.drop-glint{fill:rgba(255,255,255,.75);opacity:0;transform:skewX(-20deg)}
.drop-ripple{fill:none;stroke:var(--water);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.hero-nav button:hover .drop{transform:translateY(-3px)}
.hero-nav button.on .drop{transform:scale(1.15)}
.hero-nav button.on .drop-line,.hero-nav button.done .drop-line{stroke:#fff}
.hero-nav button.on .drop-level{animation:dropRise var(--slide-ms,7s) linear forwards}
.hero.is-paused .hero-nav button.on .drop-level{animation-play-state:paused}
.hero-nav button.done .drop-level{transform:translateY(-3px)}
.hero-nav button.done .drop-water{fill:var(--orange)}
/* Bitiş anı (site.js .just-done ekler): parıltı süzülür, tabanda halka açılır */
.hero-nav button.just-done .drop-glint{animation:dropGlint .8s ease-out}
.hero-nav button.just-done .drop-ripple{stroke:var(--orange);animation:dropRipple .9s ease-out}
@keyframes dropWave{from{transform:translateX(0)}to{transform:translateX(12px)}}
@keyframes dropRise{from{transform:translateY(33px)}to{transform:translateY(-3px)}}
@keyframes dropGlint{0%{opacity:0;transform:translateX(0) skewX(-20deg)}30%{opacity:1}100%{opacity:0;transform:translateX(34px) skewX(-20deg)}}
@keyframes dropRipple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
/* Giriş: tepede boncuk birikir, uzar, kopar; yerçekimiyle hızlanarak düşer, yere değince basılır, halka açılır */
.hero:not(.drops-in) .hero-nav .drop{animation:dropDrip 1.15s calc(.45s + var(--i,0) * .16s) backwards}
.hero:not(.drops-in) .hero-nav .drop-ripple{animation:dropRipple .8s ease-out calc(.45s + var(--i,0) * .16s + .82s) backwards}
.hero.drops-in .hero-nav button.on .drop{animation:dropDripOn 1s backwards}
.hero.drops-in .hero-nav button.on .drop-ripple{animation:dropRipple .8s ease-out .72s backwards}
@keyframes dropDrip{
  0%{transform:translateY(-30px) scale(.25,.25);opacity:0;animation-timing-function:ease-out}
  22%{transform:translateY(-30px) scale(.62,.6);opacity:1;animation-timing-function:ease-in-out}
  36%{transform:translateY(-27px) scale(.52,1.18);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  72%{transform:translateY(0) scale(.84,1.12);animation-timing-function:ease-out}
  82%{transform:translateY(1px) scale(1.22,.78);animation-timing-function:ease-in-out}
  92%{transform:translateY(-1px) scale(.95,1.06)}
  100%{transform:none;opacity:1}}
@keyframes dropDripOn{
  0%{transform:translateY(-22px) scale(.55,1.15);opacity:.4;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  70%{transform:translateY(0) scale(1,1.3);opacity:1;animation-timing-function:ease-out}
  82%{transform:translateY(1px) scale(1.38,.95);animation-timing-function:ease-in-out}
  92%{transform:translateY(-1px) scale(1.1,1.2)}
  100%{transform:scale(1.15)}}
.hero-pause{margin-left:auto;width:44px;height:44px;flex:none!important;display:grid!important;place-items:center;padding:0!important;border:1.5px solid rgba(255,255,255,.45)!important;border-radius:50%;color:#fff!important}
.hero-pause:hover{background:rgba(255,255,255,.14)}
.hero-pause svg{width:18px;height:18px}
.hero-pause .i-play,.hero.is-paused .hero-pause .i-pause{display:none}
.hero.is-paused .hero-pause .i-play{display:block}
@media (max-width:900px){.hero-nav button span{display:none}.hero-nav button{padding:8px}}
/* Telefon: fotoğraf üstte bant, yazılar altında koyu zeminde (dikey ekranda görsel kesilmesin) */
@media (max-width:700px){
  .hero{height:max(560px,calc(100svh - var(--hero-top,140px)));min-height:560px}
  .slide{background:var(--deep)}
  .slide .ph{bottom:auto;height:52%}
  .slide::after{background:linear-gradient(180deg,rgba(20,12,54,.45) 0%,rgba(20,12,54,0) 22%,rgba(20,12,54,0) 32%,var(--deep) 52%)}
  .slide .content{justify-content:flex-end;padding-bottom:110px}
  .slide h1,.slide h2{font-size:clamp(34px,10vw,48px)}
  .hero::before{display:none}
}

/* Marka bandı: büyük cümle + çizilen çatı çizgisi + yayılan su halkaları */
.brand-band{position:relative;overflow:hidden;padding:clamp(80px,11vw,150px) 0;background:var(--paper);text-align:center;isolation:isolate}
.brand-band h2{font:700 clamp(34px,5vw,72px)/1.02 var(--font-h);text-transform:uppercase;color:var(--ink);max-width:16ch;margin:18px auto 0;letter-spacing:.01em}
.brand-roof{width:min(220px,48vw);height:auto;overflow:visible}
.brand-roof path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.brand-roof .r1{stroke:var(--orange);stroke-width:7;stroke-dasharray:330;stroke-dashoffset:330}
.brand-roof .r2{stroke:var(--ink);stroke-width:7;stroke-dasharray:90;stroke-dashoffset:90}
.brand-roof .r3{stroke:none;fill:var(--orange);opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.reveal.in .brand-roof .r1{transition:stroke-dashoffset 1.3s cubic-bezier(.6,.1,.3,1) .2s;stroke-dashoffset:0}
.reveal.in .brand-roof .r2{transition:stroke-dashoffset .8s ease 1.2s;stroke-dashoffset:0}
/* Damla çizilmez (çizim yarım kalıyordu): tek parça, çatının tepesinden belirerek iner ve oturur */
.reveal.in .brand-roof .r3{animation:phDrop 1s 1.7s both}
html:not(.anim) .brand-roof .r3{opacity:1}
html:not(.anim) .brand-roof path{stroke-dashoffset:0}
.brand-ripples{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.brand-ripples circle{fill:none;stroke:rgba(30,18,75,.12);stroke-width:1.2;transform-origin:400px 230px;animation:ripple 9s linear infinite}
.brand-ripples circle:nth-child(2){animation-delay:3s}
.brand-ripples circle:nth-child(3){animation-delay:6s}
@keyframes ripple{from{transform:scale(.4);opacity:0}15%{opacity:1}to{transform:scale(6);opacity:0}}

/* Ürün vitrini: beyaz sahnede ürün (kesilmez), zeminde gölge; yatay kaydırma */
.showcase{padding:110px 0 120px;background:#fff;overflow:hidden}
.showcase .sec-head h2{text-transform:uppercase}
.sc-nav{display:flex;gap:10px;align-items:center}
.sc-nav button{width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--ink);background:none;color:var(--ink);cursor:pointer;transition:.25s}
.sc-nav button:hover{background:var(--ink);color:#fff}
.sc-nav button svg{width:20px;height:20px}
.sc-prev svg{transform:scaleX(-1)}
.sc-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,24vw,320px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px max(24px,calc((100vw - var(--wrap)) / 2 + 24px)) 30px;scroll-padding-inline:max(24px,calc((100vw - var(--wrap)) / 2 + 24px))}
.sc-track::-webkit-scrollbar{display:none}
.sc-item{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;color:var(--ink);text-decoration:none;transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.sc-stage{position:relative;aspect-ratio:1;background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);display:grid;place-items:center;overflow:hidden;border-bottom:4px solid var(--orange)}
.sc-stage::after{content:"";position:absolute;left:18%;right:18%;bottom:9%;height:7%;background:radial-gradient(closest-side,rgba(20,12,54,.28),transparent);transition:transform .5s,opacity .5s}
.sc-stage img{position:relative;z-index:1;width:84%;height:84%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sc-item:hover .sc-stage img{transform:translateY(-10px) scale(1.03)}
.sc-item:hover .sc-stage::after{transform:scaleX(.82);opacity:.7}
.sc-meta{display:flex;flex-direction:column;gap:6px;padding:18px 54px 0 0}
.sc-meta small{font:600 12px var(--font-h);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-d)}
.sc-meta strong{font:700 21px/1.12 var(--font-h);text-transform:uppercase}
.sc-go{position:absolute;right:0;bottom:2px;width:42px;height:42px;display:grid;place-items:center;background:var(--ink);color:#fff;transition:.3s}
.sc-go svg{width:18px;height:18px}
.sc-item:hover .sc-go{background:var(--orange);color:var(--ink)}
.sc-item:focus-visible{outline:3px solid var(--orange);outline-offset:4px}

/* ═══ Sistem kesiti (katman çizimi) ═══
   Zemin: pafta ızgaralı lacivert. Solda adımlar dikey rayda — damla raydan akar, geride kalan ray suyla dolar (site.js
   --fill, .on). Sağda izometrik patlatılmış kesit: --ex (0 → 1) kaydırmayla katmanları ayırır; yağmur üst yüzde sekiyor. */
.layers{position:relative;overflow:hidden;padding:clamp(56px,4.6vw,84px) 0;background:var(--deep);color:#fff;isolation:isolate}
.layers-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 70% at 78% 45%,rgba(62,168,229,.16),transparent 70%),
  radial-gradient(40% 50% at 10% 90%,rgba(238,124,0,.1),transparent 70%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px}
.layers::before{content:"";position:absolute;right:0;top:0;width:min(26vw,360px);height:min(26vw,360px);background:var(--orange);clip-path:polygon(100% 0,100% 100%,0 0);opacity:.92;z-index:-1}
.layers-grid{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:clamp(30px,5vw,90px);align-items:center}
.layers .eyebrow{color:var(--orange-2)}
.layers h2{font:700 clamp(34px,4vw,58px)/1 var(--font-h);text-transform:uppercase;margin-top:12px}
/* Ray + akan damla + dolan su */
.flow{--ik:46px;position:relative;margin-top:36px}
.flow-rail{position:absolute;left:calc(var(--ik) / 2 - 1px);top:calc(var(--ik) / 2);bottom:calc(var(--ik) / 2);width:2px;background:rgba(255,255,255,.14);border-radius:2px}
.flow-water{position:absolute;left:-1px;right:-1px;top:0;height:calc(var(--fill,0) * 100%);border-radius:3px;background:linear-gradient(180deg,rgba(62,168,229,.25),var(--water));box-shadow:0 0 12px rgba(62,168,229,.6);transition:height 1.1s cubic-bezier(.65,0,.35,1)}
.flow-drop{position:absolute;left:50%;top:calc(var(--fill,0) * 100%);width:14px;height:18px;margin:-14px 0 0 -7px;background:var(--water);border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;clip-path:none;transform:rotate(180deg);box-shadow:0 0 0 4px rgba(62,168,229,.18),0 0 22px 6px rgba(62,168,229,.55);opacity:0;transition:top 1.1s cubic-bezier(.65,0,.35,1),opacity .4s}
.flow.is-live .flow-drop{opacity:1}
.flow-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.flow-step button{position:relative;width:100%;display:grid;grid-template-columns:var(--ik) 1fr;column-gap:20px;align-items:start;text-align:left;background:none;border:0;padding:0;color:#cfcae0;font:400 16px/1.55 var(--font-b,inherit);cursor:pointer}
.flow-ico{position:relative;z-index:1;width:var(--ik);height:var(--ik);border-radius:50%;display:grid;place-items:center;background:var(--deep);border:2px solid rgba(255,255,255,.22);color:#bdb8d6;transition:background-color .45s,border-color .45s,color .45s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.flow-ico svg{width:21px;height:21px}
.flow-tx{position:relative;display:block;padding:12px 64px 14px 18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:background-color .45s,border-color .45s,color .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.flow-tx::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--water),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.flow-no{position:absolute;right:16px;top:8px;z-index:1;font:700 30px/1 var(--font-h);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);transition:-webkit-text-stroke-color .4s,transform .45s}
.flow-step.is-done .flow-ico{border-color:var(--water);color:var(--water)}
.flow-step button:hover .flow-ico,.flow-step.on .flow-ico{background:var(--water);border-color:#fff;color:var(--deep);transform:scale(1.1)}
.flow-step.on .flow-ico::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(62,168,229,.7);animation:flowHalo 1.6s ease-out infinite}
@keyframes flowHalo{from{transform:scale(.85);opacity:1}to{transform:scale(1.5);opacity:0}}
.flow-step button:hover .flow-tx,.flow-step.on .flow-tx{background:rgba(255,255,255,.08);border-color:rgba(62,168,229,.45);color:#fff;transform:translateX(6px)}
.flow-step button:hover .flow-tx::after,.flow-step.on .flow-tx::after{transform:scaleX(1)}
.flow-step button:hover .flow-no,.flow-step.on .flow-no{-webkit-text-stroke-color:var(--orange-2);transform:translateY(-3px)}
.flow-step button:focus-visible{outline:2px solid var(--water);outline-offset:4px}
.layers-btns{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.layers .btn-ghost{color:#fff}
/* İzometrik kesit */
.iso{margin:0;--ex:1}
.iso svg{width:100%;height:auto;overflow:visible;font:600 15px var(--font-h);letter-spacing:.08em}
.iso-shadow{fill:rgba(0,0,0,.35);filter:blur(8px);transform-box:fill-box;transform-origin:center;transform:scaleX(calc(1 + var(--ex) * .06))}
.iso-layer{transform:translateY(calc(var(--k) * -44px * var(--ex)));transition:filter .45s}
.iso-layer polygon{stroke:rgba(20,12,54,.55);stroke-width:1;stroke-linejoin:round;transition:fill .45s,stroke .45s}
.f-edge{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.4;stroke-linejoin:round;transition:stroke .45s}
.iso-base .f-top{fill:url(#iso-beton)}.iso-base .f-left{fill:#9f9aab}.iso-base .f-right{fill:#7f7a8c}
.iso-primer .f-top{fill:rgba(140,196,232,.85)}.iso-primer .f-left{fill:#6fa6cc}.iso-primer .f-right{fill:#4f88b2}
.iso-mesh .f-top{fill:url(#iso-file)}.iso-mesh .f-left{fill:#e8c9a2}.iso-mesh .f-right{fill:#d4a874}
.iso-coat .f-top{fill:url(#iso-coat)}.iso-coat .f-left{fill:#dbe7f2}.iso-coat .f-right{fill:#b9cfe3}
.iso-lead{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.2;stroke-dasharray:3 4;transition:stroke .4s}
.iso-dot{fill:var(--orange-2);transition:transform .4s;transform-box:fill-box;transform-origin:center}
.iso-label{fill:#cfcae0;text-transform:uppercase;transition:fill .4s}
.iso-layer.on{filter:drop-shadow(0 0 18px rgba(62,168,229,.55))}
.iso-layer.on .f-edge{stroke:var(--water)}
.iso-layer.on polygon{stroke:var(--water)}
.iso-layer.on .iso-lead{stroke:var(--water);stroke-dasharray:none}
.iso-layer.on .iso-label{fill:#fff}
.iso-layer.on .iso-dot{transform:scale(1.5);fill:var(--water)}
/* Yağmur: düşer, üst yüzde sıçrar, içeri geçmez */
.rain-drop{fill:#8fd0f5;opacity:0;animation:rainFall 2.8s cubic-bezier(.55,0,1,.6) var(--rd,0s) infinite}
.rain-splash{fill:none;stroke:#8fd0f5;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;animation:rainSplash 2.8s ease-out var(--rd,0s) infinite}
@keyframes rainFall{0%{transform:translateY(-170px);opacity:0}8%{opacity:1}52%{transform:translateY(0);opacity:1}54%,100%{transform:translateY(0);opacity:0}}
@keyframes rainSplash{0%,52%{transform:scale(.2);opacity:0}56%{transform:scale(.45);opacity:.95}80%,100%{transform:scale(1.7);opacity:0}}
@media (max-width:980px){.layers-grid{grid-template-columns:1fr}.iso{max-width:620px;margin:10px auto 0}.layers::before{width:140px;height:140px}}
@media (max-width:520px){.flow{--ik:40px}.flow-tx{padding:10px 48px 12px 14px;font-size:15px}.flow-no{font-size:24px}.iso svg{font-size:19px}}
@media (prefers-reduced-motion:reduce){.rain-drop,.rain-splash,.flow-step.on .flow-ico::after{animation:none}}
/* Giriş: adımlar sırayla gelir; ray kendini çizer */
html.anim .flow-step{opacity:0;transform:translateY(26px);transition:opacity .7s ease calc(.25s + var(--sira) * .12s),transform .9s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--sira) * .12s)}
html.anim .flow.is-in .flow-step{opacity:1;transform:none}
html.anim .flow-rail{transform:scaleY(0);transform-origin:top;transition:transform 1.6s cubic-bezier(.45,0,.2,1) .1s}
html.anim .flow.is-in .flow-rail{transform:none}

/* Uygulama alanları mozaiği: büyük fotoğraflar, ilk kart iki satır */
.mosaic{padding:110px 0;background:var(--paper)}
.mosaic .sec-head h2{text-transform:uppercase}
.mosaic-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-auto-rows:clamp(220px,22vw,300px);gap:16px}
.mosaic-grid .mosaic-item:first-child{grid-row:span 2}
.mosaic-grid.n-4 .mosaic-item:last-child{grid-column:span 2}
.mosaic-item{position:relative;overflow:hidden;display:block;color:#fff;background:var(--ink);isolation:isolate;transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.mosaic-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.mosaic-item::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,12,54,0) 58%,rgba(20,12,54,.82) 100%)}
.mosaic-item::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;border-right:0 solid var(--orange);border-top:0 solid transparent;transition:border-width .5s cubic-bezier(.2,.7,.2,1);z-index:-1}
.mosaic-cap{position:absolute;left:26px;bottom:22px;right:80px;display:flex;flex-direction:column;gap:4px}
.mosaic-cap strong{font:700 clamp(26px,2.4vw,40px)/1 var(--font-h);text-transform:uppercase;letter-spacing:.02em}
.mosaic-cap small{color:#e2def0;font-size:15px}
.mosaic-go{position:absolute;right:22px;bottom:22px;width:46px;height:46px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.6);transition:.35s}
.mosaic-go svg{width:20px;height:20px}
.mosaic-item:hover img{transform:scale(1.07)}
.mosaic-item:hover::after{border-right-width:130px;border-top-width:130px}
.mosaic-item:hover .mosaic-go{background:var(--ink);border-color:var(--ink);color:var(--orange)}
.mosaic-item:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (max-width:860px){.mosaic-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.mosaic-grid .mosaic-item:first-child{grid-column:span 2;grid-row:auto}.mosaic-grid.n-4 .mosaic-item:last-child{grid-column:auto}}
@media (max-width:520px){.mosaic-grid{grid-template-columns:1fr}.mosaic-grid .mosaic-item:first-child{grid-column:auto}}

/* Sıralı belirme: --d gecikmesi (kartlar tek tek) */
.reveal[style*="--d"]{transition-delay:var(--d)}
@media (prefers-reduced-motion:reduce){.brand-ripples circle,.drop,.drop-water,.drop-ripple{animation:none}.slide.on .ph img.cover{transform:none}}

/* Alt bilgi (izowhite): sade; zeminde yavaş kayan su dalgaları, üstte marka degradesi; iletişim küçük liste */
.site-footer{overflow:hidden;isolation:isolate}
.site-footer::before{background:linear-gradient(90deg,var(--orange) 0%,var(--orange-2) 30%,var(--ink-3) 70%,var(--ink) 100%)}
.f-waves{position:absolute;left:0;bottom:0;width:100%;height:240px;z-index:-1;overflow:hidden}
.f-waves path{animation:waveL 16s linear infinite}
.f-waves .w1{fill:rgba(166,201,94,.09);animation-duration:22s}
.f-waves .w2{fill:rgba(62,168,229,.11);animation-name:waveR;animation-duration:15s}
.f-waves .w3{fill:rgba(255,255,255,.07);animation-duration:10s}
/* Dalgalar 1440 birim (bütün periyotların katı) kayar → dikişsiz döngü; katmanlar farklı hız ve yönde */
@keyframes waveL{from{transform:translateX(0)}to{transform:translateX(-1440px)}}
@keyframes waveR{from{transform:translateX(-1440px)}to{transform:translateX(0)}}
.f-contact-col{padding-top:6px}
.f-contact li small{font-size:11px;letter-spacing:.14em}
/* Başa dön: slider damlasının aynısı — görünürken damla gibi düşüp yere oturur (halka yayılır); su, sayfanın okunan
   oranında dalgalanarak yükselir; sayfa sonunda turuncuya döner, parıltı geçer (site.js: show, drip, done, just-done) */
.to-top{position:fixed;right:24px;bottom:96px;z-index:40;width:44px;height:59px;display:block;opacity:0;pointer-events:none;transition:opacity .3s}
.to-top.show{opacity:1;pointer-events:auto}
.to-top svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 14px rgba(20,12,54,.35));transform-origin:50% 100%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.to-top:hover svg{transform:translateY(-3px)}
.to-top.drip svg{animation:dropDrip 1.15s backwards}
.to-top.drip .drop-ripple{animation:dropRipple .8s ease-out .82s backwards}
.tt-bg{fill:var(--ink)}
.tt-level{transform:translateY(calc(33px - 36px * var(--p,0)));transition:transform .25s linear}
.to-top .drop-line{stroke:#fff;stroke-width:1.3}
.to-top.done .drop-water{fill:var(--orange)}
.to-top.just-done .drop-glint{animation:dropGlint .8s ease-out}
.to-top.just-done .drop-ripple{stroke:var(--orange);animation:dropRipple .9s ease-out}
/* Ok: biraz büyük; sürekli hafifçe yukarı doğru hareket eder (yukarı süzülür, solup aşağıda yeniden belirir) */
.tt-arrow{fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;animation:ttUp 1.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes ttUp{0%{transform:translateY(2.5px);opacity:.55}50%{transform:translateY(-1.5px);opacity:1}100%{transform:translateY(2.5px);opacity:.55}}
.to-top:hover .tt-arrow{animation-duration:.9s}
@media (prefers-reduced-motion:reduce){.to-top.drip svg,.tt-arrow{animation:none}.tt-level{transition:none}}
/* Telefonda başa dön damlası WhatsApp düğmesiyle aynı hizada (orta noktaları aynı yükseklikte) */
@media (max-width:760px){.to-top{right:22px;bottom:20px}}
.to-top:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:50%}

/* Alt bilgi renkleri (izowhite): kovalardaki fıstık yeşili başlık, çizgi ve düğmelerde; üzerine gelince tam beyaz */
.site-footer{--pistachio:#a6c95e}
.site-footer h4{color:var(--pistachio)}
.site-footer h4::after{background:var(--pistachio);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.site-footer .f-grid>div:hover h4::after{width:56px}
.f-contact small,.f-contact svg{color:var(--pistachio)}
.site-footer .f-logo~p{margin-top:22px}
/* Bağlantılar: açık gri → beyaz; solda yeşil çizgi uzar */
.site-footer li a,.f-contact a,.f-links a{position:relative;color:#cfcae0;transition:color .25s,padding-left .3s cubic-bezier(.2,.7,.2,1)}
.site-footer li a::before{content:"";position:absolute;left:0;top:50%;width:0;height:2px;background:var(--pistachio);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.site-footer li a:hover{color:#fff;padding-left:16px}
.site-footer li a:hover::before{width:10px}
.site-footer a:hover,.f-contact a:hover,.site-footer h4 a:hover,.f-links a:hover{color:#fff}
.site-footer li a[aria-current="page"]{color:var(--pistachio)}
/* Düğmeler (sosyal simgeler): yeşil çerçeve ve simge; üzerine gelince tam beyaz zemin, lacivert simge, hafif yükselir */
.site-footer .social a{border:2px solid var(--pistachio);color:var(--pistachio);transition:background .25s,color .25s,border-color .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.site-footer .social a:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-3px)}
.f-credit{color:var(--pistachio)!important}
.f-credit:hover{color:#fff!important}
/* Üst kuruluş logosu: alt satırın en sağında, çerçevesiz, renkleri olduğu gibi. Lacivert yazı koyu zeminde okunsun diye
   arkasında ayrı, kenarsız, sönümlü bir sahne ışığı katmanı (beslercup alt bilgisindeki gibi; görselin kendisine dokunulmaz).
   Üzerine gelince logo hafif yükselip döner, ışık güçlenir ve turuncuya kayar */
.site-footer .f-bottom .wrap,.f-links{align-items:center}
.f-links .f-group{display:block;line-height:0;margin-left:18px;isolation:isolate}
.f-links .f-group::before{content:"";position:absolute;left:50%;top:-30%;width:240%;height:170%;transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 44% at 50% 56%,rgba(255,255,255,.34) 0%,rgba(255,255,255,.16) 44%,rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 28% 24% at 50% 44%,rgba(238,124,0,.16) 0%,rgba(238,124,0,0) 70%);
  filter:blur(6px);pointer-events:none;z-index:-1;transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
.f-group img{position:relative;height:62px;width:auto;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.f-links .f-group:hover img{transform:translateY(-3px) rotate(-4deg)}
.f-links .f-group:hover::before{transform:translateX(-50%) scale(1.12);opacity:1;
  background:radial-gradient(ellipse 50% 44% at 50% 56%,rgba(255,255,255,.42) 0%,rgba(255,255,255,.2) 44%,rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 32% 28% at 50% 44%,rgba(238,124,0,.32) 0%,rgba(238,124,0,0) 70%)}
.f-links .f-group:focus-visible{outline-offset:6px;border-radius:6px}
.site-footer a:focus-visible{outline:2px solid var(--pistachio);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.f-waves path{animation:none}}
/* Slayt üst etiketi: her görselde okunsun diye yarı saydam lacivert etiket zemini */
.slide .kicker span{background:rgba(20,12,54,.78);padding:7px 12px 6px;backdrop-filter:blur(2px)}

/* ═══ Slider geçişi: yeni slayt eskisinin üzerinden perde gibi açılır; görseller zıt yönde kayar (katmanlı derinlik) ═══ */
.slide{opacity:1;visibility:hidden;z-index:1;clip-path:inset(0 0 0 100%);transition:none}
.hero.is-back .slide:not(.on):not(.out){clip-path:inset(0 100% 0 0)}
.slide.on{visibility:visible;z-index:3;clip-path:inset(0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
.slide.out{visibility:visible;z-index:2;clip-path:inset(0)}
.slide .ph{transform:translateX(14%);transition:none}
.hero.is-back .slide:not(.on) .ph{transform:translateX(-14%)}
.slide.on .ph{transform:none;transition:transform 1.3s cubic-bezier(.77,0,.18,1)}
.slide.out .ph{transform:translateX(-10%);transition:transform 1.3s cubic-bezier(.77,0,.18,1)}
.hero.is-back .slide.out .ph{transform:translateX(10%)}
/* Yazılar: başlık sözcükleri maskeden yükselir, çizgi kendini çizer, açıklama bulanıktan netleşir */
.slide .content>h1,.slide .content>h2{opacity:1;transform:none}
.slide h1 .w,.slide h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .1em;margin-bottom:-.1em}
.slide .w>span{display:inline-block;transform:translateY(110%);transition:transform .45s cubic-bezier(.4,0,.2,1)}
.slide.on .w>span{transform:none;transition:transform 1.05s cubic-bezier(.2,.85,.25,1) calc(.5s + var(--wi,0) * .07s)}
.slide .kicker i{transform:scaleX(0);transform-origin:left;transition:transform .4s}
.slide.text-end .kicker i{transform-origin:right}
.slide.on .kicker i{transform:scaleX(1);transition:transform .9s cubic-bezier(.2,.8,.2,1) .35s}
.slide .content>p{filter:blur(8px)}
.slide.on .content>p{filter:none;transition:opacity .8s ease .85s,transform 1s cubic-bezier(.2,.7,.2,1) .85s,filter 1s ease .85s}
.slide.on .content>div:last-child{transition:opacity .7s ease 1.05s,transform .9s cubic-bezier(.2,.7,.2,1) 1.05s}
/* İlk açılış: ilk slayt da perdeyle girer (JS .ready ekler); JS yoksa (html.anim yok) her şey görünür */
html.anim .hero:not(.ready) .slide.on{clip-path:inset(0 0 0 100%)}
html.anim .hero:not(.ready) .slide.on .ph{transform:translateX(14%)}
html.anim .hero:not(.ready) .slide.on .w>span{transform:translateY(110%)}
html.anim .hero:not(.ready) .slide.on .content>*:not(h1):not(h2){opacity:0;transform:translateY(24px)}
html.anim .hero:not(.ready) .slide.on .kicker i{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){.slide,.slide.on,.slide .ph{clip-path:none;transform:none!important;transition:none!important}.slide:not(.on){visibility:hidden}.slide .w>span{transform:none}}

/* ═══ Sayfa geneli hareket ve üzerine gelme (izowhite) ═══ */
/* Üst menü: kaydırınca incelir, cam görünümü */
header.site{transition:background-color .4s,box-shadow .4s,backdrop-filter .4s}
header.site .wrap{transition:height .45s cubic-bezier(.2,.7,.2,1)}
header.site .logo img{transition:height .45s cubic-bezier(.2,.7,.2,1)}
header.site.is-scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 14px 34px -22px rgba(20,12,54,.45)}
header.site.is-scrolled .wrap{height:68px}
header.site.is-scrolled .logo img{height:38px}
nav.main > ul > li > a::after{left:50%;right:auto;width:calc(100% - 28px);transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
nav.main > ul > li > a:hover::after,nav.main > ul > li > a.on::after{transform:translateX(-50%) scaleX(1)}

/* Düğmeler: renk soldan dolar, ok ileri itilir; açık zeminde lacivert, koyu zeminde beyaz dolgu */
.btn{--sweep:var(--ink);--sweep-ink:#fff}
.hero .btn,.layers .btn,.b-cta .btn,.site-footer .btn{--sweep:#fff;--sweep-ink:var(--ink)}
.btn-primary,.btn-primary:hover{background:linear-gradient(90deg,var(--sweep) 0 50%,var(--orange) 50% 100%) 100% 0/202% 100% no-repeat;color:var(--ink);transition:background-position .55s cubic-bezier(.7,0,.2,1),color .35s ease .05s,transform .3s}
.btn-primary:hover,.btn-primary:focus-visible{background-position:0 0;color:var(--sweep-ink)}
.btn svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(5px)}
.btn-ghost{transition:background-color .3s,color .3s,box-shadow .3s}

/* Bölüm başlıkları: sözcükler maskeden sırayla yükselir */
h2.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin-bottom:-.1em}
h2.split .w>span{display:inline-block;transform:translateY(112%);transition:transform 1s cubic-bezier(.2,.85,.25,1) calc(.08s + var(--wi,0) * .06s)}
h2.split.in .w>span{transform:none}

/* Görsel perdeleri: mozaik kareleri alttan açılır, içindeki fotoğraf geri çekilir; sonra kaydırma derinliği */
.mosaic-item img{transform:translateY(var(--py,0px)) scale(1.12);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.mosaic-item:hover img{transform:translateY(var(--py,0px)) scale(1.19)}
html.anim .mosaic-item.reveal{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.25s cubic-bezier(.77,0,.18,1) var(--d,0ms)}
html.anim .mosaic-item.reveal.in{clip-path:inset(0)}
html.anim .mosaic-item.reveal:not(.in) img{transform:scale(1.35)}
.mosaic-cap strong{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mosaic-item:hover .mosaic-cap strong{transform:translateY(-6px)}
/* Kapanış bölümü arka planı kendi hızında kayar */
.b-cta{background-position:center calc(50% + var(--py,0px))}
@media (max-width:760px){.b-cta{background-position:center}}

/* Kategori kartları sırayla gelir; ürün fareyle eğilir, üzerinden ışık süzülür */
.sectors .card.reveal:nth-child(2){transition-delay:.09s}.sectors .card.reveal:nth-child(3){transition-delay:.18s}.sectors .card.reveal:nth-child(4){transition-delay:.27s}
.sectors .card.reveal:nth-child(5){transition-delay:.12s}.sectors .card.reveal:nth-child(6){transition-delay:.21s}.sectors .card.reveal:nth-child(7){transition-delay:.3s}.sectors .card.reveal:nth-child(8){transition-delay:.39s}
.sectors .card .ph img.cover,.sc-stage img{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sectors .card:hover .ph img.cover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px) scale(1.06)}
.sc-item:hover .sc-stage img{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-12px) scale(1.04)}
.sectors .card .ph::after,.sc-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.65),rgba(255,255,255,0) 45%);opacity:0;transition:opacity .4s}
.sectors .card:hover .ph::after,.sc-item:hover .sc-stage::before{opacity:1}
.sectors .card .body{transition:background-color .4s}
.sectors .card:hover .body{background:var(--ink-2)}
.sectors .card h3 a{background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.sectors .card:hover h3 a{background-size:100% 2px}
/* Alt bağlantılar: üzerine gelince yazı kaymaz (satır yeniden kırılmasın), yalnız ok ilerler; başlıklar iki satırlık yerde
   hizalı durur (alt listeler aynı çizgiden başlar) */
.sectors .card li a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;transition:color .25s}
.sectors .card li a:hover{padding-left:0}
.sectors .card li a::after{transition:translate .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
.sectors .card li a:hover::after{translate:5px 0;opacity:1}
.sectors .card h3{min-height:2.2em}
.sectors .sec-head{flex-direction:column;align-items:center;text-align:center}

/* Marka bandı: dokunulan yerde su halkası */
.brand-band .wrap{position:relative;z-index:1}
.touch-ripple{position:absolute;z-index:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1.5px solid rgba(62,168,229,.6);pointer-events:none;animation:touchRipple 1.6s cubic-bezier(.2,.6,.3,1) forwards}
.touch-ripple::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid rgba(238,124,0,.35)}
@keyframes touchRipple{from{transform:scale(1);opacity:.9}to{transform:scale(13);opacity:0}}

/* ═══ Online mağaza bandı ═══ */
.shop{position:relative;overflow:hidden;padding:clamp(90px,10vw,140px) 0;background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);isolation:isolate}
.shop::before{content:"";position:absolute;left:-8vw;bottom:-14vw;width:46vw;height:46vw;border-radius:50%;background:radial-gradient(closest-side,rgba(238,124,0,.1),transparent);z-index:-1}
.shop-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,80px);align-items:center}
.shop-eyebrow{display:inline-flex;align-items:center;gap:10px}
.shop-eyebrow::before{display:none}
.shop-eyebrow svg{width:22px;height:22px;color:var(--orange)}
.shop h2{font:700 clamp(36px,4.4vw,64px)/1 var(--font-h);text-transform:uppercase;color:var(--ink);margin-top:14px;max-width:14ch}
.shop-lead{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--muted);max-width:44ch;margin:22px 0 0}
.shop-btns{margin-top:34px}
.btn-lg{padding:18px 34px;font-size:16px}
.btn-lg svg:first-child{width:20px;height:20px}
.btn-lg:hover svg:first-child{transform:none;animation:cartRoll .6s ease}
@keyframes cartRoll{30%{transform:translateX(-3px) rotate(-8deg)}70%{transform:translateX(3px)}}
/* Fırsat maddeleri */
.shop-perks{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;max-width:46ch}
.shop-perks li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.perk-ico{width:48px;height:48px;display:grid;place-items:center;background:#fff;color:var(--orange-d);border:1px solid var(--line);box-shadow:0 10px 24px -16px rgba(20,12,54,.4);transition:background-color .35s,color .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.perk-ico svg{width:24px;height:24px}
.shop-perks li:hover .perk-ico{background:var(--ink);color:var(--orange-2);transform:rotate(-6deg) scale(1.06)}
.shop-perks strong{display:block;font:700 18px/1.15 var(--font-h);text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.shop-perks small{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--muted)}
/* Yörünge sahnesi: mavi halkalı beyaz disk + dönen ürün yörüngesi + dönen rozet */
.shop-stage{position:relative;aspect-ratio:1;max-width:640px;width:100%;justify-self:center;container-type:inline-size;--R:41.5cqw}
.shop-ring{position:absolute;inset:0;width:100%;height:100%;animation:ringSpin 70s linear infinite}
.shop-ring circle{fill:none;stroke:rgba(30,18,75,.16);stroke-width:1.2;stroke-dasharray:2 9}
.shop-ring circle+circle{stroke:rgba(238,124,0,.4);stroke-dasharray:70 16 4 16}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.shop-core{position:absolute;inset:23%;border-radius:50%;background:#fff;box-shadow:0 0 0 clamp(12px,3.2cqw,22px) var(--water),0 0 0 calc(clamp(12px,3.2cqw,22px) + 6px) rgba(62,168,229,.18),0 50px 90px -30px rgba(31,110,163,.7)}
.core-item{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;text-decoration:none;opacity:0;scale:.82;rotate:-8deg;pointer-events:none;transition:opacity .45s ease,scale .7s cubic-bezier(.3,1.35,.5,1),rotate .7s cubic-bezier(.3,1.35,.5,1)}
.core-item.on{opacity:1;scale:1;rotate:0deg;pointer-events:auto}
.core-item img{width:78%;height:78%;object-fit:contain;border-radius:50%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.core-item:hover img{transform:translateY(-6px) scale(1.04)}
.core-cap{position:absolute;left:50%;bottom:-11%;translate:-50% 0;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px;padding:10px 14px 10px 18px;background:var(--ink);color:#fff;white-space:nowrap;box-shadow:0 18px 30px -16px rgba(20,12,54,.6);transition:background-color .3s}
.core-cap small{grid-column:1;font:600 10px var(--font-h);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-2)}
.core-cap b{grid-column:1;font:700 16px/1.1 var(--font-h);letter-spacing:.04em;text-transform:uppercase}
.core-cap svg{grid-column:2;grid-row:1/3;width:20px;height:20px;transition:transform .35s}
.core-item:hover .core-cap{background:var(--orange);color:var(--ink)}
.core-item:hover .core-cap small{color:var(--ink)}
.core-item:hover .core-cap svg{transform:translateX(4px)}
.core-item:focus-visible{outline:3px solid var(--orange);outline-offset:6px}
.shop-orbit{position:absolute;inset:0;animation:ringSpin 60s linear infinite}
/* Büyüme dönüşüm zincirinin SONUNDA (daire yerinde büyür). Önceden ayrı 'scale' özelliği zincirin başına uygulanıyor,
   sahne merkezine göre ölçeklediği için daire yörüngeden dışarı kaçıyor, fare dışarıda kalınca titriyordu */
.orb{position:absolute;left:50%;top:50%;width:17cqw;height:17cqw;margin:-8.5cqw 0 0 -8.5cqw;padding:0;border:0;border-radius:50%;background:#fff;cursor:pointer;transform:rotate(var(--a)) translateX(var(--R)) rotate(calc(-1 * var(--a))) scale(1);box-shadow:0 0 0 1px var(--line),0 16px 30px -14px rgba(20,12,54,.45);transition:transform .4s cubic-bezier(.3,1.3,.5,1),box-shadow .35s}
.orb-in{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;animation:ringSpin 60s linear infinite reverse}
.orb img{width:100%;height:100%;object-fit:contain;padding:13%;box-sizing:border-box}
.orb:hover,.orb:focus-visible{z-index:1;transform:rotate(var(--a)) translateX(var(--R)) rotate(calc(-1 * var(--a))) scale(1.12);box-shadow:0 0 0 3px var(--water),0 20px 34px -14px rgba(20,12,54,.55);outline:none}
.orb.on{box-shadow:0 0 0 3px var(--orange),0 0 0 9px rgba(238,124,0,.16),0 20px 34px -14px rgba(20,12,54,.5)}
.shop-stage:hover .shop-orbit,.shop-stage:hover .orb-in,.shop-stage:hover .shop-ring,.shop-stage:focus-within .shop-orbit,.shop-stage:focus-within .orb-in{animation-play-state:paused}
/* Rozet: dönen yazı + ortada paket simgesi */
.shop-badge{position:absolute;right:-2%;top:2%;width:clamp(96px,24cqw,140px);aspect-ratio:1;border-radius:50%;background:var(--orange);color:var(--ink);box-shadow:0 20px 34px -16px rgba(238,124,0,.8);display:grid;place-items:center;z-index:5}
.shop-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:ringSpin 16s linear infinite}
.shop-badge text{font:700 10.5px var(--font-h);letter-spacing:.12em;fill:var(--ink)}
.badge-ico{width:38%;height:38%;display:grid;place-items:center;background:#fff;border-radius:50%;color:var(--ink)}
.badge-ico svg{position:static;width:58%;height:58%;animation:badgeBob 2.4s ease-in-out infinite}
@keyframes badgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (max-width:980px){.shop-grid{grid-template-columns:1fr}.shop-stage{max-width:520px}}
@media (prefers-reduced-motion:reduce){.shop-ring,.shop-orbit,.orb-in,.shop-badge svg,.badge-ico svg{animation:none}}

/* Kesit: katmanlar cümle cümle yukarıdan düşüp yerine oturur (translate; kaydırmadaki ayrılma transform'da), yerleşen kalır */
html.anim .iso-layer{opacity:0;translate:0 -110px;pointer-events:none;transition:opacity .45s ease,translate .95s cubic-bezier(.34,1.45,.55,1),filter .45s}
html.anim .iso-layer.is-placed{opacity:1;translate:0 0;pointer-events:auto}
html.anim .iso-shadow{opacity:0;transition:opacity .6s}
html.anim .iso.has-base .iso-shadow{opacity:1}
.iso-layer.is-placed{cursor:pointer}
.iso-layer:hover .f-edge,.iso-layer:hover polygon{stroke:var(--water)}
.iso-layer:hover .iso-label{fill:#fff}
.iso-layer:hover .iso-lead{stroke:var(--water);stroke-dasharray:none}
/* Beyaz zeminli ürün fotoğrafları diskin / düğmenin tonuna karışır (kare kenar görünmez) */
/* (ürün fotoğraflarının zemini tam beyaz → beyaz disk / düğme / sahne üzerinde kenar görünmez) */
.shop-core{z-index:3}.shop-orbit{z-index:2}
/* Telefon: sol alttaki WhatsApp düğmesi ilk damlayı örtmesin */
@media (max-width:700px){.hero-nav .wrap{padding-left:88px}}

/* Koruma anı: yağmur yalnız son adımdan sonra (.is-protected, kalıcı); damlalar boncuk olup sekiyor, üst katmanda kalkan ışıltısı */
.iso:not(.is-protected) .rain{display:none}
.rain-bead{fill:#bfe5fb;opacity:0;animation:rainBead 2.8s ease-out var(--rd,0s) infinite}
.rain-bead.b2{animation-name:rainBead2}
@keyframes rainBead{0%,52%{opacity:0;transform:translate(0,0)}56%{opacity:1}70%{transform:translate(-16px,-12px)}88%{opacity:.9;transform:translate(-26px,2px)}100%{opacity:0;transform:translate(-30px,6px)}}
@keyframes rainBead2{0%,52%{opacity:0;transform:translate(0,0)}56%{opacity:1}70%{transform:translate(14px,-10px)}88%{opacity:.9;transform:translate(22px,3px)}100%{opacity:0;transform:translate(26px,7px)}}
.iso.is-protected .iso-coat .f-edge{stroke:var(--water);stroke-width:2.2;animation:shieldEdge 2.8s ease-in-out infinite}
.iso.is-protected .iso-coat{animation:shieldGlow 2.8s ease-in-out infinite}
@keyframes shieldEdge{0%,100%{stroke-opacity:.55}50%{stroke-opacity:1}}
@keyframes shieldGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(62,168,229,.35))}50%{filter:drop-shadow(0 0 22px rgba(62,168,229,.8))}}
@media (prefers-reduced-motion:reduce){.rain-bead,.iso.is-protected .iso-coat,.iso.is-protected .iso-coat .f-edge{animation:none}}

/* Zemin hazırlığı (ilk adımlar beton üstünde görünür): kir sıyrılır (.did-0), çatlak tamir edilir (.did-1), köşeye keçe (.did-2) */
.prep .dirt ellipse{fill:#7d7569;opacity:.8}
.prep .crack{fill:none;stroke:#3f3a4c;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.prep .crack-fix{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.prep .felt{fill:none;stroke:#e2c48c;stroke-width:13;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.prep .felt-stitch{fill:none;stroke:#8a6a33;stroke-width:1.3;stroke-dasharray:4 4;opacity:0;transition:opacity .5s ease 1.6s}
.iso.did-2 .felt-stitch{opacity:.8}
html:not(.anim) .prep .felt-stitch{opacity:.8}
.prep .sweep{fill:rgba(255,255,255,.7);opacity:0}
html:not(.anim) .prep .dirt,html:not(.anim) .prep .crack,html:not(.anim) .prep .sweep{display:none}
html:not(.anim) .prep .crack-fix,html:not(.anim) .prep .felt{stroke-dashoffset:0}
.iso.did-0 .dirt ellipse{animation:dirtOff .8s ease-in calc(.9s + var(--di) * .05s) forwards}
.iso.did-0 .sweep{animation:sweepGo 1.2s cubic-bezier(.6,0,.4,1) .6s forwards}
.iso.did-1 .crack-fix{animation:crackFix 1.6s ease .3s forwards}
.iso.did-1 .crack{transition:opacity .6s ease 1.5s;opacity:.12}
.iso.did-2 .felt{transition:stroke-dashoffset 1.5s cubic-bezier(.5,0,.3,1) .3s;stroke-dashoffset:0}
@keyframes dirtOff{to{opacity:0;transform:translate(-26px,-34px)}}
@keyframes sweepGo{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}88%{opacity:.9}100%{opacity:0;transform:translate(267px,133px)}}
@keyframes crackFix{0%{stroke-dashoffset:1;stroke:var(--orange)}65%{stroke-dashoffset:0;stroke:var(--orange)}100%{stroke-dashoffset:0;stroke:#bdb8c7}}
/* O an anlatılan adımın olayı parlar */
.iso[data-step="1"] .crack-fix,.iso[data-step="2"] .felt{filter:drop-shadow(0 0 8px rgba(238,124,0,.75))}
@media (prefers-reduced-motion:reduce){.prep .dirt,.prep .crack,.prep .sweep{display:none}.prep .crack-fix,.prep .felt{stroke-dashoffset:0;animation:none}}

/* ═══ Ürün kategorisi kenar menüsü (izowhite) ═══
   Geniş sütun, büyük başlık; başlığın altında kendini çizen su→turuncu çizgi, damla çizginin ucuna akıp oturur.
   Maddeler arasında ince ayraç; üzerine gelince / seçiliyken alttan su→turuncu çizgi akar (ana sayfadaki uygulama
   talimatı adımları gibi). .layout'un dolgu kısaltması yan boşluğu sıfırlıyordu → 1280 px'te kenara yapışıyordu */
.wrap.layout{padding-left:24px;padding-right:24px}
@media (min-width:981px){.wrap.layout{grid-template-columns:clamp(300px,27vw,400px) minmax(0,1fr);gap:clamp(36px,4vw,64px)}}
.side-box{padding:30px 24px 18px;border-radius:0;top:110px;box-shadow:inset 0 3px 0 var(--ink)}
.side-box h4{position:relative;margin:0 0 12px;padding:0 2px 18px;font:700 clamp(28px,2.3vw,34px)/1 var(--font-h);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.side-box h4::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(30,18,75,.14)}
.side-box h4::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--water),var(--orange));transform-origin:left;animation:sideLine 1.3s cubic-bezier(.65,0,.35,1) .25s backwards}
.side-drop{position:absolute;right:0;bottom:6px;width:11px;height:11px;background:var(--orange);border-radius:0 50% 50% 50%;rotate:45deg;animation:sideDrop 1.3s cubic-bezier(.65,0,.35,1) .25s backwards,sideBob 2.8s ease-in-out 1.6s infinite}
@keyframes sideLine{from{transform:scaleX(0)}}
@keyframes sideDrop{from{right:calc(100% - 11px);opacity:0;background:var(--water)}25%{opacity:1}}
@keyframes sideBob{50%{translate:0 -3px}}
.side-box .tree li+li{border-top:1px solid rgba(30,18,75,.08)}
.side-box .tree li a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 12px 14px 14px;border-radius:0;font:500 16px/1.35 var(--font-b);color:var(--ink);transition:background-color .35s,color .35s,padding-left .4s cubic-bezier(.2,.7,.2,1)}
.side-box .tree li a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:1;background:linear-gradient(90deg,var(--water),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.side-box .tree li a:hover{background:#fff;padding-left:22px}
.side-box .tree li a:hover::after,.side-box .tree li a.on::after{transform:scaleX(1)}
.side-box .tree li a.on{background:var(--ink);color:#fff;font-weight:600;padding-left:22px}
.side-box .tree li a.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.side-box .tree li a small{min-width:28px;height:28px;padding:0 7px;display:grid;place-items:center;border-radius:14px;background:#fff;border:1px solid rgba(30,18,75,.12);color:var(--ink);font:700 13px/1 var(--font-h);transition:background-color .3s,color .3s,border-color .3s}
.side-box .tree li a:hover small{background:var(--water);border-color:var(--water);color:#fff}
.side-box .tree li a.on small{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.side-box .tree li a:focus-visible{outline:2px solid var(--water);outline-offset:-2px}
@media (max-width:980px){.side-box{padding:22px 16px 10px}.side-box h4{font-size:26px}}
@media (prefers-reduced-motion:reduce){.side-box h4::after,.side-drop{animation:none}}

/* Alt satır: sabit WhatsApp (sol) ve başa dön (sağ) düğmeleri telif yazısını / grup logosunu örtmesin */
@media (min-width:701px) and (max-width:1400px){.site-footer .f-bottom .wrap{padding-left:96px;padding-right:96px}}
@media (max-width:700px){.site-footer .f-bottom .wrap{flex-direction:column;align-items:center;text-align:center;gap:14px}.f-links{justify-content:center}.f-links .f-group{margin-left:0}}

/* ═══ Belge mühürleri (çağrı bandı, izowhite) ═══
   İnce çizgiyle ayrılmış sıra; görünür olunca mühürler sırayla basılır (büyükten iner, hafif sekip oturur, halka yayılır);
   çevre yazısı yavaşça döner. Üzerine gelince mühür kalkıp döner, çizgiler suya döner. Logo yüklenirse diskte logo */
.b-cta-certs{--sw:clamp(104px,10vw,132px);margin-top:clamp(40px,5vw,60px);padding-top:clamp(28px,3.5vw,38px);border-top:1px solid rgba(255,255,255,.16)}
.b-cta .certs-title{font:600 13px/1.4 var(--font-h);letter-spacing:.18em;text-transform:uppercase;color:var(--orange-2);margin:0 0 26px}
.certs{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(22px,4.5vw,60px)}
.b-cta.align-right .certs{justify-content:flex-end}
.b-cta:not(.align-center):not(.align-right) .certs{justify-content:flex-start}
.cert-seal{position:relative;display:grid;justify-items:center;gap:14px;color:#fff;text-decoration:none}
.cert-seal svg{width:var(--sw);height:auto;overflow:visible;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.seal-ring{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.2;stroke-dasharray:3 6;transition:stroke .4s}
.seal-band{fill:rgba(20,12,54,.6);stroke:var(--orange);stroke-width:2;transition:stroke .4s}
.seal-spin{transform-origin:60px 60px;animation:ringSpin 36s linear infinite}
.seal-spin text{font:700 9.5px var(--font-h);letter-spacing:.1em;fill:#fff}
.seal-disc{fill:#fff;stroke:var(--orange);stroke-width:3;transition:stroke .4s}
.seal-mark{font:700 31px var(--font-h);fill:var(--ink);letter-spacing:.02em;transition:fill .4s}
.seal-logo{position:absolute;top:calc(var(--sw) * .27);left:50%;width:calc(var(--sw) * .46);height:calc(var(--sw) * .46);translate:-50% 0;object-fit:contain;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.cert-cap{display:grid;justify-items:center;gap:3px;text-align:center}
.cert-cap b{font:700 19px/1 var(--font-h);letter-spacing:.08em}
.cert-cap small{font-size:13px;color:#d9d3ca}
.cert-seal::before{content:"";position:absolute;top:0;left:50%;width:var(--sw);aspect-ratio:1;translate:-50% 0;border-radius:50%;border:2px solid var(--orange);opacity:0;pointer-events:none}
.cert-seal:hover svg,.cert-seal:focus-visible svg{transform:translateY(-6px) rotate(-6deg)}
.cert-seal:hover .seal-logo{transform:translateY(-6px) rotate(-6deg)}
.cert-seal:hover .seal-ring{stroke:var(--water)}
.cert-seal:hover .seal-band,.cert-seal:hover .seal-disc{stroke:var(--water)}
.cert-seal:hover .seal-mark{fill:var(--orange)}
.cert-seal:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
html.anim .b-cta-certs .cert svg,html.anim .b-cta-certs .seal-logo{opacity:0}
html.anim .b-cta-certs .cert-cap{opacity:0;translate:0 10px;transition:opacity .5s ease,translate .6s cubic-bezier(.2,.7,.2,1)}
html.anim .b-cta-certs.in .cert svg,html.anim .b-cta-certs.in .seal-logo{animation:sealStamp .75s var(--d,0ms) both}
html.anim .b-cta-certs.in .cert-seal::before{animation:sealRipple .9s ease-out calc(var(--d,0ms) + .42s)}
html.anim .b-cta-certs.in .cert-cap{opacity:1;translate:0 0;transition-delay:calc(var(--d,0ms) + .45s)}
@keyframes sealStamp{0%{opacity:0;scale:1.75;rotate:-22deg;animation-timing-function:cubic-bezier(.55,0,.9,.5)}55%{opacity:1;scale:.93;rotate:2deg;animation-timing-function:ease-out}78%{scale:1.04;rotate:-1deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes sealRipple{0%{opacity:.9;scale:.9}100%{opacity:0;scale:1.45}}
@media (prefers-reduced-motion:reduce){.seal-spin{animation:none}}
/* Mühürlü çağrı bandı geniş ekranda yatay: solda başlık / metin / buton, sağda dikey çizgiyle ayrılmış mühürler; bölüm
   alçalır (dev görünmez). Arka plan görseli kaydırmada kendi hızında kayar (site.js --py) */
@media (min-width:981px){
  .b-cta.has-certs{padding:clamp(64px,6.5vw,96px) 0}
  .b-cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,5vw,96px)}
  .b-cta.has-certs .b-cta-inner{margin:0;max-width:600px;text-align:left}
  .b-cta.has-certs .buttons{justify-content:flex-start}
  .b-cta.has-certs h2{font-size:clamp(38px,4.2vw,62px)}
  .b-cta.has-certs .b-cta-certs{margin:0;padding:6px 0 6px clamp(32px,4vw,64px);border-top:0;border-left:1px solid rgba(255,255,255,.18)}
  .b-cta.has-certs .certs-title{text-align:left}
  .b-cta.has-certs .certs{justify-content:flex-start}
  .b-cta.has-certs::after{width:min(6vw,90px)}
}
@media (max-width:980px){.b-cta.has-certs .b-cta-certs{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}}

/* ═══ Logo (izowhite): büyük, satır içi SVG. Her sayfa yüklenişinde açılış (html.logo-intro): çatı zeminden yükselir,
   arka çatı kayar, harfler düşer, damla iner ve sekip oturur, WHITE soldan açılır, alt çizgi uzar; sonra durur.
   Üzerine gelince damla bir kez zıplar ═══ */
header.site .wrap{height:100px}
.logo{display:block;line-height:0}
.logo img,.logo-svg{height:70px;width:auto}
.logo-svg{display:block;aspect-ratio:347.1/124.1;overflow:visible}
header.site .logo-svg{transition:height .45s cubic-bezier(.2,.7,.2,1)}
header.site.is-scrolled .wrap{height:74px}
header.site.is-scrolled .logo img,header.site.is-scrolled .logo-svg{height:50px}
@media (max-width:980px){header.site .wrap,header.site.is-scrolled .wrap{height:76px}.logo img,.logo-svg,header.site.is-scrolled .logo-svg{height:52px}}
.logo-svg *{fill-rule:evenodd}
.lg-roof{fill:var(--orange)}
.lg-roof2,.lg-i,.lg-z,.lg-o,.lg-drop,.lg-line,.lg-r{fill:var(--ink)}
.lg-wfill{fill:#fff}
.lg-stripes line{stroke:var(--ink);stroke-width:.8731}
.lg-r{font:10.94px Arial,Helvetica,sans-serif}
.lg-roof,.lg-roof2,.lg-i,.lg-z,.lg-o,.lg-drop,.lg-line,.lg-white{transform-box:fill-box}
.lg-drop{transform-origin:50% 100%}
.logo:hover .lg-drop{animation:lgBob .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes lgBob{40%{transform:translateY(-9px) scale(.92,1.08)}70%{transform:scale(1.12,.9)}}
html.logo-intro header.site .lg-roof{transform-origin:50% 100%;animation:lgRise .8s cubic-bezier(.2,.8,.3,1.12) .1s both}
html.logo-intro header.site .lg-roof2{animation:lgSlide .6s cubic-bezier(.2,.7,.2,1) .5s both}
html.logo-intro header.site .lg-i{animation:lgFall .55s cubic-bezier(.3,1.45,.5,1) .65s both}
html.logo-intro header.site .lg-z{animation:lgFall .55s cubic-bezier(.3,1.45,.5,1) .75s both}
html.logo-intro header.site .lg-o{animation:lgFall .55s cubic-bezier(.3,1.45,.5,1) .85s both}
html.logo-intro header.site .lg-drop{animation:lgDrip .95s 1.05s both}
html.logo-intro header.site .lg-line{transform-origin:0 50%;animation:lgLine .8s cubic-bezier(.65,0,.35,1) .95s both}
html.logo-intro header.site .lg-white{animation:lgWipe .75s cubic-bezier(.65,0,.35,1) 1.1s both}
html.logo-intro header.site .lg-r{animation:lgFade .4s 1.7s both}
@keyframes lgRise{from{transform:scaleY(.05);opacity:0}35%{opacity:1}}
@keyframes lgSlide{from{transform:translateX(-26px);opacity:0}}
@keyframes lgFall{from{transform:translateY(-34px);opacity:0}55%{opacity:1}}
@keyframes lgDrip{0%{transform:translateY(-34px) scale(.5,1.3);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}50%{transform:translateY(0) scale(.9,1.12);opacity:1;animation-timing-function:ease-out}66%{transform:scale(1.28,.78)}84%{transform:translateY(-3px) scale(.95,1.06)}100%{transform:none;opacity:1}}
@keyframes lgWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lgLine{from{transform:scaleX(0)}}
@keyframes lgFade{from{opacity:0}}

/* ═══ Kurumsal metin bölümleri (izowhite) ═══
   Koyu bant (misyon): üst etiket turuncu ve okunur. Sekmeler (vizyon / değerler / kalite): büyük başlık yazısı, seçilende
   alttan su→turuncu çizgi akar (kategori menüsü ve uygulama talimatıyla aynı dil); içerik maddeleri ferah */
.values .eyebrow{color:var(--orange-2);font-size:15px;letter-spacing:.2em}
.b-tabs{margin-top:clamp(50px,6vw,80px)}
.b-tabs .tabs-pd{gap:clamp(18px,3vw,44px);border-bottom:1px solid rgba(30,18,75,.14)}
.b-tabs .tabs-pd button{position:relative;padding:16px 2px;border-bottom:0;font:700 clamp(19px,1.7vw,24px)/1 var(--font-h);letter-spacing:.05em;text-transform:uppercase;color:rgba(30,18,75,.45);transition:color .3s}
.b-tabs .tabs-pd button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--water),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.b-tabs .tabs-pd button:hover{color:var(--ink)}
.b-tabs .tabs-pd button:hover::after{transform:scaleX(.35)}
.b-tabs .tabs-pd button.on{color:var(--ink)}
.b-tabs .tabs-pd button.on::after{transform:scaleX(1)}
.b-tabs .tab-pane{padding:34px 0 10px;font-size:17px;line-height:1.7}
.b-tabs .tab-pane.on{animation:tabIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes tabIn{from{opacity:0;translate:0 10px}}
.b-tabs .rich ul{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
.b-tabs .rich li{position:relative;padding-left:28px}
.b-tabs .rich li::before{content:"";position:absolute;left:4px;top:.55em;width:10px;height:10px;background:var(--water);border-radius:0 50% 50% 50%;rotate:45deg}
.b-tabs .rich h3{font:700 22px/1.2 var(--font-h);text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin:28px 0 10px}
@media (prefers-reduced-motion:reduce){.b-tabs .tab-pane.on{animation:none}}

/* Alt bilgi logosu: beyaz kutu yok; logo koyu zemin için beyaz ve tonları (eski izowhite.com'daki beyaz kullanım gibi).
   Çatı beyaz, arka çatı yarı saydam, WHITE harflerinin çizgileri zemin renginde; üzerine gelince damla zıplar, çatı turuncuya döner */
.f-logo.f-logo-svg{background:none;padding:0;border-radius:0}
.f-logo-svg .logo-svg{height:64px}
.logo-svg--light .lg-roof{fill:#fff;transition:fill .4s}
.logo-svg--light .lg-roof2{fill:rgba(255,255,255,.5)}
.logo-svg--light .lg-i,.logo-svg--light .lg-z,.logo-svg--light .lg-o{fill:#fff}
.logo-svg--light .lg-drop{fill:rgba(255,255,255,.78);transition:fill .4s}
.logo-svg--light .lg-wfill{fill:rgba(255,255,255,.92)}
.logo-svg--light .lg-stripes line{stroke:var(--deep)}
.logo-svg--light .lg-line{fill:rgba(255,255,255,.35)}
.logo-svg--light .lg-r{fill:rgba(255,255,255,.7)}
.f-logo-svg:hover .lg-roof{fill:var(--orange)}
.f-logo-svg:hover .lg-drop{fill:var(--water)}

/* ═══ Sosyal medya düğmeleri: her ağ kendi marka renginde (Instagram degrade, LinkedIn mavisi …), beyaz simge.
   Üzerine gelince yükselir, marka renginde ışık; üst bantta küçük renkli kutular ═══ */
.social a{--brand:#555;--glow:rgba(0,0,0,.35);position:relative;color:#fff!important;background:var(--brand)!important;border:0!important;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,filter .35s}
.social a svg{position:relative;z-index:1}
.social a::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);translate:-120% 0;transition:translate .6s cubic-bezier(.2,.7,.2,1)}
.social a:hover{transform:translateY(-3px);box-shadow:0 10px 22px -8px var(--glow);filter:saturate(1.15)}
.social a:hover::after{translate:120% 0}
.social a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.social .s-instagram{--brand:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);--glow:rgba(214,36,159,.55)}
.social .s-linkedin{--brand:#0a66c2;--glow:rgba(10,102,194,.6)}
.social .s-facebook{--brand:#1877f2;--glow:rgba(24,119,242,.6)}
.social .s-x{--brand:#000;--glow:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.social .s-youtube{--brand:#ff0000;--glow:rgba(255,0,0,.55)}
.social .s-tiktok{--brand:#010101;--glow:rgba(37,244,238,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.site-footer .social{gap:12px}
.site-footer .social a{width:44px;height:44px}
.site-footer .social a svg{width:20px;height:20px}
.topbar .social{gap:6px}
.topbar .social a{width:24px;height:24px}
.topbar .social a svg{width:14px;height:14px}
.topbar .social a:hover{transform:translateY(-1px)}

/* Uygulama talimatı: daireler kutunun dikey ortasında (ray site.js'te ilk ve son dairenin ortasına oturur); başa dönüşte
   katmanlar ters sırayla tek tek yukarı hızlanarak kalkar (giriş yaylı düşüş, çıkış sade) */
.flow-step button{align-items:center}
html.anim .is-rewinding .iso-layer{transition:opacity .5s ease .1s,translate .65s cubic-bezier(.55,0,.8,.35),filter .45s}
/* Sol taraf başa dönerken geçişsiz (no-anim, site.js) */
.flow.no-anim .flow-water,.flow.no-anim .flow-drop,.flow.no-anim .flow-ico,.flow.no-anim .flow-tx,.flow.no-anim .flow-tx::after,.flow.no-anim .flow-no{transition:none!important}

/* Koyu bant içinde madde listesi (ör. misyon): numaralı büyük maddeler, geniş ekranda iki sütun; madde başında turuncu
   çerçeve yazılı numara, üstte ince çizgi; görünür olunca sırayla belirir */
.values ul{list-style:none;margin:6px 0 0;padding:0;counter-reset:vm;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(30px,4vw,64px)}
.values li{counter-increment:vm;position:relative;padding:22px 0 22px 64px;border-top:1px solid rgba(255,255,255,.14);font:600 clamp(19px,1.7vw,24px)/1.3 var(--font-h);letter-spacing:.01em}
.values li::before{content:counter(vm,decimal-leading-zero);position:absolute;left:0;top:18px;font:700 34px/1 var(--font-h);color:transparent;-webkit-text-stroke:1px var(--orange-2)}
.values li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--water),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.values li:hover::after{transform:scaleX(1)}
html.anim .values .reveal li{opacity:0;translate:0 14px;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
html.anim .values .reveal.in li{opacity:1;translate:0 0}
.values .reveal.in li:nth-child(2){transition-delay:.1s}.values .reveal.in li:nth-child(3){transition-delay:.2s}.values .reveal.in li:nth-child(4){transition-delay:.3s}.values .reveal.in li:nth-child(5){transition-delay:.4s}.values .reveal.in li:nth-child(6){transition-delay:.5s}
.values .wrap{max-width:1180px}
@media (max-width:760px){.values ul{grid-template-columns:1fr}.values li{padding-left:54px}.values li::before{font-size:28px}}

/* Koyu bant yazısında fare maskesi: imlecin altındaki harfler fıstık yeşili (yazı rengi degradeden; maske yarıçapı --mr) */
@property --mr{syntax:'<length>';inherits:true;initial-value:0px}
.values{--pistachio:#a6c95e;--mr:0px;transition:--mr .45s cubic-bezier(.2,.7,.2,1)}
.values.is-lit{--mr:110px}
.values li,.values p.big{background:radial-gradient(circle var(--mr) at var(--mx,-999px) var(--my,-999px),var(--pistachio) 0,var(--pistachio) calc(100% - 1.5px),#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (hover:none){.values li,.values p.big{background:none;color:#fff}}

/* ═══ Ürün kategorileri — şeritler (izowhite) ═══
   Yan yana dikey şeritler; arkada betimleyici görsel (karartılmış). Açık şerit genişler (flex-grow), görsel canlanır ve
   yakınlaşmadan çıkar, alttan su yükselir, içerik belirir. Kapalı şeritte büyük çerçeve numara ve dikey ad.
   Telefonda alt alta akordeon (yükseklik geçişi). */
.pcs{padding:clamp(60px,7vw,100px) 0 clamp(70px,8vw,110px)}
.pcs-head{flex-direction:column;align-items:center;text-align:center}
.pcs-row{display:flex;gap:10px;height:clamp(460px,40vw,580px)}
.pcs-item{position:relative;flex:1 1 0;min-width:0;overflow:hidden;isolation:isolate;background:var(--deep);cursor:pointer;
  transition:flex-grow .75s cubic-bezier(.2,.7,.2,1)}
.pcs-item.on{flex-grow:5.2;cursor:default}
.pcs-item::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:3;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s}
.pcs-item.on::before{transform:scaleX(1)}
.pcs-item::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(20,12,54,.94) 0%,rgba(20,12,54,.55) 45%,rgba(20,12,54,.25) 100%);transition:background-color .6s}
.pcs-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) brightness(.62);scale:1.18;
  transition:filter .8s ease,scale 1.4s cubic-bezier(.2,.7,.2,1)}
.pcs-item.on .pcs-bg{filter:none;scale:1}
.pcs-item:not(.on):hover .pcs-bg{filter:grayscale(.2) brightness(.75)}
.pcs-item.is-cover .pcs-bg{object-fit:contain;padding:12%;background:#fff}
.pcs-water{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(62,168,229,.55),rgba(62,168,229,0));translate:0 100%;transition:translate 1.1s cubic-bezier(.2,.7,.2,1) .1s}
.pcs-item.on .pcs-water{translate:0 0}
.pcs-num{position:absolute;left:22px;top:24px;z-index:2;font:700 clamp(40px,3.4vw,56px)/1 var(--font-h);color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.55);transition:-webkit-text-stroke-color .5s,translate .6s}
.pcs-item.on .pcs-num{-webkit-text-stroke-color:var(--orange-2)}
.pcs-vname{position:absolute;left:50%;bottom:28px;z-index:2;writing-mode:vertical-rl;rotate:180deg;translate:-50% 0;white-space:nowrap;
  font:700 18px/1 var(--font-h);letter-spacing:.08em;text-transform:uppercase;color:#fff;max-height:calc(100% - 120px);overflow:hidden;text-overflow:ellipsis;transition:opacity .35s}
.pcs-item.on .pcs-vname{opacity:0}
.pcs-body{position:absolute;left:0;bottom:0;z-index:2;width:min(480px,62vw);padding:0 clamp(24px,2.4vw,40px) clamp(26px,2.6vw,40px);
  opacity:0;translate:0 24px;pointer-events:none;transition:opacity .35s ease,translate .5s cubic-bezier(.2,.7,.2,1)}
.pcs-item.on .pcs-body{opacity:1;translate:0 0;pointer-events:auto;transition:opacity .6s ease .35s,translate .8s cubic-bezier(.2,.7,.2,1) .3s}
.pcs-body h3{margin:0 0 16px;font:700 clamp(28px,2.6vw,42px)/1.02 var(--font-h);text-transform:uppercase;color:#fff}
.pcs-link{color:inherit;text-decoration:none}
.pcs-chips{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:2}
.pcs-chips a{display:inline-block;padding:7px 12px;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:14px;text-decoration:none;backdrop-filter:blur(4px);background:rgba(20,12,54,.25);transition:background-color .25s,color .25s,border-color .25s}
.pcs-chips a:hover{background:#fff;color:var(--ink);border-color:#fff}
.pcs-more{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;background:var(--orange);color:var(--ink);font:700 14px/1 var(--font-h);letter-spacing:.1em;text-transform:uppercase;transition:background-color .25s,gap .3s}
.pcs-more svg{width:18px;height:18px}
.pcs-item.on:hover .pcs-more{background:#fff;gap:14px}
.pcs-item:focus-within{outline:2px solid var(--orange);outline-offset:3px}
@media (max-width:900px){
  .pcs-row{flex-direction:column;height:auto;gap:8px}
  .pcs-item{flex:0 0 auto;height:86px;transition:height .7s cubic-bezier(.2,.7,.2,1)}
  .pcs-item.on{height:min(420px,92vw)}
  .pcs-vname{writing-mode:horizontal-tb;rotate:none;left:96px;top:50%;bottom:auto;translate:0 -50%;max-width:calc(100% - 120px);max-height:none;font-size:17px;line-height:1.15;white-space:normal}
  .pcs-item.on .pcs-vname{opacity:0}
  .pcs-num{top:50%;translate:0 -50%;font-size:40px}
  .pcs-item.on .pcs-num{top:22px;translate:none}
  .pcs-body{width:100%}
}
@media (prefers-reduced-motion:reduce){.pcs-item,.pcs-bg,.pcs-water,.pcs-body{transition:none}}
/* Adımın üzerine gelince (is-quick): katmanlar ve zemin hazırlığı hızlıca o adımın hâline gelir */
html.anim .layers.is-quick .iso-layer{transition:opacity .25s ease,translate .45s cubic-bezier(.3,1.3,.5,1),filter .3s}
.layers.is-quick .prep *{animation-duration:.45s!important;animation-delay:0s!important;transition-duration:.3s!important;transition-delay:0s!important}

/* ═══ Sayfa başlığı / subheader (izowhite) ═══
   Lacivert zemin (başlık görseli varsa: görsel + soldan karartma); başlığın altında damla işaretli slogan; altta sayfa
   zeminine akan, çok ağır kayan su dalgaları.
   Eski şablondaki turuncu üçgen, kısa turuncu çizgi ve ızgara deseni kalktı */
.page-hero{background:var(--deep);isolation:isolate}
.page-hero::before,.page-hero .wrap::after{display:none}
.page-hero .ph::before{display:none}
.page-hero:not(.has-image)::after{display:none}
.page-hero.has-image::after{background:linear-gradient(90deg,rgba(20,12,54,.95) 0%,rgba(20,12,54,.8) 42%,rgba(20,12,54,.35) 100%)}
.page-hero.has-image .ph img.cover{animation:phZoom 14s ease-out both}
@keyframes phZoom{from{scale:1.12}to{scale:1}}
.page-hero .wrap{padding-top:clamp(44px,5vw,70px);padding-bottom:clamp(100px,9vw,136px)}
.page-hero h1{font-size:clamp(40px,5vw,74px);max-width:min(900px,70%)}
.page-hero .ph-slogan{display:flex;align-items:center;gap:12px;margin-top:18px;max-width:640px;font:600 clamp(18px,1.6vw,23px)/1.3 var(--font-h);letter-spacing:.03em;color:#bfe3f8}
.page-hero .ph-slogan svg{flex:none;width:16px;height:21px;fill:var(--water)}
/* ═══ Sahne çizimleri (sayfa başlığının sağında; partials/ph-scene.php) ═══
   Çizgiler tam boylarıyla sırayla çizilir (pathLength=1, --d gecikme); damlalar çizilmez — tek parça, belirerek iner ve
   oturur; dolgular belirir / soldan açılır; araçlar (rulo, mala) kayarak gelir; yağmur, halka ve yaprak sakin döngüde */
.ph-scene{position:absolute;z-index:1;right:24px;bottom:clamp(62px,6.4vw,94px);width:clamp(200px,24vw,360px);height:auto;overflow:visible;pointer-events:none}
.ph-scene .l,.ph-scene .a,.ph-scene .w{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.ph-scene .l{stroke:rgba(255,255,255,.32);stroke-width:3}
.ph-scene .l.t{stroke:rgba(255,255,255,.2);stroke-width:1.8}
.ph-scene .a{stroke:var(--orange-2);stroke-width:3}
.ph-scene .w{stroke:var(--water);stroke-width:3.6}
.ph-scene .f{fill:rgba(62,168,229,.2);stroke:none}
.ph-scene .fo{fill:rgba(238,124,0,.22);stroke:none}
.ph-scene .drop{fill:var(--water);stroke:none;transform-box:fill-box;transform-origin:50% 100%}
.ph-scene .wipe{transform-box:fill-box;transform-origin:0 50%}
.ph-scene .rn{stroke:rgba(150,212,246,.7);stroke-width:2;stroke-linecap:round;opacity:0}
.ph-scene .bd circle{fill:#bfe5fb;opacity:0}
.ph-scene .rip ellipse{fill:none;stroke:rgba(62,168,229,.55);stroke-width:1.2;transform-box:fill-box;transform-origin:center;opacity:0}
.ph-scene .leaf path{fill:#a6c95e;stroke:none}
.ph-scene .leaf .vein{fill:none;stroke:rgba(20,12,54,.45);stroke-width:1}
.ph-scene .leaf{transform-box:fill-box;transform-origin:50% 100%}
.ph-scene .soil circle{fill:rgba(255,255,255,.28)}
.ph-scene .surf path{fill:none;stroke:var(--water);stroke-width:2.6;stroke-linecap:round;animation:surfMove 9s linear infinite}
@keyframes surfMove{to{transform:translateX(-40px)}}
html.anim .ph-scene .l,html.anim .ph-scene .a,html.anim .ph-scene .w{animation:phDraw 1.2s cubic-bezier(.6,.1,.3,1) var(--d,0s) both}
html.anim .ph-scene .f,html.anim .ph-scene .fo,html.anim .ph-scene .soil{animation:phFade 1.2s ease var(--d,0s) both}
html.anim .ph-scene .wipe{animation:phWipe 1.6s cubic-bezier(.6,.1,.3,1) var(--d,0s) both}
html.anim .ph-scene .mv{animation:phSlide 1.6s cubic-bezier(.6,.1,.3,1) var(--d,0s) both}
html.anim .ph-scene .drop{animation:phDrop 1s var(--d,0s) both}
html.anim .ph-scene .leaf{animation:phLeaf 1.4s cubic-bezier(.2,.7,.2,1) var(--d,0s) both,leafSway 5s ease-in-out calc(var(--d,0s) + 1.4s) infinite}
html.anim .ph-scene .surf{animation:phFade 1s ease var(--d,0s) both}
.ph-scene .rn{animation:phRain 3.2s linear var(--d,0s) infinite}
.ph-scene .bd circle{animation:phBead 3.2s ease-out infinite}
.ph-scene .bd circle:nth-child(1){animation-delay:1.6s}.ph-scene .bd circle:nth-child(2){animation-delay:2.15s}.ph-scene .bd circle:nth-child(3){animation-delay:2.7s}.ph-scene .bd circle:nth-child(4){animation-delay:3.25s}.ph-scene .bd circle:nth-child(5){animation-delay:3.8s}
.ph-scene .rip ellipse{animation:phRip 6s ease-out 2.4s infinite}
.ph-scene .rip ellipse:nth-child(2){animation-delay:4.4s}
.ph-scene .rip ellipse:nth-child(3){animation-delay:6.4s}
@keyframes phDraw{from{stroke-dashoffset:1}}
@keyframes phFade{from{opacity:0}}
@keyframes phWipe{from{transform:scaleX(0)}}
@keyframes phSlide{from{transform:translateX(var(--dx,-40px));opacity:0}15%{opacity:1}}
@keyframes phDrop{0%{opacity:0;transform:translateY(-40px) scale(.72,1.16);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  55%{opacity:1;transform:translateY(0) scale(.9,1.1);animation-timing-function:ease-out}
  72%{transform:scale(1.16,.85)}88%{transform:translateY(-2px) scale(.97,1.03)}100%{opacity:1;transform:none}}
@keyframes phLeaf{from{opacity:0;transform:translateY(16px) scale(.4) rotate(-20deg)}}
@keyframes leafSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes phRain{0%{opacity:0;transform:translateY(0)}12%{opacity:.85}78%{opacity:.7;transform:translateY(var(--fall,40px))}84%,100%{opacity:0;transform:translateY(var(--fall,40px))}}
@keyframes phBead{0%,70%{opacity:0;transform:translate(0,0)}76%{opacity:.9}100%{opacity:0;transform:translate(0,-8px)}}
@keyframes phRip{0%{opacity:.85;transform:scale(.5)}70%{opacity:0;transform:scale(3.4)}100%{opacity:0;transform:scale(3.4)}}
.page-hero.has-image::after{background:linear-gradient(90deg,rgba(20,12,54,.95) 0%,rgba(20,12,54,.8) 42%,rgba(20,12,54,.6) 100%)}
/* Telefonda bütün sahneler aynı kuralla: başlığın sağında, kutunun alt çizgisi başlık yazısının alt hizasında
   (sahne başlık kabının içinde; başlık sağda sahne kadar boşluk bırakır) */
@media (max-width:760px){
  .ph-head{position:relative}
  .page-hero h1{padding-right:100px}
  .ph-scene{top:auto;bottom:-2px;right:-6px;width:100px;opacity:.75}
}
@media (prefers-reduced-motion:reduce){.ph-scene .rn,.ph-scene .bd circle,.ph-scene .rip ellipse,.ph-scene .surf path{animation:none}}
/* Altta sayfaya akan dalgalar (en öndeki sayfa zemini renginde); dikkat dağıtmasın diye çok ağır kayar */
.ph-waves{position:absolute;z-index:2;left:0;right:0;bottom:-1px;width:100%;height:clamp(46px,5vw,76px);overflow:hidden;pointer-events:none}
.ph-waves path{animation:waveL 81s linear infinite}
.ph-waves .w1{fill:rgba(62,168,229,.14);animation-duration:126s}
.ph-waves .w2{fill:rgba(255,255,255,.16);animation-name:waveR;animation-duration:99s}
.ph-waves .w3{fill:#fff;animation-duration:81s}
/* Giriş: yol, başlık, slogan sırayla yükselir */
html.anim .page-hero .crumbs,html.anim .page-hero h1{animation:phIn .9s cubic-bezier(.2,.7,.2,1) both}
html.anim .page-hero h1{animation-delay:.12s}
/* Slogan: önce damla yukarıdan belirerek düşer ve yere oturur (hafif ezilir), sonra yazı soldan gelir */
.page-hero .ph-slogan svg{transform-origin:50% 100%}
html.anim .page-hero .ph-slogan svg{animation:sloganDrop .8s .45s both}
html.anim .page-hero .ph-slogan span{animation:sloganText .8s cubic-bezier(.2,.7,.2,1) 1.05s both}
@keyframes sloganDrop{0%{opacity:0;transform:translateY(-38px) scale(.7,1.22);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  58%{opacity:1;transform:translateY(0) scale(.9,1.1);animation-timing-function:ease-out}
  76%{transform:scale(1.22,.8)}90%{transform:translateY(-1px) scale(.97,1.04)}100%{opacity:1;transform:none}}
@keyframes sloganText{from{opacity:0;transform:translateX(-12px)}}
@keyframes phIn{from{opacity:0;translate:0 22px}}
@media (max-width:760px){.page-hero h1{max-width:none}.page-hero .wrap{padding-bottom:96px}}
@media (prefers-reduced-motion:reduce){.ph-waves path,.page-hero.has-image .ph img.cover{animation:none}}

/* ═══ Mobil menü (izowhite) ═══
   Açılınca kutu hafifçe aşağı süzülür, öğeler sırayla soldan gelir; bulunulan sayfa turuncu sol çizgi + açık zemin + turuncu
   yazıyla seçili; hamburger açıkken ✕ olur. Kutu header'ın hemen altına oturur (header boyu değişse de) */
.burger .bl{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .2s}
.burger[aria-expanded="true"] .b1{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .b2{opacity:0}
.burger[aria-expanded="true"] .b3{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:980px){
  nav.main{display:block;top:100%;visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s linear .4s}
  nav.main.open{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
  nav.main > ul > li{opacity:0;translate:-22px 0;transition:opacity .35s ease,translate .5s cubic-bezier(.2,.7,.2,1)}
  nav.main.open > ul > li{opacity:1;translate:0 0}
  nav.main.open > ul > li:nth-child(1){transition-delay:.06s}nav.main.open > ul > li:nth-child(2){transition-delay:.12s}
  nav.main.open > ul > li:nth-child(3){transition-delay:.18s}nav.main.open > ul > li:nth-child(4){transition-delay:.24s}
  nav.main.open > ul > li:nth-child(5){transition-delay:.3s}nav.main.open > ul > li:nth-child(6){transition-delay:.36s}
  nav.main.open > ul > li:nth-child(7){transition-delay:.42s}nav.main.open > ul > li:nth-child(n+8){transition-delay:.48s}
  nav.main > ul > li > a{position:relative;transition:color .25s,background-color .25s,box-shadow .25s,padding-left .3s}
  nav.main > ul > li > a.on,nav.main .sub a.on{color:var(--orange-d);background:var(--paper);box-shadow:inset 4px 0 0 var(--orange);padding-left:20px}
  nav.main > ul > li > a:active{background:var(--paper)}
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){nav.main,nav.main > ul > li{transition:none}}

/* ═══ Ürün ve kategori kartları (izowhite): görsel kahraman — büyük, beyaz zeminde, kenarlara yakın; alt kutu sade
   (beyaz, turuncu üst çizgi); aynı satırdaki kartlar eşit boy, düğmeler hep en altta hizalı ═══ */
.prod{border-radius:0;border:1px solid rgba(30,18,75,.1)}
.prod .img{background:#fff}
.prod .img img{width:100%;height:100%;object-fit:contain;scale:1.1}
.prod .body{padding:16px 18px 18px;gap:6px;border-top:3px solid var(--orange)}
.prod h3{font:700 19px/1.15 var(--font-h);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.prod:hover{border-color:rgba(30,18,75,.18)}
.sectors .cards{align-items:stretch}
.sectors .card{background:#fff;border:1px solid rgba(30,18,75,.1);color:var(--ink)}
.sectors .card .ph{aspect-ratio:1}
.sectors .card .ph img.cover{padding:3%;scale:1.08}
.sectors .card .body{display:flex;flex-direction:column;padding:18px 22px 22px;background:#fff;border-top:3px solid var(--orange)}
.sectors .card:hover .body{background:var(--paper)}
.sectors .card h3{font-size:21px;margin:4px 0 12px;min-height:2.2em;color:var(--ink)}
.sectors .card h3 a{color:inherit}
.sectors .card ul{margin-bottom:18px}
.sectors .card li a{color:var(--muted);border-bottom-color:rgba(30,18,75,.1)}
.sectors .card li a:hover{color:var(--ink)}
.sectors .card .btn{margin-top:auto;align-self:flex-start}
.sectors .card:hover{box-shadow:0 22px 40px -22px rgba(20,12,54,.4)}

/* Kaydırdıkça beliren parçalar (site.js data-rv): yumuşak yükseliş; görseller hafif büyükten oturur */
html.anim [data-rv].reveal{transform:translateY(26px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.anim [data-rv].reveal.in{transform:none}
html.anim .image-block[data-rv].reveal,html.anim .block-image[data-rv].reveal,html.anim .about-side > figure[data-rv].reveal{transform:translateY(26px) scale(1.03)}
html.anim .image-block[data-rv].reveal.in,html.anim .block-image[data-rv].reveal.in,html.anim .about-side > figure[data-rv].reveal.in{transform:none}

/* Dil seçici açılır listesi: kutu sağ üstten süzülerek açılır / kapanır, diller sırayla gelir (Arapça eklenince o da) */
.lang-list.is-js{display:block;visibility:hidden;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .2s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s}
.lang-menu.open .lang-list.is-js{visibility:visible;opacity:1;transform:none;transition:opacity .2s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.lang-list.is-js li{opacity:0;translate:10px 0;transition:opacity .2s ease,translate .3s cubic-bezier(.2,.7,.2,1)}
.lang-menu.open .lang-list.is-js li{opacity:1;translate:0 0}
.lang-menu.open .lang-list.is-js li:nth-child(1){transition-delay:.05s}.lang-menu.open .lang-list.is-js li:nth-child(2){transition-delay:.1s}
.lang-menu.open .lang-list.is-js li:nth-child(3){transition-delay:.15s}.lang-menu.open .lang-list.is-js li:nth-child(n+4){transition-delay:.2s}
.lang-current .caret{transition:transform .3s cubic-bezier(.2,.7,.2,1)}

/* Şablonda tek tek beliren kartlar (blog yazıları, iletişim kartları) sırayla gelsin */
.post-grid .post.reveal:nth-child(3n+2),.c-card.reveal:nth-child(2){transition-delay:.1s}
.post-grid .post.reveal:nth-child(3n+3),.c-card.reveal:nth-child(3){transition-delay:.2s}
/* Kurumsal metin bölümü: .about-grid'in dolgu kısaltması .wrap'in yan boşluğunu sıfırlıyordu (telefonda metin kenara yapışıyordu) */
.wrap.about-grid{padding-left:24px;padding-right:24px}
@media (max-width:980px){.wrap.about-grid{padding-top:56px;padding-bottom:56px;gap:36px}}
/* Telefonda alt bilgi menüleri iki sütun */
@media (max-width:600px){.site-footer .f-grid > div:not(.f-contact-col) > ul:not(.social){display:block;columns:2;column-gap:24px}.site-footer .f-grid > div:not(.f-contact-col) > ul:not(.social) li{break-inside:avoid;padding-bottom:10px}}
/* Sosyal medya düğmeleri yuvarlak köşeli */
.social a,.site-footer .social a{border-radius:10px!important}
.topbar .social a{border-radius:6px!important}

/* Telefonda alt bilginin marka bloğu (logo, tanıtım, sosyal düğmeler) ortalı */
@media (max-width:600px){
  .site-footer .f-grid > div:first-child{text-align:center}
  .site-footer .f-grid > div:first-child .f-logo{display:inline-block}
  .site-footer .f-grid > div:first-child .social{justify-content:center}
}
/* Kategori sayfası (solda menü): ürünler ikili sırada, büyük; telefonda tek sütun */
.layout .list-main .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.layout .list-main .prod h3{font-size:22px}
.layout .list-main .prod .body{padding:18px 22px 22px}
@media (max-width:560px){.layout .list-main .prod-grid{grid-template-columns:1fr}}

/* Üst menüde alışveriş sepeti (online mağaza): arama düğmesiyle aynı kutu, turuncu; birkaç saniyede bir kıpırdar ve
   köşedeki nokta nabız gibi atar; üzerine gelince lacivert */
.cart{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--orange);background:var(--orange);color:#fff;transition:background-color .25s,border-color .25s,color .25s}
.cart svg{transform-origin:50% 90%;animation:cartNudge 4.5s ease-in-out 2s infinite}
.cart-dot{position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--water);box-shadow:0 0 0 2px #fff}
.cart-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--water);animation:cartPing 4.5s ease-out 2s infinite}
.cart:hover{background:var(--ink);border-color:var(--ink)}
.cart:hover svg{animation-play-state:paused}
.cart:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@keyframes cartNudge{0%,78%,100%{transform:none}81%{transform:translateY(-3px) rotate(-12deg)}85%{transform:translateY(-1px) rotate(10deg)}89%{transform:rotate(-6deg)}93%{transform:rotate(3deg)}97%{transform:none}}
@keyframes cartPing{0%,78%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.cart svg,.cart-dot::after{animation:none}}
/* Ürün sayfası "Satın al" (mağazadaki aynı ürüne): sepet simgeli ana düğme; simge birkaç saniyede bir kıpırdar */
.pd-cta .btn-buy svg:first-child{width:19px;height:19px;transform-origin:50% 90%;animation:cartNudge 4.5s ease-in-out 1.5s infinite}
@media (prefers-reduced-motion:reduce){.pd-cta .btn-buy svg:first-child{animation:none}}
.pd-cta-top{margin:4px 0 22px}

/* Ürün sayfası: görsel kutusu sitenin geri kalanı gibi köşeli ve beyaz, ürün büyük; açıklama sekmeleri ile alt bilgi arası boşluk */
.pd .gallery .main{border-radius:0;background:#fff;border:1px solid rgba(30,18,75,.1)}
.pd .gallery .main img{width:100%;height:100%;scale:1.06}
.pd-tabs{margin-top:clamp(40px,5vw,64px);padding-bottom:clamp(60px,7vw,100px)}
.pd-tabs .tab-pane{max-width:980px}
.pd-tabs .rich table{width:100%;border-collapse:collapse;margin:8px 0;font-size:16px}
.pd-tabs .rich td{padding:10px 14px;border:1px solid rgba(30,18,75,.12)}
.pd-tabs .rich td[colspan]{background:var(--paper);font:700 15px var(--font-h);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pd-tabs .rich tr td:first-child:not([colspan]){width:38%;color:var(--muted)}

/* İletişim ana kartı: "Hemen arayın" tam genişlik, altında WhatsApp ve "Yol tarifi al" eşit iki düğme; simgeler düğme renginde */
.c-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.c-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:0;padding-left:12px;padding-right:12px}
.c-actions .btn:first-child{grid-column:1 / -1}
.c-actions .btn svg{width:17px;height:17px;margin:0;color:currentColor;flex:none}
.c-actions .btn-ghost{color:var(--ink)}

/* ═══ Blog yazısı (makale): içindekiler kutusu; bölüm görselleri metnin içinde, geniş ve köşeli; ara başlıklar ferah ═══ */
.post-toc{margin:6px 0 34px;padding:22px 26px;background:var(--paper);border-left:4px solid var(--orange);position:relative}
.post-toc strong{display:block;margin-bottom:12px;font:700 15px var(--font-h);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.post-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;columns:2;column-gap:32px}
.post-toc li{counter-increment:toc;break-inside:avoid;padding:6px 0}
.post-toc a{display:flex;gap:10px;color:var(--ink);text-decoration:none;font-size:15px;transition:color .25s}
.post-toc a::before{content:counter(toc,decimal-leading-zero);font:700 14px/1.5 var(--font-h);color:var(--orange-d);flex:none}
.post-toc a:hover{color:var(--orange-d)}
.article .body h2{scroll-margin-top:110px;margin-top:10px}
.article .body figure,.article .body .block-image{margin:34px 0 22px}
.article .body figure img,.article .body .block-image img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0}
.article .body .block-divider{margin:38px 0}
@media (max-width:640px){.post-toc ol{columns:1}.post-toc{padding:18px 18px}}

/* Ürün sayfası renk seçenekleri: yuvarlak renk kutucukları (şeffaf dama desenli); üzerine gelince kalkar, turuncu halka;
   her biri mağazada o rengin sayfasına gider */
.pd-colors{margin:22px 0 22px}
.pd-colors-label{display:block;margin-bottom:12px;font:700 13px var(--font-h);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.pd-colors ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 18px}
.pd-colors a{display:grid;justify-items:center;gap:7px;text-decoration:none;color:var(--muted);font-size:13px;transition:color .25s}
.pd-colors .sw{display:block;width:40px;height:40px;border-radius:50%;background:var(--sw,#ddd);box-shadow:inset 0 0 0 1px rgba(30,18,75,.15),0 0 0 3px #fff,0 0 0 4px rgba(30,18,75,.12);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pd-colors .sw-clear{background:repeating-conic-gradient(#e6e8ec 0% 25%,#fff 0% 50%) 50% / 12px 12px}
.pd-colors a:hover{color:var(--ink)}
.pd-colors a:hover .sw,.pd-colors a:focus-visible .sw{transform:translateY(-3px) scale(1.06);box-shadow:inset 0 0 0 1px rgba(30,18,75,.15),0 0 0 3px #fff,0 0 0 5px var(--orange)}


/* ═══ Blog: dergi listesi (blocks/content-list-journal.php) — en yeni yazı geniş vitrin, diğerleri ızgara; üzerine gelince
   kart yükselir, görsel yakınlaşır, altta turuncu çizgi açılır ═══ */
.journal{display:grid;gap:clamp(26px,3vw,40px)}
.jr-feature,.jr-card{position:relative;display:grid;color:var(--ink);text-decoration:none;background:#fff;border:1px solid var(--line);overflow:hidden;
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s}
.jr-feature::after,.jr-card::after{content:"";position:absolute;left:0;bottom:0;z-index:2;width:100%;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.6,.1,.3,1)}
.jr-feature:hover,.jr-card:hover{border-color:transparent;box-shadow:0 30px 60px -30px rgba(20,12,54,.4);transform:translateY(-4px)}
.jr-feature:hover::after,.jr-card:hover::after{transform:scaleX(1)}
.jr-media{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--ink-3),var(--deep))}
.jr-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
a:hover > .jr-media img{transform:scale(1.05)}
.jr-media.is-empty .ph-scene{position:absolute;left:50%;top:52%;right:auto;bottom:auto;width:64%;max-width:400px;translate:-50% -50%}
.jr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font:600 12px var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.jr-meta > * + *::before{content:"";display:inline-block;width:4px;height:4px;margin:0 12px;border-radius:50%;background:var(--orange);vertical-align:middle;translate:0 -1px}
.jr-cat{color:var(--orange-d)}
.jr-more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;font:700 15px var(--font-h);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.jr-more svg{width:18px;height:18px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
a:hover .jr-more svg{transform:translateX(6px)}
.jr-feature{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.jr-feature .jr-media{min-height:clamp(300px,31vw,450px)}
.jr-feature .jr-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.6vw,56px);background:var(--paper)}
.jr-feature h2{margin:18px 0 16px;font:700 clamp(30px,3vw,44px)/1.04 var(--font-h);letter-spacing:.005em;color:var(--ink)}
.jr-feature p{margin:0 0 28px;font-size:17px;line-height:1.65;color:var(--muted)}
.jr-feature .jr-more{margin-top:0}
.jr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.jr-card{grid-template-rows:auto 1fr}
.jr-card .jr-media{aspect-ratio:4/3}
.jr-card .jr-body{display:flex;flex-direction:column;padding:20px 22px 24px}
.jr-card .jr-meta{font-size:11px}
.jr-card .jr-meta > * + *::before{margin:0 9px}
.jr-card h3{margin:12px 0 10px;font:700 22px/1.12 var(--font-h);color:var(--ink)}
.jr-card p{margin:0 0 20px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.jr-grid .jr-card.reveal:nth-child(4n+2){transition-delay:.08s}
.jr-grid .jr-card.reveal:nth-child(4n+3){transition-delay:.16s}
.jr-grid .jr-card.reveal:nth-child(4n+4){transition-delay:.24s}
.jr-grid .jr-card.reveal.in:hover{transition-delay:0s}
@media (max-width:1100px){.jr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.jr-feature{grid-template-columns:1fr}.jr-feature .jr-media{min-height:0;aspect-ratio:16/10}}
@media (max-width:560px){.jr-grid{grid-template-columns:1fr}.jr-card h3{font-size:24px}}

/* ═══ Yazı sonu (pages/post.php .post-end): paylaşım şeridi — marka renginde simge düğmeleri, bağlantı kopyalama; önceki /
   sonraki yazı kartları — küçük görsel, yön etiketi, başlık; üzerine gelince lacivert dolgu yön tarafından akar ═══ */
.post-end{max-width:860px;margin:6px auto clamp(70px,8vw,110px);padding:0 24px}
.post-end .share{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-end .share-label{display:inline-flex;align-items:center;gap:12px;margin:0;font:700 16px var(--font-h);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.post-end .share-label::after{content:"";width:26px;height:2px;background:var(--orange)}
.share-list{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sh{--brand:var(--ink);position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;color:#fff;background:var(--brand);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.sh::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);translate:-120% 0;transition:translate .6s cubic-bezier(.2,.7,.2,1)}
.sh svg{position:relative;z-index:1}
.sh:hover{transform:translateY(-3px);box-shadow:0 12px 22px -10px var(--brand)}
.sh:hover::after{translate:120% 0}
.sh-whatsapp{--brand:#25d366}
.sh-x{--brand:#000}
.sh-facebook{--brand:#1877f2}
.sh-linkedin{--brand:#0a66c2}
.sh-email{--brand:var(--ink-3)}
.sh-copy{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px;border:1.5px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:600 14px var(--font-b);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s}
.sh-copy:hover{background:var(--ink);color:#fff}
.sh-copy.is-copied{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.post-end .share-done{font-size:14px;font-weight:600;color:var(--orange-d)}
.post-end .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:none;margin:30px 0 0;padding:0}
.post-end .post-nav.is-single{grid-template-columns:1fr}
.post-nav a.pn{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:18px;padding:14px 20px 14px 14px;border:1px solid var(--line);border-radius:0;
  background:#fff;color:var(--ink);text-align:left;text-decoration:none;overflow:hidden;transition:color .35s,border-color .35s}
.post-nav a.pn::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.6,.1,.3,1)}
.post-nav a.pn > *{position:relative;z-index:1}
.post-nav a.pn:hover{color:#fff;border-color:var(--ink)}
.post-nav a.pn:hover::before{transform:scaleX(1)}
.pn-img{width:92px;aspect-ratio:1;overflow:hidden;background:linear-gradient(135deg,var(--ink-3),var(--deep))}
.pn-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pn:hover .pn-img img{transform:scale(1.08)}
.post-nav .pn-text small{display:block;margin:0 0 6px;font:700 12px var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d);transition:color .35s}
.pn:hover .pn-text small{color:var(--orange-2)}
.pn-text strong{display:block;font:700 20px/1.18 var(--font-h)}
.pn-arrow{display:grid;place-items:center;width:42px;height:42px;border:1.5px solid currentColor;border-radius:50%;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s,color .3s}
.pn-arrow svg{width:18px;height:18px}
.pn:hover .pn-arrow{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.pn-prev:hover .pn-arrow{transform:translateX(-4px)}
.pn-next:hover .pn-arrow{transform:translateX(4px)}
.post-nav a.pn-next{grid-template-columns:auto minmax(0,1fr) 92px;padding:14px 14px 14px 20px;text-align:right}
.post-nav a.pn-next::before{transform-origin:right}
.pn-next .pn-arrow{order:1}
.pn-next .pn-text{order:2}
.pn-next .pn-img{order:3}
@media (max-width:700px){
  .post-end .post-nav{grid-template-columns:1fr;gap:12px}
  .post-nav a.pn,.post-nav a.pn-next{grid-template-columns:72px minmax(0,1fr) auto;gap:14px;padding:12px 14px 12px 12px;text-align:left}
  .pn-img{width:72px}
  .pn-next .pn-img{order:0}.pn-next .pn-text{order:1}.pn-next .pn-arrow{order:2}
  .post-nav a.pn-next::before{transform-origin:left}
  .pn-text strong{font-size:18px}
  .sh-copy span{display:none}.sh-copy{width:42px;padding:0;justify-content:center}
}
/* Yazı üst bilgisi: kategori, tarih, okuma süresi */
.article .meta{gap:0;font:600 13px var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.article .meta > * + *::before{content:"";display:inline-block;width:4px;height:4px;margin:0 12px;border-radius:50%;background:var(--orange);vertical-align:middle;translate:0 -1px}
.article .meta .tag{padding:6px 12px;border-radius:0;background:var(--orange);color:var(--ink);font:700 12px var(--font-b);letter-spacing:.14em}
.article-cover{margin:0 0 34px}
.article-cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
/* Ürün galerisi: yatay sahne görseli (site.js .is-scene) kutuyu tam doldurur */
.pd .gallery .main.is-scene img{width:100%;height:100%;object-fit:cover;scale:1}
.pd .gallery .thumbs button.is-scene{padding:0;overflow:hidden}
.pd .gallery .thumbs button.is-scene img{object-fit:cover}
@media (max-width:560px){.article .meta{font-size:11px;letter-spacing:.06em}.article .meta > * + *::before{margin:0 8px}.article .meta .tag{padding:5px 9px;font-size:11px;letter-spacing:.1em}}

/* ═══ Uygulama talimatı — telefon (kullanıcı: "solda sadece butonlar, sağda animasyon, altta açıklama"): adım daireleri sol
   sütunda (ray ve damla aynı), kesit sağda (katman adları gizli, site.js viewBox'ı levhaya kırpar), seçili adımın numarası ve
   metni altta tek tek belirir. Dairelere de katmanlara da dokunulur. Masaüstünde açıklama kutusu yok (metin adımların içinde) ═══ */
.flow-desc{display:none}
@media (max-width:700px){
  html.js .layers-grid{grid-template-columns:48px minmax(0,1fr);grid-template-areas:"head head" "flow iso" "desc desc" "btns btns";column-gap:14px;row-gap:18px;align-items:center}
  html.js .layers .layers-text > .reveal:first-child h2{margin-bottom:0}
  html.js .layers-text{display:contents}
  html.js .layers-text > .reveal:first-child{grid-area:head}
  html.js .layers .flow{grid-area:flow;margin-top:0;--ik:46px}
  html.js .layers .iso{grid-area:iso;max-width:none;margin:0}
  html.js .layers .flow-desc{grid-area:desc}
  html.js .layers .layers-btns{grid-area:btns;margin-top:0}
  html.js .flow-steps{gap:14px}
  html.js .flow-step button{grid-template-columns:var(--ik);column-gap:0}
  html.js .flow-tx,html.js .flow-no{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.js .iso .iso-label,html.js .iso .iso-lead,html.js .iso .iso-dot{display:none}
  html.js .flow-desc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px;min-height:118px;padding:18px 18px 20px;border:1px solid rgba(62,168,229,.35);background:rgba(255,255,255,.05)}
  .flow-desc::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--water),var(--orange))}
  .flow-desc-no{font:700 40px/.9 var(--font-h);color:transparent;-webkit-text-stroke:1.2px var(--orange-2)}
  .flow-desc-tx{margin:0;font-size:16px;line-height:1.55;color:#fff}
  .flow-desc.is-in .flow-desc-no{animation:descIn .55s cubic-bezier(.2,.7,.2,1) both}
  .flow-desc.is-in .flow-desc-tx{animation:descIn .6s cubic-bezier(.2,.7,.2,1) .08s both}
}
@keyframes descIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ═══ Mobil tutarlılık geçişi (2026-10-25, kullanıcı: "tüm mobili gez, tutarsızlıkları çöz") ═══ */
/* Yazı içi görseller metin sütunu genişliğinde (yazı sayfasının .block-image yan dolgusu görselleri daraltıyordu) */
.article .body .block-image{max-width:none;padding:0}
/* Form gönder düğmesi sitedeki diğer düğmelerle aynı: büyük harf, aynı aralık */
.fx-submit{text-transform:uppercase;letter-spacing:.1em;font-size:15px}
/* Kategori kenar menüsü: telefonda kapalı; başlığın altında seçili kategori (açılır menü gibi) */
.side-toggle{display:none}
@media (max-width:980px){
  .side-box .side-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px 14px 20px;border:0;background:var(--ink);color:#fff;font:600 16px/1.3 var(--font-b);text-align:left;cursor:pointer;box-shadow:inset 4px 0 0 var(--orange)}
  .side-toggle svg{width:20px;height:20px;flex:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .side-box.open .side-toggle svg{transform:rotate(180deg)}
  .side-box .tree{display:none;margin-top:6px}
  .side-box.open .tree{display:block;animation:tabIn .4s cubic-bezier(.2,.7,.2,1)}
  .side-box{padding-bottom:18px}
}
@media (max-width:700px){
  /* Sekmeler (Kurumsal, ürün): kesilmesin, alt satıra geçsin */
  .b-tabs .tabs-pd{flex-wrap:wrap;overflow:visible;column-gap:22px;row-gap:0}
  .b-tabs .tabs-pd button{padding:12px 0;font-size:17px}
  /* Kurumsal metin: öne çıkan ilk paragraf ve gövde telefonda bir kademe küçük */
  .prose .rich p:first-child{font-size:20px;line-height:1.4}
  .prose .rich p{font-size:17px}
  /* Slider: yazısı sağda olan slayt da telefonda diğerleri gibi solda */
  .slide.text-end .content{align-items:flex-start;text-align:left}
  .slide.text-end .kicker{flex-direction:row}
  .slide.text-end .kicker i{transform-origin:left}
  /* Ürün sayfası: Satın al / Bize ulaşın tam genişlik, alt alta */
  .pd-cta{display:grid;gap:12px}
  .pd-cta .btn{width:100%;justify-content:center;margin:0}
  /* İletişim kartı: düğmeler alt alta, aynı genişlik */
  .c-actions{grid-template-columns:1fr}
  /* Blog vitrin kartı: üst bilgi tek satır (kategori telefonda gizli) */
  .jr-feature .jr-cat{display:none}
  .jr-feature .jr-cat + time::before{display:none}
}
/* Çerez bildirimi: sitenin diliyle — köşeli kutu, üstte su–turuncu çizgi, eğik turuncu düğme */
.site-cookie{background:var(--deep);color:#d8d4e8;border-radius:0;box-shadow:0 30px 60px -20px rgba(20,12,54,.6)}
.site-cookie-box{border-radius:0;padding:22px 22px 20px;border-top:3px solid var(--orange)}
.site-cookie a{color:var(--orange-2);text-underline-offset:3px}
.site-cookie-btn{border-radius:0;padding:12px 26px;font:700 14px var(--font-h);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);clip-path:polygon(var(--cut,10px) 0,100% 0,calc(100% - var(--cut,10px)) 100%,0 100%)}
.site-cookie-btn:hover{background:var(--orange-2)}
.site-cookie-btn.is-ghost{color:#fff;clip-path:none}
@media (max-width:560px){.site-cookie-box{left:12px;right:12px;bottom:12px;max-width:none}}
/* Alt bilgi yasal bağlantıları: telif satırında küçük */
.f-links .f-legal{font-size:13px}
.f-links{gap:6px 18px;flex-wrap:wrap}
@media (max-width:700px){.site-footer .f-bottom .wrap{flex-direction:column;gap:12px;text-align:center}.f-links{justify-content:center}}
@media (max-width:700px){.f-links .f-group{flex-basis:100%;display:flex;justify-content:center;margin:8px 0 0}.f-links .f-legal{font-size:12.5px}}