/* =====================================================================
   TASARIM 15 · Nar
   Kırmızı, beyaz ve siyah karışımı; eğik katmanlı hero görselleri ve akan panel bölümü.
   Renkleri ve oranları aşağıdaki :root bloğundan değiştirebilirsiniz.
   ===================================================================== */
:root{
  --bg:#ffffff;
  --bg2:#f5f5f6;
  --surf:#ffffff;
  --surf2:#efeff1;
  --line:#e4e4e7;
  --line-s:#c4c4c9;
  --fg:#101013;
  --fg2:#45454d;
  --fg3:#75757f;
  --acc:#d81324;
  --acc2:#ff3b30;
  --on-acc:#ffffff;
  --wa:#25d366;
  --on-wa:#ffffff;
  --wrap:1240px;
  --gut:clamp(18px,4.5vw,44px);
  --sect:clamp(58px,7.5vw,116px);
  --rad:0px;
  --rad-s:0px;
  --rad-l:0px;
  --img-rad:0px;
  --bw:1px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --fh:'Bricolage Grotesque',system-ui,sans-serif;
  --fb:'DM Sans',system-ui,sans-serif;
  --fm:ui-monospace,SFMono-Regular,Menlo,monospace;
  --hw:700;
  --hls:-.02em;
  --hlh:1.08;
  --xl:clamp(2.5rem,6.6vw,4.9rem);
  --h1:clamp(1.85rem,3.4vw,2.9rem);
  --h2:clamp(1.35rem,2.3vw,1.95rem);
  --ew:600;
  --els:.2em;
  --ett:uppercase;
  --efs:.7rem;
  --sh:none;
  --sh-l:none;
  --btn-rad:0px;
  --btn-pad:14px 24px;
  --btn-fs:.82rem;
  --btn-w:600;
  --btn-ls:.04em;
  --btn-tt:none;
  --kart-bg:var(--surf);
  --kart-line:var(--line);
  --gal-ar:3/4;
  --gal-min:218px;
}

/* ============ 0 · sıfırlama ============ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--fb);font-size:16px;
  line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}
/* overflow-x:hidden gövdeyi kaydırma kabı yapıyor ve yapışkan başlığı
   kaydırma sırasında titretiyor; destekleyen tarayıcıda clip kullanılır. */
@supports (overflow-x:clip){body{overflow-x:clip}}
body.no-scroll{overflow:hidden}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}
::selection{background:var(--acc);color:var(--on-acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1.12em;height:1.12em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.i .i--f{stroke:none}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--acc);
  color:var(--on-acc);padding:13px 22px;font-weight:600}
.skip:focus{left:12px;top:12px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============ 1 · tipografi ============ */
h1,h2,h3,h4{font-family:var(--fh);font-weight:var(--hw);letter-spacing:var(--hls);
  line-height:var(--hlh)}
.h-xl{font-family:var(--fh);font-size:var(--xl);font-weight:var(--hw);
  letter-spacing:var(--hls);line-height:var(--hlh)}
.h-1{font-size:var(--h1)}
.h-2{font-size:var(--h2)}
.eyebrow{font-family:var(--fm);font-size:var(--efs);font-weight:var(--ew);
  letter-spacing:var(--els);text-transform:var(--ett);color:var(--acc)}
.lead{color:var(--fg2);font-size:clamp(.97rem,1.15vw,1.06rem);max-width:66ch}
.muted{color:var(--fg2)}
.grad{background:linear-gradient(96deg,var(--acc),var(--acc2));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.link{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.87rem;
  color:var(--acc);white-space:nowrap;transition:gap .25s var(--ease)}
.link:hover{gap:15px}
.link .i{width:1em;height:1em}

/* ============ 2 · yerleşim ============ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:var(--sect);position:relative}
.sect--tight{padding-block:calc(var(--sect)*.56)}
.sect--alt{background:var(--bg2)}
main{display:block}
.sect-head{display:grid;gap:14px;margin-bottom:clamp(28px,3.6vw,52px);max-width:78ch}
.sect-head--c{margin-inline:auto;text-align:center;justify-items:center}
.sect-head--sp{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:22px;max-width:none}
.sect-head--sp>div{display:grid;gap:13px;max-width:70ch}

/* ============ 3 · düğmeler ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:var(--btn-pad);border:var(--bw) solid transparent;border-radius:var(--btn-rad);
  font-size:var(--btn-fs);font-weight:var(--btn-w);letter-spacing:var(--btn-ls);
  text-transform:var(--btn-tt);cursor:pointer;white-space:nowrap;line-height:1.15;
  transition:background .22s,color .22s,border-color .22s,transform .22s var(--ease),
    box-shadow .22s;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--acc{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.btn--acc:hover{background:var(--acc2);border-color:var(--acc2)}
.btn--ghost{border-color:var(--line-s);color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg);background:color-mix(in srgb,var(--fg) 7%,transparent)}
.btn--wa{background:var(--wa);color:var(--on-wa);border-color:var(--wa)}
.btn--wa:hover{filter:brightness(1.07)}
.btn--sm{padding:10px 16px;font-size:.76rem}
.btn--block{width:100%}
.btn .i{width:1.05em;height:1.05em}

/* ============ 4 · üst şerit + başlık ============ */
.topbar{background:var(--bg2);border-bottom:var(--bw) solid var(--line);font-size:.76rem;
  color:var(--fg2)}
.topbar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 26px;padding-block:9px}
.topbar__l,.topbar__r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.topbar span,.topbar a{display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:var(--acc)}
.topbar .i{width:.95em;height:.95em;color:var(--acc)}
@media (max-width:860px){.topbar{display:none}}

.head{position:sticky;top:0;z-index:90;background:var(--bg);
  border-bottom:var(--bw) solid transparent;transition:border-color .3s,background .3s,
  box-shadow .3s}
.head.is-stuck{border-color:var(--line);box-shadow:var(--sh)}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:clamp(12px,1.6vw,18px)}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:34px;height:auto}
.brand__name{display:block;font-family:var(--fh);font-size:1.02rem;font-weight:var(--hw);
  letter-spacing:.01em;line-height:1.15}
.brand__name em{font-style:normal;color:var(--acc)}
.brand__sub{display:block;font-family:var(--fm);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg3);margin-top:3px}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.nav a{position:relative;font-size:.86rem;font-weight:500;color:var(--fg2);padding-block:6px;
  transition:color .22s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--acc);transition:right .28s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--fg)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.head__cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:40px;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;border:var(--bw) solid var(--line-s);border-radius:var(--rad-s)}
.burger span{display:block;width:19px;height:2px;background:var(--fg);transition:.3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1060px){
  .nav{display:none}
  .burger{display:flex}
  .head__cta .btn--ghost{display:none}
}
@media (max-width:560px){.head__cta .btn{display:none}.burger{display:flex}}

/* ============ 5 · mobil çekmece ============ */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(8,8,10,.6);opacity:0;
  visibility:hidden;transition:.3s;backdrop-filter:blur(2px)}
.scrim.is-on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:110;width:min(360px,88vw);
  background:var(--surf);border-left:var(--bw) solid var(--line);
  transform:translateX(102%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto}
.drawer.is-on{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;border-bottom:var(--bw) solid var(--line)}
.drawer__x{width:40px;height:40px;display:grid;place-items:center;
  border:var(--bw) solid var(--line);border-radius:var(--rad-s)}
.drawer nav{display:flex;flex-direction:column;padding:10px 22px}
.drawer nav a{padding:15px 0;border-bottom:var(--bw) solid var(--line);font-family:var(--fh);
  font-size:1.12rem;font-weight:600;transition:color .2s,padding-left .25s var(--ease)}
.drawer nav a:hover,.drawer nav a[aria-current]{color:var(--acc);padding-left:8px}
.drawer__foot{margin-top:auto;display:grid;gap:10px;padding:22px}
.drawer__meta{font-size:.78rem;color:var(--fg3);line-height:1.6;margin-top:6px}

/* ============ 6 · rakamlar / şerit ============ */
.statbar{background:var(--fg);color:var(--bg)}
.statbar__in,.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:color-mix(in srgb,currentColor 16%,transparent)}
.statbar__in>div,.stats>div{background:var(--fg);padding:clamp(20px,2.6vw,32px) 18px;
  display:grid;gap:5px;justify-items:center;text-align:center}
.stats{background:var(--line)}
.stats>div{background:var(--bg)}
.statbar__in b,.stats b{font-family:var(--fh);font-size:clamp(1.7rem,3.3vw,2.6rem);
  font-weight:var(--hw);line-height:1;display:flex;align-items:baseline}
.statbar__in b i,.stats b i{font-style:normal;color:var(--acc)}
.statbar__in span,.stats span{font-size:.76rem;letter-spacing:.05em;opacity:.72}
@media (min-width:760px){.statbar__in,.stats{grid-template-columns:repeat(4,1fr)}}

.serit{display:grid;gap:1px;background:var(--line);border:var(--bw) solid var(--line)}
.serit__it{background:var(--surf);display:flex;gap:14px;align-items:flex-start;
  padding:clamp(18px,2.2vw,26px)}
.serit__it .i{width:1.5rem;height:1.5rem;color:var(--acc);margin-top:2px}
.serit__it b{display:block;font-family:var(--fh);font-size:.99rem;font-weight:600}
.serit__it span{display:block;font-size:.82rem;color:var(--fg2);margin-top:3px;line-height:1.5}
@media (min-width:640px){.serit{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.serit{grid-template-columns:repeat(4,1fr)}}

/* ============ 7 · kartlar ============ */
.cards{display:grid;gap:clamp(14px,1.7vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cards--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.card{background:var(--kart-bg);border:var(--bw) solid var(--kart-line);
  border-radius:var(--rad);padding:clamp(20px,2.4vw,30px);display:grid;
  align-content:start;gap:11px;transition:border-color .3s,transform .35s var(--ease),
  box-shadow .3s,background .3s}
.card:hover{border-color:var(--acc);transform:translateY(-4px);box-shadow:var(--sh)}
.card__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--rad-s);
  background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc);margin-bottom:5px}
.card__ic .i{width:1.35rem;height:1.35rem}
.card h3{font-size:1.05rem}
.card p{font-size:.87rem;color:var(--fg2);line-height:1.62}

/* ============ 8 · hizmet ızgarası (bento / kart) ============ */
.bento{display:grid;gap:clamp(12px,1.5vw,20px);grid-template-columns:1fr}
@media (min-width:620px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento .b-2x2{grid-column:span 2;grid-row:span 2}
  .bento .b-2x1{grid-column:span 2}
}
.bento__it{position:relative;overflow:hidden;border-radius:var(--rad);
  border:var(--bw) solid var(--kart-line);background:var(--surf2);min-height:270px;
  display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .35s,border-color .3s}
.bento__it img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease)}
.bento__it::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,12,.05) 22%,rgba(10,10,12,.86) 96%)}
.bento__it:hover{transform:translateY(-4px);box-shadow:var(--sh-l);border-color:var(--acc)}
.bento__it:hover img{transform:scale(1.06)}
.bento__it>*{position:relative;color:#fff;padding-inline:clamp(18px,2vw,26px)}
.bento__no{font-family:var(--fm);font-size:.68rem;letter-spacing:.2em;opacity:.72;
  padding-top:clamp(18px,2vw,26px)}
.bento__it h3{font-size:clamp(1.05rem,1.5vw,1.32rem);margin-top:7px}
.bento__it p{font-size:.85rem;line-height:1.55;opacity:.82;margin-top:8px;max-width:52ch}
.bento__it--lg p{font-size:.88rem}
.bento__go{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;
  color:var(--acc2);padding-bottom:clamp(18px,2vw,26px);margin-top:14px}
.bento__go .i{width:1em;height:1em;transition:transform .25s var(--ease)}
.bento__it:hover .bento__go .i{transform:translateX(5px)}
.bento__hit{position:absolute;inset:0;z-index:3}

/* ============ 9 · öne çıkan işler ============ */
.works{display:grid;gap:clamp(12px,1.5vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr))}
.tile{position:relative;overflow:hidden;border-radius:var(--img-rad);aspect-ratio:3/4;
  border:var(--bw) solid var(--kart-line);background:var(--surf2);display:block;width:100%}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover img{transform:scale(1.07)}
.tile__zoom{position:absolute;top:10px;right:10px;width:36px;height:36px;display:grid;
  place-items:center;border-radius:var(--rad-s);background:rgba(255,255,255,.9);color:#111;
  opacity:0;transform:translateY(-6px);transition:.3s var(--ease)}
.tile:hover .tile__zoom{opacity:1;transform:none}
.tile__cap{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;text-align:left;
  padding:34px 15px 14px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(10,10,12,.88))}
.tile__cap b{font-family:var(--fh);font-size:.9rem;font-weight:600;line-height:1.3}
.tile__cap span{font-size:.72rem;opacity:.76}

/* ============ 10 · ikili düzen ============ */
.split{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:940px){
  .split{grid-template-columns:1fr 1fr}
  .split--art-r>.split__art{order:2}
}
.split__art{position:relative}
.split__art img{width:100%;border-radius:var(--img-rad);object-fit:cover;aspect-ratio:4/5}
.split__art--duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.split__art--duo img:nth-child(2){margin-top:clamp(20px,4vw,52px)}
.split__badge{position:absolute;left:-10px;bottom:-16px;background:var(--acc);color:var(--on-acc);
  padding:14px 20px;border-radius:var(--rad-s);text-align:center;box-shadow:var(--sh)}
.split__badge b{display:block;font-family:var(--fh);font-size:1.5rem;line-height:1}
.split__badge span{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.85;margin-top:4px}
.rail{display:grid;gap:clamp(12px,1.5vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.rail a{display:block;overflow:hidden;border-radius:var(--img-rad);
  border:var(--bw) solid var(--kart-line)}
.rail img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s var(--ease)}
.rail a:hover img{transform:scale(1.06)}

/* ============ 11 · liste, etiket, not ============ */
.ticks{display:grid;gap:11px;margin-top:22px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--fg2)}
.ticks .i{width:1.05rem;height:1.05rem;color:var(--acc);margin-top:4px;stroke-width:2.2}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.pill{display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--pill,999px);
  border:var(--bw) solid var(--line-s);font-size:.75rem;color:var(--fg2);letter-spacing:.02em}
.pill--acc{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
.note{display:flex;gap:13px;align-items:flex-start;padding:16px 20px;border-radius:var(--rad-s);
  background:var(--surf2);border-left:3px solid var(--acc);font-size:.88rem;color:var(--fg2)}
.note .i{width:1.2rem;height:1.2rem;color:var(--acc);margin-top:3px;flex:none}

/* ============ 12 · adımlar ============ */
.steps{display:grid;gap:clamp(14px,1.8vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}
.step{position:relative;padding:clamp(22px,2.5vw,30px);border-radius:var(--rad);
  background:var(--kart-bg);border:var(--bw) solid var(--kart-line);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.step:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:var(--sh)}
.step b{display:block;font-family:var(--fm);font-size:2.1rem;font-weight:700;line-height:1;
  color:color-mix(in srgb,var(--acc) 34%,transparent);margin-bottom:12px}
.step h3{font-size:1.02rem;margin-bottom:9px}
.step p{font-size:.86rem;color:var(--fg2);line-height:1.6}

/* ============ 13 · SSS ============ */
.faq{display:grid;gap:10px;max-width:900px;margin-inline:auto}
.faq__it{border:var(--bw) solid var(--kart-line);border-radius:var(--rad);
  background:var(--kart-bg);overflow:hidden;transition:border-color .3s}
.faq__it:has(.faq__q[aria-expanded="true"]){border-color:var(--acc)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
  padding:clamp(16px,1.9vw,22px) clamp(18px,2vw,26px);text-align:left;
  font-family:var(--fh);font-size:1rem;font-weight:600;line-height:1.4}
.faq__q:hover{color:var(--acc)}
.faq__ic{position:relative;width:20px;height:20px;flex:none}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;background:var(--acc);
  transition:transform .3s var(--ease)}
.faq__ic::before{left:0;right:0;top:9px;height:2px}
.faq__ic::after{top:0;bottom:0;left:9px;width:2px}
.faq__q[aria-expanded="true"] .faq__ic::after{transform:scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{padding:0 clamp(18px,2vw,26px) clamp(18px,2vw,24px);color:var(--fg2);
  font-size:.9rem;line-height:1.72;max-width:76ch}

/* ============ 14 · CTA ============ */
.cta{background:var(--fg);color:var(--bg)}
.cta__in{display:grid;gap:clamp(24px,3vw,48px);align-items:center}
@media (min-width:900px){.cta__in{grid-template-columns:1.35fr 1fr}}
.cta h2{font-size:var(--h1)}
.cta p{margin-top:14px;opacity:.78;max-width:60ch;font-size:.95rem}
.cta .eyebrow{color:var(--acc2)}
.cta__acts{display:grid;gap:11px}
.cta__phone{display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fh);font-size:1.22rem;font-weight:600;padding:10px}
.cta__phone .i{color:var(--acc2)}
.cta .btn--ghost{border-color:color-mix(in srgb,currentColor 32%,transparent);color:inherit}
.cta .btn--ghost:hover{background:color-mix(in srgb,currentColor 12%,transparent);
  border-color:currentColor}

/* ============ 15 · iç sayfa başlığı ============ */
.phero{padding-block:clamp(46px,6vw,86px) clamp(30px,3.6vw,52px);background:var(--bg2);
  border-bottom:var(--bw) solid var(--line);position:relative;overflow:hidden}
.phero__in{max-width:74ch;display:grid;gap:16px}
.phero h1{font-size:var(--xl)}
.phero p{color:var(--fg2);font-size:clamp(.95rem,1.1vw,1.05rem);max-width:64ch}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.76rem;
  color:var(--fg3);margin-top:6px}
.crumbs a:hover{color:var(--acc)}
.crumbs i{font-style:normal;opacity:.5}
.crumbs [aria-current]{color:var(--fg)}

/* ============ 16 · hizmet satırları ============ */
.svc-rows{display:grid;gap:clamp(46px,6vw,104px)}
.svc-row{display:grid;gap:clamp(22px,3vw,54px);align-items:center;scroll-margin-top:110px}
@media (min-width:940px){
  .svc-row{grid-template-columns:1fr 1fr}
  .svc-row:nth-child(even)>.svc-row__art{order:-1}
}
.svc-row__no{font-family:var(--fm);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc);display:block;margin-bottom:14px}
.svc-row h2{font-size:var(--h1);margin-bottom:16px}
.svc-row>div>p{color:var(--fg2);font-size:.95rem;line-height:1.7;max-width:58ch}
.svc-row__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.svc-row__art{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,14px)}
.svc-row__art a{display:block;overflow:hidden;border-radius:var(--img-rad);
  border:var(--bw) solid var(--kart-line)}
.svc-row__art a:first-child{grid-column:span 2}
.svc-row__art img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .7s var(--ease)}
.svc-row__art a:first-child img{aspect-ratio:16/10}
.svc-row__art a:hover img{transform:scale(1.05)}

/* ============ 17 · galeri filtresi ============ */
.filters{position:sticky;top:var(--stick,64px);z-index:60;background:var(--bg);
  border-bottom:var(--bw) solid var(--line)}
.filters__in{display:grid;gap:10px;padding-block:14px}
.chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  border:var(--bw) solid var(--line-s);border-radius:var(--pill,999px);font-size:.8rem;
  font-weight:500;color:var(--fg2);transition:.22s;white-space:nowrap}
.chip small{font-size:.68rem;opacity:.6}
.chip:hover{border-color:var(--fg);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc);
  font-weight:600}
.chip[aria-pressed="true"] small{opacity:.8}
.chip--sub{padding:7px 13px;font-size:.75rem;border-style:dashed}
/* Iki fis satirini ayiran cizgi musteri istegiyle kaldirildi (7 Eylul 2026);
   ayrim artik yalniz bosluk ve alt fislerin kucuk/kesik cercevesiyle. */
.chips--sub{padding-top:2px}

/* Hap kabugunda kategori seridi bagimsiz bir hap: yapiskan degil, kapak
   bandinin bittigi cizginin tam ortasinda duruyor.

   Yapiskanken ust menuye yapisiyordu ve iki hapin tonu yan yana tutmuyordu;
   ayrica birlestikleri yerde ust kose yuvarlatilamiyordu (kosede fotograf
   goruluyordu). Bagimsiz olunca dordu de yuvarlak olabiliyor ve yuzey /
   kenar / golge degerleri dogrudan kabuk hapindan aliniyor, ton farki kalkti.

   Dikey yerlesim iki parcali, cunku "hapi indir ama fotograflari indirme"
   isteniyor:
   1) .filters bos bir kutu, hap icinde flex ile ortalaniyor. Kutunun
      yuksekligi AKISI belirliyor, yani asagidaki izgaranin nereden
      basladigini; hapin merkezi kutunun ortasina denk geldigi icin bu
      ayni zamanda hapi yuksekligin yarisi kadar asagi indiriyor.
   2) translateY yalnizca hapi indiriyor, akisa dokunmuyor -- fotograflar
      yerinde kaliyor, hapin altindaki bosluk o kadar azaliyor.
   Toplam kayma 20 + 40 = 60 px. Hap fotograf bandinin epeyce altinda,
   izgaranin ustundeki beyaz alanda duruyor.
   Olcuyu hapin kendi yuksekligi degil bu iki deger belirledigi icin fisler
   iki satira sardiginda da kayma ayni kaliyor. */
body:has(.head--pill) .filters{position:relative;z-index:2;top:auto;
  background:transparent;border-bottom:0;height:40px;
  display:flex;justify-content:center;align-items:center}
body:has(.head--pill) .filters__in{width:fit-content;max-width:100%;margin-inline:auto;
  transform:translateY(40px);padding:13px 18px;
  background:var(--surf);border:var(--bw) solid var(--line);border-radius:999px;
  box-shadow:var(--sh)}
body:has(.head--pill) .filters + .sect{padding-top:calc(var(--sect)*.56 + 18px)}
/* translateY akisa dokunmadigi icin hapin altindaki bosluk kayma kadar
   azaliyor; genis ekranda pay bol oldugundan sorun degil, ama ekran
   daraldikca bolum payi (--sect) da kuculuyor ve hap ilk karta yapisiyor.
   1360 px altinda kaymanin tamami geri veriliyor. */
@media (max-width:1360px){
  body:has(.head--pill) .filters + .sect{padding-top:calc(var(--sect)*.56 + 58px)}
}
/* Fisler iki satira sarinca hap uzuyor, hem fotografa hem izgaraya
   yaklasiyordu. Hap kabugunda serit sigmadiginda sarmak yerine yatay
   kayiyor, boylece yukseklik her genislikte tek satir. */
@media (max-width:1000px){
  body:has(.head--pill) .chips{overflow-x:auto;flex-wrap:nowrap;
    justify-content:flex-start;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
}
@media (max-width:620px){
  body:has(.head--pill) .filters__in{border-radius:var(--rad-l);padding:12px 14px}
}

@media (max-width:700px){
  .filters__in{overflow:visible}
  /* Yatay kaydirmali seritte ortalama yapilmaz: icerik tasinca sol bastaki
     fisler kaydirmayla erisilemez hale gelir. */
  .chips{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:5px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
}

/* ============ 18 · galeri ============ */
.gal{display:grid;gap:clamp(9px,1.2vw,16px);
  grid-template-columns:repeat(auto-fill,minmax(min(46%,var(--gal-min)),1fr))}
.gal__it{position:relative;overflow:hidden;border-radius:var(--img-rad);
  aspect-ratio:var(--gal-ar);background:var(--surf2);
  border:var(--bw) solid var(--kart-line);width:100%;display:block;
  transition:transform .35s var(--ease),box-shadow .3s,border-color .3s}
.gal__it img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal__it:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--acc)}
.gal__it:hover img{transform:scale(1.06)}
.gal__cap{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;text-align:left;
  padding:36px 13px 12px;color:#fff;opacity:0;transition:opacity .3s;
  background:linear-gradient(180deg,transparent,rgba(10,10,12,.9))}
.gal__it:hover .gal__cap,.gal__it:focus-visible .gal__cap{opacity:1}
.gal__cap b{font-family:var(--fh);font-size:.84rem;font-weight:600;line-height:1.3}
.gal__cap span{font-size:.68rem;opacity:.8}
@media (hover:none){.gal__cap{opacity:1;padding-top:44px}}
/* Galeri girisi: sekiz kategori kapagi. Kartlar .gal__it'i paylasiyor,
   fark yalniz her zaman acik baslik ve biraz genis sutun -- boylece her
   tasarim kendi galeri kart gorunumunu koruyor. */
.gal--kat{grid-template-columns:repeat(auto-fill,minmax(min(46%,268px),1fr))}
/* Baslik burada hover'a bagli degil, surekli fotografin uzerinde duruyor;
   olculdu, taban degradesi acik kapaklarda 2.55:1'e kadar dusuyordu. Bu
   yuzden kapak kartlarinda ortu daha erken koyuluyor. */
.gal--kat .gal__cap{opacity:1;padding:58px 15px 15px;background:linear-gradient(180deg,rgba(8,8,10,0),rgba(8,8,10,.58) 38%,rgba(8,8,10,.92))}
.gal--kat .gal__cap b{font-size:1.02rem}
.gal--kat .gal__cap span{font-size:.72rem;opacity:.92}
.gal__empty{text-align:center;color:var(--fg3);padding:60px 0}
.gal__more{display:flex;justify-content:center;margin-top:clamp(24px,3vw,40px)}

/* ============ 19 · iletişim ============ */
/* Teklif formu 8 Eylul 2026'da kaldirildi; sayfa tek sutuna indi ve `.contact`
   izgarasi ile butun form stilleri gereksiz kaldi. Dort bilgi kutusu artik sac
   teli cizgiyle ayrilmis tek bir liste degil, ayri ayri kartlar: ikon vurgu
   renginde bir dairenin icinde, baslik kucuk ve sakin bir etiket, asil bilgi
   (telefon, kullanici adi) iri ve koyu. Ikisinin yeri degisti cunku sayfada
   aranan sey numaranin kendisi, "Telefon" kelimesi degil. */
.info{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:1fr;
  max-width:960px;margin-inline:auto}
@media (min-width:640px){.info{grid-template-columns:1fr 1fr}}
.info li{display:flex;gap:16px;align-items:flex-start;padding:clamp(20px,2.4vw,28px);
  background:var(--surf);border:var(--bw) solid var(--kart-line);border-radius:var(--rad);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.info li:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));
  box-shadow:var(--sh);transform:translateY(-2px)}
.info .i{width:1.15rem;height:1.15rem;color:var(--acc);flex:none;box-sizing:content-box;
  padding:11px;border-radius:50%;background:color-mix(in srgb,var(--acc) 12%,transparent)}
.info h4{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:8px}
.info p{font-size:clamp(1rem,1.1vw,1.1rem);font-weight:500;color:var(--fg);line-height:1.5}
.info p a{color:inherit}
.info p a:hover{color:var(--acc)}
/* Ikinci ve ucuncu hat: musteri 8 Eylul 2026'da "yedek" etiketini kaldirtip
   uc numaranin da ayni puntoda yazilmasini istedi. Bu yuzden kural artik yalniz
   satir araligini veriyor; punto, agirlik ve renk `.info p`den geliyor. */
.info .info__alt{margin-top:4px}
.map{border:var(--bw) solid var(--line);border-radius:var(--rad);overflow:hidden;
  background:var(--surf)}
.map iframe{width:100%;height:clamp(280px,42vw,440px);border:0;filter:var(--map-f,none)}
.map__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding:15px clamp(15px,2vw,22px);border-top:var(--bw) solid var(--line)}
.map__bar p{font-size:.85rem;color:var(--fg2)}

/* ============ 20 · alt bilgi ============ */
.foot{background:var(--fg);color:color-mix(in srgb,var(--bg) 82%,transparent);
  padding-block:clamp(46px,5.5vw,80px) 0;font-size:.88rem}
.foot__top{display:grid;gap:clamp(28px,3.4vw,46px);padding-bottom:clamp(32px,4vw,54px)}
@media (min-width:700px){.foot__top{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.foot__top{grid-template-columns:1.7fr 1fr 1.2fr 1.4fr}}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot__brand img{width:36px}
.foot__brand .brand__name{color:var(--bg)}
.foot__top>div>p{line-height:1.72;max-width:44ch;opacity:.72}
.foot h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bg);
  margin-bottom:16px;font-family:var(--fm);font-weight:600}
.foot ul{display:grid;gap:10px}
.foot ul a:hover{color:var(--acc2)}
.foot__ch li{display:flex;gap:11px;align-items:flex-start;line-height:1.55}
.foot__ch .i{width:1.05rem;height:1.05rem;color:var(--acc2);margin-top:4px;flex:none}
.foot__ch+.btn{margin-top:18px}
.foot__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding-block:22px;border-top:1px solid color-mix(in srgb,var(--bg) 16%,transparent);
  font-size:.78rem;opacity:.62}
.foot__bot b{font-weight:600}

/* ============ 21 · yüzen iletişim yığını ============ */
/* Üç düğme de aynı biçim ve ölçüde: eşit daireler, aynı gölge, aynı
   hareket. Sıra yukarıdan aşağı telefon, WhatsApp, Instagram. Etiket
   yalnız üzerine gelince çıkar, böylece yığın sade kalıyor ama düğmenin
   ne yaptığı yine belli oluyor. */
.fabs{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;
  flex-direction:column;align-items:flex-end;gap:12px}
.fabx{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;flex:none;border-radius:50%;color:#fff;
  border:0;padding:0;font:inherit;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.fabx:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.34)}
.fabx:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.fabx .i{width:1.4rem;height:1.4rem}
.fabx>span{position:absolute;right:calc(100% + 12px);white-space:nowrap;
  background:var(--fg);color:var(--bg);font-size:.74rem;font-weight:600;
  padding:7px 13px;border-radius:999px;opacity:0;transform:translateX(6px);
  pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);
  box-shadow:0 8px 20px rgba(0,0,0,.22)}
.fabx:hover>span,.fabx:focus-visible>span{opacity:1;transform:none}
.fabx--tel{background:var(--acc);color:var(--on-acc)}
/* WhatsApp yeşili üstünde beyaz ikon 1.98:1; koyu yeşil ikon 7.3:1 verir. */
.fabx--wa{background:var(--wa);color:#06301d}
.fabx--ig{background:linear-gradient(45deg,#e8632c,#dc2743 40%,#cc2366 70%,#bc1888)}
/* Basa don: sayfanin tepesindeyken gereksiz, o yuzden .kaydi gelene kadar
   gizli. display yerine opacity/visibility, cunku yigin flex ve display:none
   kardeslerin yerini oynatirdi. */
.fabx--yukari{background:var(--surf);color:var(--fg);border:var(--bw) solid var(--line-s);
  box-shadow:0 8px 20px rgba(0,0,0,.18);opacity:0;visibility:hidden;
  transform:translateY(10px) scale(.92);pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
.kaydi .fabx--yukari{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.kaydi .fabx--yukari:hover{transform:translateY(-3px)}
@media (max-width:520px){
  .fabs{right:14px;bottom:14px;gap:10px}
  .fabx{width:50px;height:50px}
  .fabx>span{display:none}
}

/* ============ 21c · başlıktaki ikon düğmeleri ============ */
.hbtn{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;border-radius:50%;color:var(--fg2);
  border:var(--bw) solid var(--line);background:transparent;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.hbtn:hover{color:var(--acc);border-color:var(--acc);
  background:color-mix(in srgb,var(--acc) 10%,transparent)}
.hbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.hbtn .i{width:1.06rem;height:1.06rem}
/* Varsayilan acik tema: ay ikonu gorunur, tiklayinca koyuya gecilir.
   Koyu temada gunes gorunur. Sistem tercihi izlenmiyor. */
.hbtn--tema .tema-ay{display:block}
.hbtn--tema .tema-gunes{display:none}
:root[data-tema="koyu"] .hbtn--tema .tema-ay{display:none}
:root[data-tema="koyu"] .hbtn--tema .tema-gunes{display:block}
@media (max-width:760px){.head__cta .hbtn--ig{display:none}}

/* ============ 22 · lightbox ============ */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,10,.96);display:none;
  flex-direction:column;backdrop-filter:blur(6px)}
.lb.is-on{display:flex}
.lb__bar,.lb__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(14px,3vw,30px);color:#fff;flex:none}
.lb__ct{font-family:var(--fm);font-size:.8rem;opacity:.7}
.lb__x{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);color:#fff;transition:.22s}
.lb__x:hover{background:rgba(255,255,255,.14)}
.lb__stage{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 clamp(8px,2vw,24px);min-height:0;position:relative}
.lb__stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:var(--img-rad)}
.lb__nav{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  transition:.22s}
.lb__nav:hover{background:rgba(255,255,255,.22)}
@media (max-width:640px){
  .lb__stage{padding-inline:4px}
  .lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px}
  .lb__nav--p{left:6px}.lb__nav--n{right:6px}
  .lb__foot{flex-direction:column;align-items:stretch;gap:10px}
  .lb__foot .btn{width:100%}
}

/* ---------- lightbox: sayaç fotoğrafın üstünde, oklar altında ---------- */
/* Sayaç ve tıklama yarıları yer kaplamayan bir örtüde (.lb__kadraj); örtüyü
   main.js görselin ekrandaki kutusuna oturtuyor. Görselin kendi max-width /
   max-height kuralları değişmediği için fotoğraf küçülmüyor. Oklar sahneden
   çıkıp alt şeride indi, yani yatayda da yer yemiyorlar. */
/* Tasarım 1-5'te .lb bir grid ve sütunu `auto`; yani genişliği İÇERİKTEN
   ölçülüyordu. Üst şeride etiket gelince 390 px'lik ekranda kutu 432 px'e
   büyüyüp kapatma düğmesini ve ileri okunu ekran dışında bırakıyordu.
   minmax(0,1fr) sütunu görünüme bağlar. 6-25'te .lb flex, kural etkisiz.
   (Aynı tuzak .lb__stage'de de vardı, oradaki not aşağıda.) */
.lb.is-on{grid-template-columns:minmax(0,1fr)}
/* Üst şerit: ortada konum etiketi, sağda kapatma düğmesi.
   Etiket AKIŞTA duruyor ve şerit onu ortalıyor; kapatma düğmesi akıştan çıkıp
   sağa sabitlendi. Böylece etiketin genişliği ne olursa olsun ortada kalıyor
   ve `margin-inline` düğme için ayrılan payı iki yana eşit koyduğu için
   düğmenin altına GİREMİYOR (mutlak konum + tahmini max-width ile denendi,
   390 px'de çakışıyordu). Uzun alt kategori adı üç noktayla kısalıyor. */
.lb__bar{justify-content:center;position:relative;min-height:56px}
.lb__x{position:absolute;right:var(--lb-pad,clamp(14px,3vw,30px));top:50%;
  transform:translateY(-50%)}
/* Renkler currentColor'dan türetiliyor, sabit beyazdan değil: tasarım 2'nin
   büyütme penceresi AÇIK zeminli (kâğıt), beyaz hap orada görünmezdi.
   color-mix'i tanımayan tarayıcı için önce nötr gri bir taban yazılı. */
.lb__yer{display:flex;align-items:center;gap:10px;min-width:0;
  margin-inline:calc(var(--lb-pad,clamp(14px,3vw,30px)) + 52px);
  padding:8px 17px;border-radius:999px;white-space:nowrap;
  background:rgba(140,140,140,.14);
  background:color-mix(in srgb,currentColor 10%,transparent);
  border:1px solid rgba(140,140,140,.3);
  border-color:color-mix(in srgb,currentColor 22%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 6px 20px rgba(0,0,0,.16);
  backdrop-filter:blur(8px) saturate(1.25);
  -webkit-backdrop-filter:blur(8px) saturate(1.25);
  pointer-events:none}
.lb__kat{flex:none;font-size:.62rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;opacity:1;
  color:color-mix(in srgb,currentColor 74%,transparent)}
.lb__kat::after{content:"·";margin-left:10px;
  color:color-mix(in srgb,currentColor 60%,transparent)}
.lb__alt{font-size:.86rem;font-weight:600;letter-spacing:.005em;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Sayaç: rakamlar tabular, yani ileri geri gezerken hap genişliği oynamıyor.
   Bulunulan kare tam güçte, bölü ve toplam soluk. */
/* color/opacity açıkça yazılıyor: tasarım 1-5'in taban .lb__ct kuralı
   soluk bir gri veriyordu (sayaç 2.7:1'e kadar düşüyordu), motorda da
   opacity:.7 vardı. Renk artık hapın kendi renginden türüyor. */
.lb__ct{flex:none;position:relative;padding-left:13px;opacity:1;color:inherit;
  font-size:.77rem;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.lb__ct::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:14px;
  background:currentColor;opacity:.22}
.lb__ct b{font-weight:650}
.lb__ct i{font-style:normal;margin:0 5px}
.lb__ct i,.lb__ct span{font-weight:400;
  color:color-mix(in srgb,currentColor 72%,transparent)}
/* Kategori ya da alt kategori değişince şerit bir kez parlayıp yerine
   oturuyor; kullanıcı gezerken sınırı geçtiğini böyle fark ediyor. */
.lb__yer.is-yeni{animation:lbYer .55s var(--ease,ease)}
@keyframes lbYer{
  0%{background:color-mix(in srgb,currentColor 30%,transparent);
     border-color:color-mix(in srgb,currentColor 52%,transparent);
     transform:scale(.94)}
  60%{transform:scale(1.02)}
  100%{background:color-mix(in srgb,currentColor 10%,transparent);
     border-color:color-mix(in srgb,currentColor 22%,transparent);
     transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.lb__yer.is-yeni{animation:none}}
@media (max-width:640px){
  .lb__yer{gap:8px;padding:7px 13px;
    margin-inline:calc(var(--lb-pad,14px) + 48px)}
  .lb__kat{font-size:.58rem;letter-spacing:.14em}
  .lb__kat::after{margin-left:8px}
  .lb__alt{font-size:.79rem}
  .lb__ct{font-size:.73rem;padding-left:11px}
}

/* Sol tuşa basılı tutup fotoğrafların üzerinden geçince tarayıcı metin
   seçimi başlatıyor ve görsellerin üstünü ::selection rengiyle boyuyordu.
   Hem ızgara kartlarında hem BÜYÜTME PENCERESİNDE oluyordu; ikisi de düğme
   ve görselden ibaret, seçilecek metin yok. Gövde metni (telefon, adres)
   seçilebilir kalıyor, oraya dokunulmadı. */
.gal__it,[data-lb],.lb{user-select:none;-webkit-user-select:none}
img{user-select:none;-webkit-user-select:none}
/* Izgara sahnede (tasarim 1-5) satir yolu icerikten olculdugu icin buyuk
   fotograf sahneyi tasiriyordu: gorselin max-height:100%'i cozulmeyen bir
   yuzdeye denk geliyordu. minmax(0,1fr) hucreyi kesin olcuye baglar. */
.lb__stage{position:relative;gap:0;overflow:hidden;
  grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.lb__kadraj{position:absolute;left:0;top:0;width:0;height:0;z-index:2;visibility:hidden}
.lb__yari{position:absolute;top:0;bottom:0;width:50%;padding:0;border:0;
  background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lb__yari--p{left:0}
.lb__yari--n{right:0}
.lb__foot{justify-content:center;gap:clamp(10px,3vw,22px);padding-block:10px}
.lb__nav,.lb__nav:hover{position:static;transform:none;width:44px;height:44px}
/* Fotoğrafların sürüklenerek kaydedilmesi ve dokunmatikte uzun basma menüsü
   kapalı; sağ tık menüsünü main.js engelliyor. */
img{-webkit-user-drag:none;-webkit-touch-callout:none}
@media (max-width:640px){
  .lb__foot{flex-direction:row;align-items:center;justify-content:center;gap:10px}
  .lb__foot .btn{width:auto;flex:1 1 auto;min-width:0}
  .lb__nav,.lb__nav:hover{position:static;transform:none}
}

/* ============ 23 · belirme ============ */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.1s}
.js .reveal[data-d="2"]{transition-delay:.2s}
.js .reveal[data-d="3"]{transition-delay:.3s}

/* ============ 24 · yardımcılar ============ */
.glow{position:absolute;width:min(620px,80vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 26%,transparent),transparent 68%);
  top:-14%;right:-12%;pointer-events:none;filter:blur(28px);z-index:0}
.glow--l{right:auto;left:-14%;top:auto;bottom:-10%}
.sect>.wrap{position:relative;z-index:1}

/* ---------- kabuk: merkez ---------- */
.head--merkez .head__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:9px;border-bottom:var(--bw) solid var(--line);font-size:.76rem;color:var(--fg2)}
.head__mini{display:inline-flex;align-items:center;gap:7px}
.head__mini .i{color:var(--acc);width:.95em;height:.95em}
.head--merkez .head__in--m{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(16px,3vw,44px);padding-block:clamp(14px,2vw,22px)}
.head--merkez .brand{flex-direction:column;text-align:center;gap:7px}
.head--merkez .nav--l{justify-content:flex-end}
.head--merkez .nav--r{justify-content:flex-start}
@media (max-width:1060px){
  .head--merkez .head__in--m{grid-template-columns:1fr}
  .head--merkez .brand{flex-direction:row;text-align:left}
  .head--merkez .head__bar .head__mini--c{display:none}
}
@media (max-width:560px){.head--merkez .head__bar .head__mini{display:none}}

/* ---------- kabuk: sol ray ---------- */
.head--rail{position:fixed;left:0;top:0;bottom:0;z-index:95;width:var(--rail,232px);
  display:none;flex-direction:column;gap:20px;padding:26px 22px;background:var(--surf);
  border-right:var(--bw) solid var(--line);overflow-y:auto}
.head--rail .brand{flex-direction:column;align-items:flex-start;gap:12px}
.nav--v{flex-direction:column;align-items:stretch;gap:2px}
.nav--v a{display:flex;align-items:baseline;gap:12px;padding:11px 0;font-size:.95rem;
  border-bottom:var(--bw) solid var(--line)}
.nav--v a i{font-family:var(--fm);font-style:normal;font-size:.66rem;color:var(--fg3);
  letter-spacing:.1em}
.nav--v a[aria-current] i{color:var(--acc)}
.nav--v a::after{display:none}
.rail__bot{margin-top:auto;display:grid;gap:12px}
.rail__tel{display:flex;align-items:center;gap:9px;font-family:var(--fh);font-size:1.02rem;
  font-weight:600}
.rail__tel .i{color:var(--acc)}
.mbar{position:sticky;top:0;z-index:90;background:var(--bg);
  border-bottom:var(--bw) solid var(--line)}
.mbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--gut)}
@media (min-width:1100px){
  body:has(.head--rail){padding-left:var(--rail,232px)}
  .head--rail{display:flex}
  .mbar{display:none}
  body:has(.head--rail) .fabs{right:24px}
  body:has(.head--rail) .filters{top:0}
}

/* ---------- kabuk: yüzen hap ---------- */
.head--pill{background:transparent;border:0;padding-top:14px}
.head--pill .head__in{background:var(--surf);border:var(--bw) solid var(--line);
  border-radius:999px;padding:9px 9px 9px 20px;box-shadow:var(--sh);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.head--pill.is-stuck{box-shadow:none;background:transparent}
.head--pill.is-stuck .head__in{box-shadow:var(--sh-l);
  background:color-mix(in srgb,var(--surf) 88%,transparent)}
.head--pill .brand__sub{display:none}
@media (max-width:620px){.head--pill .head__in{border-radius:var(--rad-l);padding:10px 12px}}

/* ---------- kabuk: blok + kayan şerit ---------- */
.tick{overflow:hidden;background:var(--acc);color:var(--on-acc);
  border-bottom:var(--bw) solid var(--fg)}
.tick__in{display:flex;gap:22px;width:max-content;padding-block:7px;
  font-family:var(--fm);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  animation:kay 34s linear infinite}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.head--blok{border-bottom:3px solid var(--fg)}
.head--blok .head__in{display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;
  padding:0;gap:0}
.head--blok .head__cell{display:flex;align-items:center;padding:14px var(--gut)}
.head--blok .head__cell--b{border-right:3px solid var(--fg)}
.head--blok .head__cell--a{border-left:3px solid var(--fg);gap:10px}
.head--blok .nav{justify-content:center;gap:0}
.head--blok .nav a{padding:14px clamp(10px,1.4vw,20px);border-right:var(--bw) solid var(--line);
  height:100%;display:flex;align-items:center}
.head--blok .nav a:first-child{border-left:0}
.head--blok .nav a::after{inset:auto 0 0 0;right:0;height:4px;transform:scaleX(0);
  transform-origin:left;transition:transform .28s var(--ease)}
.head--blok .nav a:hover::after,.head--blok .nav a[aria-current]::after{transform:none}
@media (max-width:1060px){.head--blok .head__in{grid-template-columns:1fr auto}}

/* ---------- kabuk: asimetrik ---------- */
.head--split .head__in{align-items:stretch;gap:clamp(18px,3vw,50px)}
.head--split .brand{padding-right:clamp(18px,3vw,44px);border-right:var(--bw) solid var(--line)}
.head--split .brand img{width:42px}
.head--split .brand__name{font-size:1.16rem}
.head__col{flex:1;display:grid;gap:8px;align-content:center}
.head__meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;font-size:.74rem;
  color:var(--fg3)}
.head__meta a,.head__meta span{display:inline-flex;align-items:center;gap:6px}
.head__meta .i{width:.92em;height:.92em;color:var(--acc)}
.head__row{display:flex;align-items:center;justify-content:flex-end;gap:clamp(14px,2vw,28px)}
@media (max-width:1060px){.head__meta{display:none}.head--split .brand{border:0;padding:0}}

/* ---------- kabuk: alt rıhtım ---------- */
.dock{position:fixed;left:50%;bottom:20px;z-index:88;transform:translateX(-50%);
  display:none;align-items:center;gap:4px;padding:7px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--fg) 94%,transparent);backdrop-filter:blur(12px);
  box-shadow:0 16px 44px rgba(0,0,0,.3)}
.dock a{padding:9px 16px;border-radius:999px;font-size:.82rem;font-weight:500;
  color:color-mix(in srgb,var(--bg) 74%,transparent);transition:.22s;white-space:nowrap}
.dock a:hover{color:var(--bg);background:color-mix(in srgb,var(--bg) 12%,transparent)}
.dock a[aria-current]{background:var(--acc);color:var(--on-acc)}
.dock__wa{display:grid;place-items:center;width:38px;height:38px;background:var(--wa);
  color:#fff;padding:0}
.dock__wa:hover{background:var(--wa);color:#fff}
@media (min-width:1060px){.dock{display:flex}body:has(.dock) .fabs{display:none}}
.head--dock .head__mini{font-size:.8rem;font-weight:500}

/* ---------- alt bilgi varyantları ---------- */
.foot--dev .foot__dev{display:grid;gap:10px;justify-items:center;text-align:center;
  padding-bottom:clamp(34px,4.5vw,60px);border-bottom:1px solid
  color-mix(in srgb,var(--bg) 16%,transparent);margin-bottom:clamp(34px,4vw,56px)}
.foot__big{font-family:var(--fh);font-size:clamp(2.1rem,6.4vw,4.6rem);font-weight:var(--hw);
  letter-spacing:var(--hls);line-height:1;color:var(--bg);transition:color .25s}
.foot__big:hover{color:var(--acc2)}
.foot--dev .foot__dev p{font-size:.85rem;opacity:.66}
.foot--sutun .foot__top{grid-template-columns:1fr}
@media (min-width:820px){.foot--sutun .foot__top{grid-template-columns:1.8fr 1fr 1.2fr}}
.foot__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.foot__adres{display:flex;flex-wrap:wrap;gap:10px 30px;padding-block:20px;font-size:.8rem;
  border-top:1px solid color-mix(in srgb,var(--bg) 14%,transparent);opacity:.74}
.foot__adres span{display:inline-flex;align-items:center;gap:8px}
.foot__adres .i{width:1em;height:1em;color:var(--acc2)}

/* ================= HERO ORTAK ================= */
.hero{position:relative;overflow:hidden}
.hero__p{color:var(--fg2);font-size:clamp(.97rem,1.2vw,1.09rem);max-width:56ch;line-height:1.72}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.hero .eyebrow{display:block;margin-bottom:clamp(14px,2vw,22px)}
.hero h1{margin:0}

/* ---------- hero: sahne ---------- */
.hero--sahne{min-height:min(90vh,760px);display:flex;align-items:flex-end;
  padding-block:clamp(90px,14vw,180px) clamp(50px,7vw,96px);color:#fff}
.hero--sahne .hero__bg{position:absolute;inset:0;z-index:-2}
.hero--sahne .hero__bg img{width:100%;height:100%;object-fit:cover}
.hero--sahne::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,9,11,.9) 8%,rgba(9,9,11,.6) 52%,rgba(9,9,11,.25))}
.hero--sahne .hero__in{max-width:min(760px,92%)}
.hero--sahne .hero__p{color:rgba(255,255,255,.82)}
.hero--sahne .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero--sahne .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.hero__mini{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:clamp(28px,3.4vw,44px);
  padding-top:22px;border-top:1px solid rgba(255,255,255,.2);font-size:.82rem;
  color:rgba(255,255,255,.72)}
.hero__mini b{font-family:var(--fh);font-size:1.28rem;color:#fff;margin-right:6px}
.hero__cue{position:absolute;right:var(--gut);bottom:26px;font-family:var(--fm);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);
  writing-mode:vertical-rl}
@media (max-width:760px){.hero__cue{display:none}}

/* ---------- hero: ikili ---------- */
.hero--ikili{padding-block:clamp(44px,6vw,96px)}
.hero__grid{display:grid;gap:clamp(30px,4vw,66px);align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero__ticks{margin-top:clamp(26px,3vw,38px);border-top:var(--bw) solid var(--line);
  padding-top:22px}
.hero__art{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero__f{overflow:hidden;border-radius:var(--img-rad);border:var(--bw) solid var(--kart-line)}
.hero__f img{width:100%;height:100%;object-fit:cover}
.hero__f--a{aspect-ratio:3/4}
.hero__f--b{aspect-ratio:3/4;margin-top:clamp(24px,5vw,58px)}
.hero__stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--acc);color:var(--on-acc);width:clamp(96px,13vw,124px);aspect-ratio:1;
  border-radius:50%;display:grid;place-content:center;text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.24);z-index:2}
.hero__stamp b{font-family:var(--fh);font-size:1.9rem;line-height:1}
.hero__stamp b i{font-style:normal}
.hero__stamp span{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  margin-top:4px;opacity:.9;line-height:1.35}

/* ---------- hero: tipografi ---------- */
.hero--yazi{padding-top:clamp(40px,6vw,88px)}
.hero__dev{font-family:var(--fh);font-weight:var(--hw);letter-spacing:var(--hls);
  font-size:clamp(3rem,13vw,10rem);line-height:.86;text-transform:none}
.hero__dev span{display:block;color:var(--acc);padding-left:.09em}
.hero__alt{display:grid;gap:22px;margin-top:clamp(26px,3.4vw,44px);
  padding-top:clamp(22px,2.6vw,34px);border-top:var(--bw) solid var(--line)}
@media (min-width:900px){
  .hero__alt{grid-template-columns:1fr auto;align-items:end;gap:40px}
  .hero__alt .hero__acts{margin-top:0}
}
.hero__strip{display:flex;gap:clamp(8px,1vw,14px);margin-top:clamp(30px,4vw,56px);
  padding-inline:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.hero__strip::-webkit-scrollbar{display:none}
.hero__strip img{flex:0 0 clamp(180px,24vw,320px);aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--img-rad);scroll-snap-align:start;
  border:var(--bw) solid var(--kart-line)}

/* ---------- hero: bölme ---------- */
.hero--bolme{display:grid;min-height:min(88vh,780px)}
@media (min-width:940px){.hero--bolme{grid-template-columns:1fr 1fr}}
.hero__yari{position:relative;display:flex;align-items:center}
.hero__yari--t{padding:clamp(50px,7vw,96px) var(--gut)}
.hero__yari--t .hero__in{max-width:56ch;margin-left:auto;width:100%}
@media (min-width:940px){.hero__yari--t .hero__in{max-width:min(560px,100%);margin-right:clamp(20px,3vw,56px)}}
.hero__yari--g{min-height:clamp(300px,52vw,600px);overflow:hidden;background:var(--surf2)}
.hero__yari--g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__etik{position:absolute;left:0;bottom:0;background:var(--bg);padding:16px 22px;
  border-top:var(--bw) solid var(--line);border-right:var(--bw) solid var(--line)}
.hero__etik b{display:block;font-family:var(--fh);font-size:1rem}
.hero__etik span{display:block;font-size:.74rem;color:var(--fg3);margin-top:3px}

/* ---------- hero: ızgara ---------- */
.hero--izgara{padding-block:clamp(34px,4.5vw,70px)}
.hero__mesh{display:grid;gap:clamp(10px,1.3vw,18px);grid-template-columns:repeat(2,1fr)}
.hero__cell{grid-column:1/-1;padding:clamp(24px,3vw,44px);border-radius:var(--rad);
  background:var(--surf);border:var(--bw) solid var(--kart-line)}
.hero__k{overflow:hidden;border-radius:var(--img-rad);border:var(--bw) solid var(--kart-line)}
.hero__k img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
@media (min-width:820px){
  .hero__mesh{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(120px,15vw)}
  .hero__cell{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;
    justify-content:center}
  .hero__k--1{grid-column:span 2;grid-row:span 1}
  .hero__k--2,.hero__k--3{grid-column:span 1;grid-row:span 1}
  .hero__k--4{grid-column:span 2;grid-row:span 1}
  .hero__k--5{grid-column:span 2;grid-row:span 1}
  .hero__k img{aspect-ratio:auto}
}

/* ---------- hero: kemer ---------- */
.hero--kemer{padding-block:clamp(40px,5vw,80px);text-align:center}
.hero__ust{display:block}
.hero__bas{max-width:20ch;margin-inline:auto}
.hero__ark{display:grid;gap:clamp(26px,3vw,44px);align-items:center;
  margin-top:clamp(30px,4vw,56px);text-align:left}
@media (min-width:1000px){.hero__ark{grid-template-columns:1fr 1.15fr 1fr}}
.hero__kemer{overflow:hidden;border:var(--bw) solid var(--kart-line);
  border-radius:999px 999px var(--rad) var(--rad);background:var(--surf2)}
.hero__kemer img{width:100%;aspect-ratio:3/4;object-fit:cover}
.hero__yan p{color:var(--fg2);font-size:.95rem;line-height:1.72}
.hero__yan--r{display:grid;gap:16px}
.hero__sayi{padding:16px 0;border-bottom:var(--bw) solid var(--line)}
.hero__sayi b{display:block;font-family:var(--fh);font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1;color:var(--acc)}
.hero__sayi span{font-size:.78rem;color:var(--fg3);letter-spacing:.04em}

/* ---------- hero: katman ---------- */
.hero--katman{padding-block:clamp(46px,6vw,100px)}
.hero__stack{position:relative;aspect-ratio:1;max-width:560px;margin-inline:auto;width:100%}
.hero__l{position:absolute;overflow:hidden;border-radius:var(--img-rad);
  border:var(--bw) solid var(--kart-line);box-shadow:var(--sh-l);background:var(--surf)}
.hero__l img{width:100%;height:100%;object-fit:cover}
.hero__l--1{left:0;top:4%;width:58%;aspect-ratio:3/4;transform:rotate(-4deg);z-index:2}
.hero__l--2{right:0;top:0;width:46%;aspect-ratio:3/4;transform:rotate(3.5deg);z-index:1}
.hero__l--3{right:6%;bottom:0;width:52%;aspect-ratio:4/3;transform:rotate(-2deg);z-index:3}
@media (prefers-reduced-motion:no-preference){
  .hero__l{transition:transform .5s var(--ease)}
  .hero__stack:hover .hero__l--1{transform:rotate(-6deg) translateY(-6px)}
  .hero__stack:hover .hero__l--2{transform:rotate(5deg) translateY(-4px)}
  .hero__stack:hover .hero__l--3{transform:rotate(-3deg) translateY(6px)}
}

/* ---------- hero: çarpık ---------- */
.hero--carpik{color:#fff;padding-block:clamp(80px,12vw,170px) clamp(70px,9vw,130px);
  min-height:min(86vh,740px);display:flex;align-items:center}
.hero--carpik .hero__bg{position:absolute;inset:0;z-index:-2}
.hero--carpik .hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__kesik{position:absolute;inset:0;z-index:-1;background:var(--fg);opacity:.9;
  clip-path:polygon(0 0,72% 0,52% 100%,0 100%)}
.hero--carpik::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,9,11,.4),rgba(9,9,11,.75))}
.hero--carpik .hero__in{max-width:min(700px,94%)}
.hero--carpik h1 span{display:block}
.hero--carpik h1 span:nth-child(2){padding-left:.14em;color:var(--acc)}
.hero--carpik .hero__p{color:rgba(255,255,255,.84)}
.hero--carpik .btn--ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.hero__bar{position:absolute;left:0;right:0;bottom:0;overflow:hidden;background:var(--acc);
  color:var(--on-acc);transform:skewY(-1.2deg) translateY(14px)}
.hero__bar-in{display:flex;gap:34px;width:max-content;padding-block:11px;
  font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:.2em;
  animation:kay 26s linear infinite}

/* ---------- hero: mozaik ---------- */
.hero--mozaik{padding-block:clamp(56px,8vw,130px);isolation:isolate}
.hero__mozaik{position:absolute;inset:0;z-index:-2;display:grid;
  grid-template-columns:repeat(4,1fr);gap:6px;opacity:.5}
@media (min-width:900px){.hero__mozaik{grid-template-columns:repeat(8,1fr)}}
.hero__mozaik img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.hero--mozaik::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--bg) 4%,color-mix(in srgb,var(--bg) 62%,transparent),
  var(--bg) 96%)}
.hero__cam{max-width:720px;margin-inline:auto;text-align:center;padding:clamp(28px,4vw,54px);
  border-radius:var(--rad-l);border:var(--bw) solid var(--kart-line);
  background:color-mix(in srgb,var(--surf) 78%,transparent);backdrop-filter:blur(18px);
  box-shadow:var(--sh-l)}
.hero__cam .hero__p{margin-inline:auto}
.hero__cam .hero__acts{justify-content:center}

/* ---------- hero: teknik ---------- */
.hero--teknik{padding-block:clamp(44px,6vw,92px)}
.hero__grid-bg{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
  linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0,#000,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 0,#000,transparent 78%)}
.hero--teknik .wrap{position:relative;z-index:1}
.hero__kunye{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:clamp(26px,3vw,40px);
  background:var(--line);border:var(--bw) solid var(--line)}
.hero__kunye>div{background:var(--bg);padding:13px 16px}
.hero__kunye dt{font-family:var(--fm);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg3)}
.hero__kunye dd{font-size:.9rem;font-weight:600;margin-top:4px}
@media (min-width:560px){.hero__kunye{grid-template-columns:repeat(4,1fr)}}
.hero__pafta{position:relative;padding:clamp(20px,3vw,38px);
  border:var(--bw) dashed var(--line-s);background:var(--surf)}
.hero__pafta img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero__olcu{position:absolute;font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;
  color:var(--acc);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.hero__olcu i{display:block;background:var(--acc)}
.hero__olcu--y{left:0;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.hero__olcu--y i{width:38px;height:1px}
.hero__olcu--x{left:50%;bottom:8px;transform:translateX(-50%)}
.hero__olcu--x i{width:38px;height:1px}
.hero__art-i{position:absolute;right:10px;top:10px;font-family:var(--fm);font-size:.6rem;
  letter-spacing:.2em;color:var(--fg3)}

/* ---------- hero: daire ---------- */
.hero--daire{padding-block:clamp(44px,6vw,96px)}
.hero__orb{position:relative;aspect-ratio:1;max-width:520px;margin-inline:auto;width:100%}
.hero__yuvarlak{position:absolute;inset:8%;border-radius:50%;overflow:hidden;
  border:var(--bw) solid var(--kart-line)}
.hero__yuvarlak img{width:100%;height:100%;object-fit:cover}
.hero__halka{position:absolute;inset:0;animation:don 32s linear infinite}
.hero__halka svg{width:100%;height:100%;overflow:visible}
.hero__halka text{font-family:var(--fm);font-size:9.4px;letter-spacing:.34em;
  fill:var(--acc);text-transform:uppercase}
@keyframes don{to{transform:rotate(360deg)}}
.hero__kucuk{position:absolute;right:-2%;bottom:2%;width:36%;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--img-rad);border:3px solid var(--bg);box-shadow:var(--sh-l)}
.hero__kucuk img{width:100%;height:100%;object-fit:cover}

/* ---------- hero: dev harfler ---------- */
.hero--dev{color:#fff;padding-block:clamp(70px,10vw,150px) clamp(60px,8vw,120px);
  min-height:min(88vh,800px);display:flex;align-items:center}
.hero--dev .hero__bg{position:absolute;inset:0;z-index:-2}
.hero--dev .hero__bg img{width:100%;height:100%;object-fit:cover}
.hero--dev::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,8,10,.66)}
.hero__outline{display:grid;gap:.04em;line-height:.82;font-family:var(--fh);
  font-weight:var(--hw);letter-spacing:var(--hls)}
.hero__outline span{font-size:clamp(2.6rem,12.5vw,9.5rem);color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.8)}
.hero__dolu{font-size:clamp(1.5rem,5.4vw,4rem)!important;color:var(--acc)!important;
  -webkit-text-stroke:0!important}
.hero--dev .hero__alt{border-top-color:rgba(255,255,255,.24)}
.hero--dev .hero__p{color:rgba(255,255,255,.82)}
.hero--dev .btn--ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.hero__kayan{position:absolute;left:0;right:0;bottom:0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.2);background:rgba(8,8,10,.5)}
.hero__kayan div{width:max-content;padding-block:10px;font-family:var(--fm);font-size:.7rem;
  letter-spacing:.24em;color:rgba(255,255,255,.66);animation:kay 40s linear infinite}

/* ---------- hero: pano ---------- */
.hero--pano{padding-block:clamp(40px,5.5vw,88px)}
.hero__pano{display:grid;gap:clamp(14px,2vw,26px);grid-template-columns:1fr}
@media (min-width:900px){.hero__pano{grid-template-columns:repeat(3,1fr)}}
.hero__not{grid-column:1/-1;padding:clamp(24px,3vw,44px);background:var(--surf);
  border:var(--bw) solid var(--kart-line);border-radius:var(--rad);box-shadow:var(--sh)}
@media (min-width:900px){.hero__not{grid-column:span 2;grid-row:span 2}}
.hero__pin{position:relative;background:var(--surf);padding:11px 11px 44px;
  border:var(--bw) solid var(--kart-line);box-shadow:var(--sh);
  transition:transform .35s var(--ease)}
.hero__pin img{width:100%;aspect-ratio:3/4;object-fit:cover}
.hero__pin figcaption{position:absolute;left:0;right:0;bottom:0;padding:11px;
  font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;text-align:center;
  color:var(--fg3);text-transform:uppercase}
.hero__pin--1{transform:rotate(-2deg)}
.hero__pin--2{transform:rotate(1.6deg)}
.hero__pin--3{transform:rotate(1.1deg)}
.hero__pin--4{transform:rotate(-1.4deg)}
.hero__pin:hover{transform:rotate(0) translateY(-6px);z-index:2}

/* ================= HİZMET DÜZENLERİ ================= */
/* kart */
.svc-kart{display:grid;gap:clamp(14px,1.7vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.skart{display:grid;align-content:start;gap:10px;padding-bottom:clamp(18px,2vw,26px);
  border-bottom:var(--bw) solid var(--line);transition:.3s}
.skart__g{display:block;overflow:hidden;border-radius:var(--img-rad);margin-bottom:8px;
  border:var(--bw) solid var(--kart-line)}
.skart__g img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease)}
.skart:hover .skart__g img{transform:scale(1.06)}
.skart__no{font-family:var(--fm);font-size:.66rem;letter-spacing:.2em;color:var(--acc)}
.skart h3{font-size:1.06rem}
.skart p{font-size:.86rem;color:var(--fg2);line-height:1.62}
.skart__ok{display:inline-flex;align-items:center;color:var(--acc);margin-top:4px;
  transition:transform .25s var(--ease)}
.skart:hover{border-color:var(--acc)}
.skart:hover .skart__ok{transform:translateX(6px)}

/* liste */
.svc-liste{border-top:var(--bw) solid var(--line)}
.sliste{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2.4vw,34px);
  padding:clamp(16px,2.2vw,26px) 0;border-bottom:var(--bw) solid var(--line);
  transition:padding-inline .3s var(--ease),background .3s}
.sliste:hover{background:var(--surf2);padding-inline:clamp(10px,1.6vw,22px)}
.sliste__no{font-family:var(--fm);font-size:.74rem;letter-spacing:.14em;color:var(--acc)}
.sliste__ad b{display:block;font-family:var(--fh);font-size:clamp(1.05rem,2vw,1.55rem);
  font-weight:var(--hw);letter-spacing:var(--hls)}
.sliste__ad em{display:block;font-style:normal;font-size:.85rem;color:var(--fg2);margin-top:5px;
  max-width:62ch;line-height:1.55}
.sliste__g{display:none;width:92px;height:70px;overflow:hidden;border-radius:var(--img-rad)}
.sliste__g img{width:100%;height:100%;object-fit:cover}
.sliste__ok{color:var(--acc);display:inline-flex;transition:transform .25s var(--ease)}
.sliste:hover .sliste__ok{transform:translateX(7px)}
@media (min-width:820px){.sliste{grid-template-columns:auto 1fr auto auto}.sliste__g{display:block}}

/* yatay kaydırma */
.svc-kay{margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.svc-kay::-webkit-scrollbar{display:none}
.svc-kay__in{display:flex;gap:clamp(12px,1.6vw,22px);width:max-content;padding-bottom:6px}
.skay{flex:0 0 clamp(250px,30vw,360px);scroll-snap-align:start;display:grid;
  border:var(--bw) solid var(--kart-line);border-radius:var(--rad);overflow:hidden;
  background:var(--kart-bg);transition:border-color .3s,transform .35s var(--ease)}
.skay:hover{border-color:var(--acc);transform:translateY(-4px)}
.skay__g{display:block;overflow:hidden}
.skay__g img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease)}
.skay:hover .skay__g img{transform:scale(1.06)}
.skay__b{display:grid;gap:9px;padding:clamp(18px,2vw,26px)}
.skay__no{font-family:var(--fm);font-size:.66rem;letter-spacing:.2em;color:var(--acc)}
.skay h3{font-size:1.05rem}
.skay p{font-size:.85rem;color:var(--fg2);line-height:1.6}
.skay__ok{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;
  color:var(--acc)}

/* açılan paneller */
.svc-panel{display:grid;gap:8px}
.spanel{position:relative;overflow:hidden;border-radius:var(--rad);min-height:132px;
  display:flex;align-items:flex-end;isolation:isolate;
  border:var(--bw) solid var(--kart-line);transition:flex .5s var(--ease)}
.spanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.spanel::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,12,.15),rgba(10,10,12,.88))}
.spanel__ic{padding:clamp(16px,2vw,24px);color:#fff;width:100%}
.spanel__no{font-family:var(--fm);font-size:.64rem;letter-spacing:.2em;opacity:.75}
.spanel h3{font-size:clamp(1rem,1.5vw,1.22rem);margin-top:6px}
.spanel p{font-size:.84rem;line-height:1.55;opacity:.8;margin-top:7px;max-width:48ch}
@media (min-width:960px){
  .svc-panel{display:flex;height:clamp(360px,44vw,520px);gap:6px}
  .spanel{flex:1;min-height:0}
  .spanel:hover{flex:2.6}
  .spanel p{opacity:0;max-height:0;transition:opacity .4s .12s,max-height .4s}
  .spanel:hover p{opacity:.85;max-height:120px}
  .spanel h3{writing-mode:vertical-rl;transform:rotate(180deg);transition:.4s}
  .spanel:hover h3{writing-mode:horizontal-tb;transform:none}
}

/* brütalist kutular */
.svc-kutu{display:grid;gap:0;border:3px solid var(--fg)}
@media (min-width:640px){.svc-kutu{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.svc-kutu{grid-template-columns:repeat(4,1fr)}}
.skutu{display:grid;align-content:start;gap:9px;padding:clamp(16px,2vw,24px);
  border:1.5px solid var(--fg);background:var(--kart-bg);transition:background .2s,color .2s}
.skutu:hover{background:var(--acc);color:var(--on-acc)}
.skutu__ust{display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--fm);font-size:.66rem;letter-spacing:.18em}
.skutu__ust b{font-size:1.5rem;letter-spacing:0}
.skutu__g{display:block;overflow:hidden;border:1.5px solid var(--fg)}
.skutu__g img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--skutu-f,none);
  transition:filter .3s}
.skutu:hover .skutu__g img{filter:none}
.skutu h3{font-size:1.02rem}
.skutu p{font-size:.83rem;line-height:1.55;opacity:.82}
.skutu__ok{font-family:var(--fm);font-size:.68rem;letter-spacing:.16em;display:inline-flex;
  align-items:center;gap:7px;margin-top:2px}

/* mozaik */
.svc-moz{display:grid;gap:clamp(10px,1.3vw,18px);grid-template-columns:1fr}
@media (min-width:620px){.svc-moz{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .svc-moz{grid-template-columns:repeat(3,1fr);grid-auto-rows:230px}
  .smoz{grid-row:span 1}
  .smoz.m-uzun{grid-row:span 2}
}
.smoz{position:relative;overflow:hidden;border-radius:var(--rad);min-height:230px;
  display:flex;align-items:flex-end;isolation:isolate;border:var(--bw) solid var(--kart-line);
  transition:transform .4s var(--ease)}
.smoz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease)}
.smoz::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,12,.05) 30%,rgba(10,10,12,.85))}
.smoz:hover{transform:translateY(-4px)}
.smoz:hover img{transform:scale(1.06)}
.smoz__b{padding:clamp(16px,2vw,26px);color:#fff}
.smoz__no{font-family:var(--fm);font-size:.64rem;letter-spacing:.2em;opacity:.72}
.smoz h3{font-size:clamp(1.02rem,1.5vw,1.3rem);margin-top:6px}
.smoz p{font-size:.83rem;line-height:1.55;opacity:.8;margin-top:7px;max-width:46ch}

/* dizin / sekme */
.svc-sek{display:grid;gap:0;border-top:var(--bw) solid var(--line)}
.ssek{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(16px,2.6vw,40px);
  padding:clamp(18px,2.4vw,30px) 0;border-bottom:var(--bw) solid var(--line);position:relative}
.ssek__no{font-family:var(--fh);font-size:clamp(1.5rem,3.4vw,2.8rem);font-weight:var(--hw);
  color:var(--line-s);line-height:1;transition:color .3s}
.ssek:hover .ssek__no{color:var(--acc)}
.ssek__t h3{font-size:clamp(1.08rem,2vw,1.5rem)}
.ssek__t p{font-size:.87rem;color:var(--fg2);margin-top:6px;max-width:62ch;line-height:1.6}
.ssek__g{position:absolute;right:0;top:50%;width:clamp(150px,17vw,230px);aspect-ratio:4/3;
  transform:translateY(-50%) scale(.94);opacity:0;pointer-events:none;overflow:hidden;
  border-radius:var(--img-rad);transition:.4s var(--ease);box-shadow:var(--sh-l)}
.ssek__g img{width:100%;height:100%;object-fit:cover}
@media (min-width:1000px){.ssek:hover .ssek__g{opacity:1;transform:translateY(-50%) scale(1)}}
@media (max-width:999px){.ssek__g{display:none}}

/* daire */
.svc-dai{display:grid;gap:clamp(20px,2.6vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));text-align:center}
.sdai{display:grid;gap:11px;justify-items:center}
.sdai__g{display:block;width:clamp(120px,15vw,168px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;border:2px solid var(--kart-line);transition:.35s var(--ease)}
.sdai__g img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.sdai:hover .sdai__g{border-color:var(--acc);transform:translateY(-5px)}
.sdai:hover .sdai__g img{transform:scale(1.08)}
.sdai h3{font-size:1rem;margin-top:4px}
.sdai p{font-size:.83rem;color:var(--fg2);line-height:1.55;max-width:32ch}

/* katman */
.svc-kat{display:grid;gap:clamp(12px,1.6vw,20px)}
@media (min-width:700px){.svc-kat{grid-template-columns:1fr 1fr}}
.skat{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.8vw,22px);align-items:center;
  padding:clamp(14px,1.8vw,20px);border-radius:var(--rad);background:var(--kart-bg);
  border:var(--bw) solid var(--kart-line);position:relative;
  transition:transform .35s var(--ease),box-shadow .3s,border-color .3s}
.skat:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--acc);
  border-color:var(--acc)}
.skat__g{display:block;width:clamp(84px,10vw,118px);aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--rad-s)}
.skat__g img{width:100%;height:100%;object-fit:cover}
.skat__b{display:grid;gap:6px;min-width:0}
.skat__no{font-family:var(--fm);font-size:.64rem;letter-spacing:.2em;color:var(--acc)}
.skat h3{font-size:1.02rem}
.skat p{font-size:.82rem;color:var(--fg2);line-height:1.55}
.skat__ok{color:var(--acc);display:inline-flex;margin-top:2px}

/* ================= İŞLER DÜZENLERİ ================= */
.works--kay{margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);display:block;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.works--kay::-webkit-scrollbar{display:none}
.works__in{display:flex;gap:clamp(10px,1.3vw,18px);width:max-content;padding-bottom:6px}
.works__in .tile{flex:0 0 clamp(220px,26vw,320px);scroll-snap-align:start}
.works--moz{grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){
  .works--moz{grid-template-columns:repeat(4,1fr);grid-auto-rows:min-content}
  .works--moz .w-l{grid-row:span 2}
  .works--moz .w-l{aspect-ratio:3/8}
  .works--moz .w-w{grid-column:span 2;aspect-ratio:3/2}
}
.film{position:relative;background:var(--fg);padding:26px 0;
  margin-inline:calc(var(--gut)*-1);overflow:hidden}
.film__in{display:flex;gap:14px;overflow-x:auto;padding-inline:var(--gut);
  scroll-snap-type:x mandatory;scrollbar-width:none}
.film__in::-webkit-scrollbar{display:none}
.film__k{flex:0 0 clamp(210px,25vw,300px);scroll-snap-align:center;border-radius:0;
  border:0;box-shadow:none}
.film__delik{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--bg) 0 12px,transparent 12px 34px);
  -webkit-mask-image:linear-gradient(#000 0 9px,transparent 9px calc(100% - 9px),#000 calc(100% - 9px) 100%);
  mask-image:linear-gradient(#000 0 9px,transparent 9px calc(100% - 9px),#000 calc(100% - 9px) 100%);
  opacity:.9}
.duvar{display:grid;gap:6px;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.duvar{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.duvar{grid-template-columns:repeat(6,1fr)}}
.duvar__k{aspect-ratio:3/4;border-radius:0}
.duvar__k:nth-child(3n){aspect-ratio:1}

/* ================= PHERO VARYANTLARI ================= */
.phero--g{color:#fff;border-bottom:0;
  padding-block:clamp(70px,9vw,130px) clamp(50px,6vw,88px)}
.phero--g .phero__bg{position:absolute;inset:0;z-index:-2}
/* <picture> satir ici bir kap; blok yapilmazsa icindeki img'nin
   height:100%'i bandin degil picture'in yuksekligine baglanir. */
.phero--g .phero__bg picture{display:block;width:100%;height:100%}
.phero--g .phero__bg img{width:100%;height:100%;object-fit:cover}
.phero--g::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,9,11,.88),rgba(9,9,11,.45))}
.phero--g p{color:rgba(255,255,255,.82)}
.phero--g .crumbs{color:rgba(255,255,255,.6)}
.phero--g .crumbs [aria-current]{color:#fff}
.phero--dev{background:var(--bg);padding-block:clamp(30px,4vw,58px) clamp(34px,4.4vw,66px)}
.phero__big{font-family:var(--fh);font-weight:var(--hw);letter-spacing:var(--hls);
  font-size:clamp(2.4rem,10vw,7.4rem);line-height:.92;margin-top:18px}
.phero--dev .phero__alt{display:grid;gap:14px;margin-top:clamp(22px,3vw,36px);
  padding-top:22px;border-top:var(--bw) solid var(--line);max-width:70ch}
.phero--dev .phero__alt p:last-child{color:var(--fg2)}
.phero--cizgi{background:var(--bg)}
.phero__net{position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
  linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:38px 38px;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.phero--cizgi .wrap{position:relative;z-index:1}
.phero__olcu{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,3vw,40px);
  font-family:var(--fm);font-size:.64rem;letter-spacing:.2em;color:var(--fg3);
  text-transform:uppercase}
.phero__olcu span{flex:1;height:1px;background:var(--line-s)}
.phero--merkez .phero__in{margin-inline:auto;text-align:center;justify-items:center}
.phero--merkez .phero__in p{margin-inline:auto}

/* ================= CTA VARYANTLARI ================= */
.cta--g{color:#fff;background:var(--fg);position:relative;isolation:isolate}
.cta--g .cta__bg{position:absolute;inset:0;z-index:-2}
.cta--g .cta__bg img{width:100%;height:100%;object-fit:cover}
.cta--g::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(9,9,11,.76)}
.cta__in--c{display:grid;justify-items:center;text-align:center;max-width:760px;
  margin-inline:auto;gap:16px}
.cta__in--c p{margin-inline:auto}
.cta__acts--yatay{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta__in--c .cta__acts--yatay{justify-content:center;margin-top:12px}
.cta--serit .cta__in{align-items:center}
@media (min-width:900px){.cta--serit .cta__in{grid-template-columns:1fr auto}}
.cta--serit{padding-block:clamp(34px,4.4vw,64px)}
.cta--kutu{background:var(--fg);color:var(--bg);border-radius:var(--rad-l);
  padding:clamp(28px,4vw,60px)}


/* ============ tasarıma özel ============ */

/* Ana sayfa basligi: Playfair Display (musteri 8 Eylul 2026'da secti).
   Yalnizca hero basligi degisiyor; ic sayfa basliklari, bolum baslikari ve
   kart basliklari Bricolage Grotesque kaliyor, ikisi yan yana durmuyor.
   Harf araligi -.035em'den -.015em'e aciliyor: serif harfler grotesk kadar
   sikistirilinca "rf" ve "st" ciftleri birbirine giriyor.
   Punto da 4.9rem'den 3.85rem'e iniyor: Playfair ayni puntoda grotesk'ten
   genis: "Siz hayal edersiniz" satiri 8.30 em tutuyor, hero yazi kolonu ise
   ~553 px. 78 px'te ilk satir da ikiye bolunup baslik dort satira dagiliyordu;
   61.6 px'te ilk satir tek satirda kaliyor. Satir yuksekligi 1.02 -> 1.06,
   cunku serifin inen ve cikan harfleri ("y" ile "g") daha uzun. */
.hero--katman h1{font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700;letter-spacing:-.015em;line-height:1.06;
  font-size:clamp(2.4rem,4.3vw,3.85rem);margin-bottom:.2em}

:root{--rad:26px;--rad-s:16px;--rad-l:34px;--img-rad:22px;--btn-rad:999px;
  --btn-pad:16px 30px;--hls:-.035em;--hw:800;--stick:80px;--wrap:1220px;
  --sh:0 12px 34px rgba(0,0,0,.10);--sh-l:0 30px 76px rgba(0,0,0,.18)}
body{background:radial-gradient(900px 520px at 88% -6%,#ffe3e1,transparent 62%),
  radial-gradient(760px 480px at -6% 12%,#eeeef0,transparent 60%),var(--bg)}
.eyebrow{background:linear-gradient(96deg,var(--acc),var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sect--alt{background:color-mix(in srgb,var(--bg2) 80%,transparent)}
.head--pill .head__in{background:color-mix(in srgb,#fff 78%,transparent);
  backdrop-filter:blur(16px);border-color:var(--line);box-shadow:var(--sh)}
.btn--acc{background:linear-gradient(96deg,var(--acc),var(--acc2));border-color:transparent;
  box-shadow:0 10px 26px rgba(216,19,36,.30)}
.btn--acc:hover{background:linear-gradient(96deg,var(--acc2),var(--acc))}
.hero__l{border-radius:26px;border:0;box-shadow:var(--sh-l)}
.spanel{border-radius:24px;border-color:transparent;box-shadow:var(--sh)}
.spanel::after{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.88))}
.works__in .tile{border-radius:24px;border-color:transparent;box-shadow:var(--sh)}
.card,.step,.faq__it,.form{border-color:transparent;box-shadow:var(--sh);border-radius:24px}
.card:hover,.step:hover{box-shadow:var(--sh-l)}
.card__ic{border-radius:50%;background:linear-gradient(150deg,var(--acc),var(--acc2));
  color:#fff}
.step b{background:none;color:var(--acc);opacity:1}
.serit{background:transparent;border:0;gap:14px}
.serit__it{border-radius:22px;background:var(--surf);box-shadow:var(--sh)}
.serit__it .i{color:var(--acc2)}
/* Rakam seridi. Eskiden degrade tum ekran boyunca uzanan keskin bir
   banttaydi, icerik ise wrap icinde kaliyordu: iki yanda bos renkli
   alanlar olusuyor, dort kutu birbirinden cok farkli zeminlere denk
   geliyor ve sagdaki kutu neredeyse tam kirmizi uzerinde kaliyordu.
   Artik tasarimin yuvarlak dilini kullanan, wrap icinde duran tek bir
   panel. Ayiraclar 1 px cizgi yerine kenarlik, cunku 2 ve 4 sutunlu
   yerlesimde satir baslarinda cizgi cikmamasi gerekiyor. */
.statbar{background:transparent;color:#fff;padding-block:clamp(6px,1.2vw,16px)}
.statbar__in{gap:0;border-radius:var(--rad-l);overflow:hidden;box-shadow:var(--sh-l);
  background:linear-gradient(112deg,#141419 0%,#8d1523 62%,#d81324 100%)}
.statbar__in>div{background:transparent;padding:clamp(26px,3.2vw,40px) 18px;
  border-left:1px solid rgba(255,255,255,.22)}
.statbar__in>div:nth-child(2n+1){border-left:0}
.statbar__in>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.22)}
@media (min-width:760px){
  .statbar__in>div:nth-child(2n+1){border-left:1px solid rgba(255,255,255,.22)}
  .statbar__in>div:first-child{border-left:0}
  .statbar__in>div:nth-child(n+3){border-top:0}
}
.statbar__in b{color:#fff}
.statbar__in b i{color:rgba(255,255,255,.6)}
.statbar__in span{color:rgba(255,255,255,.8);opacity:1}

/* Rakam kartlari (hakkimizda). 1 px ayirac cizgili duz beyaz kutular
   yerine tasarimin kart dili: yuvarlak kose, yumusak golge ve ustte
   ince vurgu seridi. */
.stats{background:transparent;gap:clamp(10px,1.4vw,16px)}
.stats>div{background:var(--surf);border:var(--bw) solid var(--line);
  border-radius:var(--rad);box-shadow:var(--sh);position:relative;overflow:hidden;
  padding:clamp(26px,3vw,36px) 18px}
.stats>div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(96deg,var(--acc),var(--acc2))}
.stats b{color:var(--fg)}
.stats b i{color:var(--acc)}
.stats span{color:var(--fg3);opacity:1}

/* Rakamin yanindaki "+" isareti. Taban kural onu ayni punto ve tabana
   hizali basiyordu, bu da rakami ikiye bolunmus gosteriyordu; ust
   simge gibi kucultuldu. */
.statbar__in b,.stats b{align-items:flex-start;justify-content:center;line-height:1}
.statbar__in b i,.stats b i{font-size:.46em;font-weight:800;line-height:1;
  margin-left:.1em;margin-top:.12em}

/* Ic sayfa basligi: gorsel kaldirildi, yerine tasarimin kirmizi isigi
   ve ince olcu izgarasi. */
.phero--cizgi{background:var(--bg);
  padding-block:clamp(58px,7.2vw,108px) clamp(38px,4.4vw,66px)}
.phero--cizgi::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(720px 340px at 84% -24%,rgba(255,59,48,.15),transparent 64%)}
.phero__net{opacity:.4}
.phero__olcu b{color:var(--fg2);font-weight:600}
/* Etiket bir <p> oldugu icin taban kural .phero p (0,1,1) onu da
   yakaliyor ve background-clip:text icin gereken color:transparent'i
   eziyordu; degrade yerine duz gri cikiyordu. */
.phero .eyebrow{color:transparent}
.gal__it{border-radius:20px;border-color:transparent;box-shadow:var(--sh)}
.chip{border-radius:999px;background:var(--surf);border-color:var(--line)}
.chip[aria-pressed="true"]{background:linear-gradient(96deg,var(--acc),var(--acc2));
  border-color:transparent}
.split__art img{border-radius:26px;box-shadow:var(--sh-l)}
/* Kapak fotografi bu bandin altinda duruyor (bkz. ytema.PHERO_KAPAK).
   Ortunun iki isi var: kirmizi kimligi tasimak ve beyaz yaziyi okunur
   tutmak. Fotograflarin yazi altina denk gelen en acik pikselleri neredeyse
   beyaz (gokyuzu, tas), olculdu: beyaz govde metninin AA'yi (4.5:1) tutmasi
   icin neredeyse siyah bir ortude en az %56 opaklik gerekiyor, kirmiziya
   yaklastikca bu oran %76'ya cikiyor. Bu yuzden yazinin bittigi yere kadar
   (govde metni %59, h1 %67) koyu kaliniyor, sagda ortu aciliyor ve fotograf
   orada goruluyor. Olcum yontemi: sayfayi yazi gizli halde cekip yazi
   kutusunun ardindaki en acik pikseli okumak. */
/* Ic sayfa basliklari kucultuldu (%18). Cekirdekte .phero h1 ile ana sayfanin
   .h-xl basligi ayni --xl belirtecini paylasiyor; burada yalniz ic sayfa
   ezildi, ana sayfa hero basligi eski puntosunda kaldi.
   Dort sayfa da ayni degeri kullaniyor; hakkimizda daha buyuk gorunuyordu
   cunku metni uzun olup iki satira sariyor, punto farki degildi. */
.phero h1{font-size:clamp(2.05rem,5.4vw,4rem)}

/* Hap kabugunun alti bandin ustune yapisikti: cekirdekte .head--pill yalniz
   padding-top:14px tasiyor, alt pay yok, yani hap 81 px'te bitip fotograf ayni
   pikselde basliyordu. Pay yukaridan alinip asagiya verildi; toplam 14 px
   sabit kaldigi icin baslik yuksekligi ve main.js'in oradan hesapladigi
   --stick degeri degismiyor, altindaki hicbir sey kaymiyor. */
.head--pill{padding-block:6px 8px}

/* Bandin bitis cizgisi sayfadan sayfaya kayiyordu, cunku yukseklik icerikten
   turuyor: hakkimizda'da baslik iki satir (icerik 1440 px'te 306 px),
   hizmetler/galeri'de tek satir + uc satir metin (221), iletisim'de tek satir
   + iki satir (195). Bant sirasiyla 522 / 437 / 411 px oluyordu.

   Musteri iletisimdeki orani sectigi icin bant 901 px ustunde sabitlendi.
   Egri iletisimin dogal yuksekliginden turetildi; olculen degerler
   768->282, 1024->334, 1280->384, 1440->411, 1920->418 px, aradaki bolge
   vw cinsinden neredeyse dogrusal (135px + 19.2vw).

   360 px taban sart: 1024 px'te iletisimin dogal yuksekligi 334, ama
   hakkimizda'nin icerigi orada 278 px; kalan 27 px'lik payda yazi bandin
   kenarina yapisiyor. Taban dort sayfanin da nefes almasini sagliyor.
   align-content:center olmazsa artan bosluk alta yigilir. */
@media (min-width:901px){
  .phero--g{display:grid;align-content:center;
    height:clamp(360px,calc(135px + 19.2vw),420px)}
}

/* Ortunun acilma noktasi ekran genisligine bagli, cunku yazinin kapladigi
   pay sabit degil: bant genisliginin yuzdesi olarak h1 1440'ta %67, 1024'te
   %83, 768'de %96'ya cikiyor (govde metni %59 / %69 / %91). Tek bir gecis
   ucunu de karsilamiyor, uc kademe var. Olculdu, bkz. asagidaki esikler. */
.phero--g::after{background:linear-gradient(100deg,rgba(10,10,12,.93) 0%,
  rgba(18,10,14,.88) 44%,rgba(60,11,18,.74) 62%,rgba(180,15,28,.34) 100%)}
/* 901-1200: yazi %83'e kadar uzaniyor, acilma noktasi saga kayiyor. */
@media (max-width:1200px){
  .phero--g::after{background:linear-gradient(100deg,rgba(10,10,12,.93) 0%,
    rgba(20,10,15,.88) 62%,rgba(70,11,20,.78) 86%,rgba(170,15,28,.44) 100%)}
}
/* <=900: yazi bandin tamamina yayiliyor, yon fark etmiyor: duz ortu.
   Esik 700 degil 900; 768 px'lik tablet genisliginde yazi bandin %96'sina
   kadar gidiyor ve iki kademeli gecis orada AA'nin altinda kaliyordu. */
@media (max-width:900px){
  .phero--g::after{background:linear-gradient(170deg,rgba(10,10,12,.90),
    rgba(70,11,20,.80))}
}
/* Etiket cekirdekte --acc/--acc2 degradesiyle yaziliyor. #d81324'un isigi
   0.152; beyaz degil renkli yazi oldugu icin en koyu zeminde bile 4.04:1'i
   gecemiyor, yani fotograf ustunde AA imkansiz. Fotografli bant her iki
   temada da koyu oldugundan burada acik sicak tona geciliyor (6:1 ustu).
   background kisayolu background-clip:text'i sifirlar, background-image sart. */
.phero--g .eyebrow{background-image:linear-gradient(96deg,#ffb9a8,#ffd3b6)}
.cta--g::after{background:linear-gradient(120deg,rgba(10,10,12,.94),rgba(190,16,30,.64))}
.info{background:transparent;border:0;gap:12px}
.info li{border-radius:20px;box-shadow:var(--sh)}
.field input,.field select,.field textarea{border-radius:16px;background:var(--bg2);
  border-color:transparent}
.map{border-radius:26px;border-color:transparent;box-shadow:var(--sh);overflow:hidden}
.foot{background:#0f0f11}
.foot__big{background:linear-gradient(96deg,#ff3b30,#ffffff);-webkit-background-clip:text;
  background-clip:text;color:transparent}


/* ============ karanlik tema ============ */
/* Yalnizca kullanici sectiginde; sistem tercihi izlenmiyor. */
:root[data-tema="koyu"]{
  --bg:#0d0d10;
  --bg2:#131318;
  --surf:#17171d;
  --surf2:#1e1e25;
  --line:#2b2b34;
  --line-s:#3e3e4a;
  --fg:#f2f2f5;
  --fg2:#b6b6c0;
  --fg3:#8e8e99;
  --acc:#e5202f;
  --acc2:#ff5a4e;
  --on-acc:#ffffff;
  --acc-t:#ff5f63;
  --sh:0 12px 34px rgba(0,0,0,.55);
  --sh-l:0 30px 76px rgba(0,0,0,.72);
}

:root[data-tema="koyu"] body{background:radial-gradient(900px 520px at 88% -6%,#2b1014,transparent 62%),
  radial-gradient(760px 480px at -6% 12%,#15151b,transparent 60%),var(--bg)}
/* background kisayolu background-clip:text i sifirlardi;
   yalnizca background-image degistiriliyor. */
:root[data-tema="koyu"] .eyebrow{background-image:linear-gradient(96deg,#ff5f63,#ff9070)}
/* Alt bilgi cekirdekte temayi ters cevirir: background:var(--fg),
   color:var(--bg). Karanlik temada bu, koyu zemin uzerine koyu yazi
   demek (olculdu: 1.02 kontrast). Karanlikta ters cevirme kaldirildi. */
:root[data-tema="koyu"] .foot{background:#101015;border-top:var(--bw) solid var(--line);
  color:color-mix(in srgb,var(--fg) 82%,transparent)}
:root[data-tema="koyu"] .foot__brand .brand__name,:root[data-tema="koyu"] .foot h4{color:var(--fg)}
/* Degrade artik seridin kendisinde degil, ic panelde. */
:root[data-tema="koyu"] .statbar{background:transparent}
:root[data-tema="koyu"] .statbar__in{background:linear-gradient(112deg,#141419 0%,#7d101c 62%,#c8121f 100%)}
:root[data-tema="koyu"] .stats>div{background:var(--surf);border-color:var(--line)}
/* Ic sayfa basligindaki kirmizi isik koyu zeminde daha sonuk olmali. */
:root[data-tema="koyu"] .phero--cizgi::before{background:radial-gradient(720px 340px at 84% -24%,
  rgba(255,59,48,.13),transparent 64%)}
:root[data-tema="koyu"] .btn--acc{box-shadow:0 10px 26px rgba(229,32,47,.34)}
:root[data-tema="koyu"] .card,:root[data-tema="koyu"] .step,:root[data-tema="koyu"] .faq__it,:root[data-tema="koyu"] .form,:root[data-tema="koyu"] .serit__it,:root[data-tema="koyu"] .info li,:root[data-tema="koyu"] .map,
:root[data-tema="koyu"] .works__in .tile,:root[data-tema="koyu"] .spanel{border:var(--bw) solid var(--line)}
/* :not() sart: kok secici + .chip birlesimi (0,3,0), secili fisi boyayan
   .chip[aria-pressed=true] kuralini (0,2,0) yeniyordu; karanlik temada
   secili kategori kirmizi dolgusunu kaybedip digerlerinden ayirt
   edilemiyordu. */
:root[data-tema="koyu"] .chip:not([aria-pressed="true"]){background:var(--surf);border-color:var(--line)}
:root[data-tema="koyu"] .gal__it{background:var(--surf2)}
:root[data-tema="koyu"] .field input,:root[data-tema="koyu"] .field select,:root[data-tema="koyu"] .field textarea{background:var(--surf2);
  border:var(--bw) solid var(--line);color:var(--fg)}
:root[data-tema="koyu"] .head--pill .head__in{border-color:var(--line)}
/* Cagri bolumu cekirdekte zeminini var(--fg) ile boyuyor; karanlik temada
   --fg acik renk oldugu icin bu ters cevirme, gorselin altinda acik bir
   zemin birakiyor (olculdu: 1.12 kontrast). Gorsel yuklenene kadar ya da
   hic yuklenmezse yazi okunmaz kalirdi. Karanlikta dogrudan koyu zemin. */
:root[data-tema="koyu"] .cta,:root[data-tema="koyu"] .cta--g{background:#0a0a0c}
/* Mobil menudeki etkin baglanti --acc kullaniyor; koyu yuzeyde 3.89:1
   kaliyordu. Yazi icin ayrilmis parlak tona alindi. */
:root[data-tema="koyu"] .drawer nav a:hover,:root[data-tema="koyu"] .drawer nav a[aria-current]{color:var(--acc-t)}


/* ============ düzeltme katmanı ============ */

/* --- mobil: galeri filtre çubuğu yapışkan olmasın (başlıkla çakışmasın) --- */
@media (max-width:860px){.filters{position:static}}
/* --- dar ekranda kabuk içindeki mini iletişim satırı yer kaplamasın --- */
@media (max-width:620px){.head--dock .head__mini,.head--merkez .head__mini{display:none}}
/* --- :has() desteklenmese de sol ray / rıhtım düzeni doğru çalışsın --- */
@media (min-width:1100px){.t19,.t24{padding-left:var(--rail,232px)}}
@media (min-width:1060px){.t14 .fabs,.t18 .fabs,.t22 .fabs{display:none}}

/* --- ızgara hero: satırlar içeriğe göre büyüsün, görseller de aşırı uzamasın --- */
@media (min-width:820px){
  .hero__mesh{grid-auto-rows:auto}
  .hero__k img{aspect-ratio:auto;height:100%}
  .hero__k--1,.hero__k--4,.hero__k--5{aspect-ratio:5/2}
  .hero__k--2,.hero__k--3{aspect-ratio:4/3}
}
/* --- açılır panellerde dikey başlık panele sığsın --- */
@media (min-width:960px){.spanel h3{font-size:.98rem;max-height:100%;overflow:hidden}}
/* --- dar ekranda hizmet panellerinin kapak fotoğrafı okunsun ---------
   960 px altında panel yatay bir karta dönüşüyor ama yüksekliğini yalnız
   yazı belirliyordu: 354 px genişliğinde 132 px'lik, 2,7:1'lik bir şerit.
   Dikey çekilmiş kapakların ortadan kırpılan bandı bu yüzden ürünü değil
   arka planı gösteriyordu. Yükseklik artık ekranla büyüyor, `--fok` de her
   kapağın ferforjesini kadrajın ortasına alıyor (değerler
   content/services.json -> "mobileFocus"). Masaüstünde panel dikey şeride
   döndüğü için kural 960 px altında kalıyor, oradaki kadraj değişmiyor. */
@media (max-width:959.98px){
  .spanel{min-height:clamp(214px,56vw,330px)}
  .spanel img{object-position:var(--fok,50% 50%)}
  /* Yatay kartta yazı bloğu panelin alt %60'ını kaplıyor; taban degradesi
     o yükseklikte daha yeni koyulaşmaya başladığı için sıra numarası
     fotoğrafın açık yerlerinde 2-3:1'e düşüyordu. Örtü üstte inceltildi
     (fotoğraf daha çok görünüyor), yazının başladığı yerde koyulaştırıldı. */
  .spanel::after{background:linear-gradient(180deg,rgba(0,0,0,.06),
    rgba(0,0,0,.30) 30%,rgba(0,0,0,.70) 52%,rgba(0,0,0,.92))}
  .spanel__no{opacity:1}
}
/* --- uzun ürün adları taşmasın --- */
.tile__cap b,.gal__cap b,.skay h3,.smoz h3,.spanel h3,
.skutu h3,.skart h3,.sdai h3,.sliste__ad b{overflow-wrap:anywhere}
/* --- mozaik ızgaralar boşluk bırakmasın --- */
.works--moz,.svc-moz{grid-auto-flow:dense}
/* --- esnek/ızgara içindeki görseller kendi doğal genişliğine sıkışıp
       düzeni bozmasın (min-width:auto sorunu) --- */
.hero__strip img,.hero__mozaik img,.hero__k img,.works__in .tile,.film__k,.skay,
.svc-kay__in>*,.works__in>*{min-width:0}
/* --- yatay kaydırmalı bölümlerde odak kırpılmasın --- */
.svc-kay,.works--kay,.film__in,.hero__strip{scroll-padding-inline:var(--gut)}
/* --- tablet aralığında hizmet panelleri okunur kalsın --- */
@media (min-width:960px) and (max-width:1180px){.svc-panel{height:clamp(320px,38vw,430px)}}

/* --- KOYU TEMALARDA KONTRAST ---------------------------------------
   Çekirdek, alt bilgi ve rakam şeridini "açık tema" varsayımıyla kurar
   (koyu blok + açık yazı). Koyu temalarda blok da koyu olduğu için
   yazı renkleri burada tersine çevrilir. -------------------------- */
.t7 .foot,.t10 .foot,.t16 .foot,.t18 .foot,.t20 .foot,.t22 .foot,.t23 .foot{
  color:color-mix(in srgb,var(--fg) 76%,transparent)}
.t10 .foot h4,.t16 .foot h4,.t18 .foot h4,.t20 .foot h4,.t22 .foot h4{color:var(--fg)}
.t7 .foot__brand .brand__name,.t10 .foot__brand .brand__name,
.t16 .foot__brand .brand__name,.t18 .foot__brand .brand__name,
.t19 .foot__brand .brand__name,.t20 .foot__brand .brand__name,
.t22 .foot__brand .brand__name,.t23 .foot__brand .brand__name,
.t24 .foot__brand .brand__name{color:var(--fg)}
.t7 .foot__bot,.t10 .foot__bot,.t16 .foot__bot,.t18 .foot__bot,.t19 .foot__bot,
.t20 .foot__bot,.t22 .foot__bot,.t23 .foot__bot,.t24 .foot__bot{
  border-top-color:color-mix(in srgb,var(--fg) 18%,transparent)}
.t7 .foot--dev .foot__dev,.t10 .foot--dev .foot__dev,.t16 .foot--dev .foot__dev,
.t18 .foot--dev .foot__dev,.t20 .foot--dev .foot__dev,.t22 .foot--dev .foot__dev,
.t23 .foot--dev .foot__dev{border-bottom-color:color-mix(in srgb,var(--fg) 18%,transparent)}
.t7 .foot__adres,.t19 .foot__adres,.t24 .foot__adres{
  border-top-color:color-mix(in srgb,var(--fg) 18%,transparent)}
/* rakam şeridi: arka planı koyulaştırılmış temalarda yazı açık olsun */
.t7 .statbar,.t10 .statbar,.t18 .statbar,.t23 .statbar{color:var(--fg)}
/* alt rıhtım menüsü koyu zeminde okunur olsun. Etkin bağlantının zemini
   vurgu rengi olduğu için (.dock a[aria-current]) o dışarıda bırakılır;
   aksi hâlde açık yazı vurgu zemininde okunmaz hâle geliyordu. */
.t18 .dock a:not([aria-current]),.t22 .dock a:not([aria-current]){
  color:color-mix(in srgb,var(--fg) 74%,transparent)}
.t18 .dock a:not([aria-current]):hover,.t22 .dock a:not([aria-current]):hover{
  color:var(--fg);background:color-mix(in srgb,var(--fg) 12%,transparent)}

/* --- TÜRKÇE BÜYÜK HARF TEPE İŞARETLERİ (Ö Ü İ Ğ Ş) KESİLMESİN ------
   Çok sıkı satır aralığı seçen tasarımlarda diyakritikler üst satıra
   değiyordu; satır aralıkları güvenli değere çekildi. --------------- */
.t9{--hlh:1.02}
.t16{--hlh:.99}
.t17{--hlh:1.01}
.t20{--hlh:1.06}
.t22{--hlh:.96}
.t16 .hero__outline,.t22 .hero__dev{line-height:.9}
.hero--carpik h1 span:nth-child(2){padding:.06em .18em}

/* --- KAYAN ŞERİT HERO'NUN ALTINDA YARIM KALMASIN ------------------
   .hero'da overflow:hidden var. Şerit `bottom:0` iken skewY merkezden
   döndüğü için sol ucu hero'nun altına sarkıyor ve kesiliyordu
   (1440 px'te 15 px). Dönme ekseni sol kenara alındı: sol uç tam
   dipte kalıyor, sağ uç yukarı kalkıyor, hiçbir yer kırpılmıyor.
   Ayrıca çekirdekteki translateY(14px) kaldırıldı. ---------------- */
.hero__bar{transform-origin:0 100%;transform:skewY(-1.2deg)}
.t20 .hero__bar{transform:skewY(-1.6deg)}   /* Kesik'in kendi açısı korunur */

/* --- PANO HERO AŞIRI UZAMASIN ------------------------------------
   Masaüstünde: 4 sütun; metin kartı 2x2 alan kaplar ve dikeyde ortalanır.
   Mobilde: 4 iğneli görsel tek sütunda alt alta dizilince hero 3.2 ekran
   boyuna çıkıyordu (2718 px). İki sütuna alındı, iğne payları küçüldü;
   yaklaşık 1.2 ekran boyuna indi. -------------------------------- */
@media (min-width:900px){
  .hero__pano{grid-template-columns:repeat(4,1fr)}
  .hero__not{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;
    justify-content:center}
}
@media (max-width:899px){
  .hero__pano{grid-template-columns:repeat(2,1fr)}
  .hero__not{grid-column:1/-1}
  .hero__pin{padding:7px 7px 30px}
  .hero__pin figcaption{padding:8px 6px;font-size:.6rem;letter-spacing:.06em}
}
@media (min-width:560px) and (max-width:899px){
  .hero__pano{grid-template-columns:repeat(4,1fr)}   /* tablette tek sıra */
}

/* --- WCAG AA KONTRAST DÜZELTMELERİ -------------------------------
   Ölçüm: her metin öğesinin gerçek yazı/zemin rengi hesaplanıp WCAG 2.1
   AA eşiğiyle (küçük metin 4.5:1, iri metin 3:1) karşılaştırıldı. -- */

/* WhatsApp düğmesi: beyaz yazı #25d366 üstünde 1.98:1 idi -> 7.3:1.
   Yüzen yığındaki karşılığı çekirdekte .fabx--wa ile veriliyor. */
.btn--wa,.dock__wa{--on-wa:#06301d}

/* Açık/parlak vurgu rengi üstünde beyaz yazı okunmuyordu */
.t21{--on-acc:#2b0011}   /* #ff3d81 üstünde 3.37:1 -> 5.6:1 */
.t25{--on-acc:#2e0d00}   /* #ff6b35 üstünde 2.84:1 -> 6.3:1 */
.t21 .cta--kutu .btn--acc,.t25 .cta--kutu .btn--acc,
.t25 .statbar,.t18 .btn--acc,.t18 .chip[aria-pressed="true"]{color:var(--on-acc)}
.t25 .statbar__in b i{color:var(--on-acc);opacity:.55}
.t21{--vurgu3:#e84b40}      /* rakam şeridi: beyaz yazı 4.25:1 -> 5.7:1 */

/* Vurgu renginin YAZI olarak kullanıldığı yerler (bağlantı, künye, sıra no).
   Zemin açık olduğunda vurgu tonu okunmuyor; yazı için koyulaştırılmış
   eşdeğeri kullanılır. Alt bilgi koyu olduğundan orada asıl vurgu kalır. */
.link,.svc-row__no,.brand__name em{color:var(--acc-t,var(--acc))}
.t17{--acc-t:#6b5200}    /* #ffd500 krem üstünde 1.26:1 -> 6.4:1 */
.t20{--acc-t:#ff4257}    /* #e3122b koyu zeminde 3.94:1 -> 5.5:1 */
.t21{--acc-t:#c2004b}    /* #ff3d81 açık zeminde 3.05:1 -> 5.8:1 */
.t25{--acc-t:#a83700}    /* #ff6b35 açık zeminde 2.52:1 -> 5.2:1 */
.t20 .eyebrow{color:var(--acc-t)}
/* Alt bilgi bloğu temayı ters çevirir: açık temalarda zemin koyudur, bu
   yüzden orada koyulaştırılmış ton değil asıl vurgu okunur. */
.foot .brand__name em,.foot .link{color:var(--acc-f,var(--acc-t,var(--acc)))}
.t17,.t21,.t25{--acc-f:var(--acc)}
.t12{--acc-f:#7cc79a}
.t15{--acc-f:#ff5f63}   /* #d81324 koyu alt bilgide 3.68:1 -> 6.4:1 */   /* #2f6146 koyu alt bilgide 2.34:1 -> 6.1:1 */
.t13{--acc-f:#e08a6a}   /* #93301f koyu alt bilgide 2.10:1 -> 6.0:1 */
/* Aynı nedenle sönük alt bilgi metni kendi bloğunun yazı renginden türetilir */
.foot .brand__sub,.foot .form__note,.foot small{
  color:inherit;opacity:.74}

/* Dört adım bloğundaki iri rakamlar (iri metin eşiği 3:1) */
/* Adım numaraları çekirdekte vurgu renginin %34'ü ile boyanıyor. Bu beş
   tasarımda vurgu açık olduğu için numara zeminle neredeyse aynı renge
   düşüyor ve okunmuyordu (1.0-2.1 kontrast); filigran görünümü korunarak
   koyulaştırıldı. */
.t6 .step b,.t7 .step b,.t8 .step b,.t11 .step b,.t15 .step b{color:var(--acc)}
.t21 .step b{color:#0a8a8a}
.t21 .step:nth-child(3n) b{color:var(--vurgu3)}
.t25 .step b{color:var(--acc-t)}
/* Neon'un şerit çağrısındaki düğme koyu zemin üstünde ikincil vurguyu kullanır */
.t18 .cta--serit .btn--acc{color:var(--acc2)}
/* Sayfa başlığı bandındaki etiket kendi vurgu zemininde tam kontrast ister */
.t25 .phero .eyebrow{color:var(--fg)}

/* Çağrı kutusundaki üst etiket: kendi zemini açık olduğu için
   ikincil vurgu tonu okunmuyordu */
.t16 .cta .eyebrow{color:#3d1200}
.t17 .cta .eyebrow{color:#4d3b00}
.t21 .cta .eyebrow{color:#0a7a7a}
.t25 .cta .eyebrow{color:#0f7a70}

/* Sönük ikincil metinler (--fg3) küçük punto olduğu için 3.5–4.4:1'de
   kalıyordu; bu roller bir ton yukarı (--fg2) alındı. */
.brand__sub,.head__meta a,.head__meta span,
.crumbs a:not([aria-current]){color:var(--fg2)}

/* Alt bilgideki çerçeveli buton çekirdekte var(--fg) ile boyanıyor; açık temalı
   tasarımlarda alt bilgi zemini de koyu olduğu için yazı zeminle neredeyse aynı
   renge düşüyor ve okunmuyordu (6, 8, 13, 15: 1.0-1.1 kontrast). Bu dördünde
   butonun kendi zemini yok, o yüzden alt bilginin yazı rengini miras alsın. */
.foot a.btn--ghost,.foot .btn--ghost{color:inherit}
.foot .btn--ghost:hover{border-color:currentColor;
  background:color-mix(in srgb,currentColor 12%,transparent)}
/* 17, 21 ve 25'te butonun kendi açık zemini var: orada koyu yazı doğru,
   miras alma. Yeni bir tasarım butona zemin verirse buraya eklenmeli. */
.t17 .foot a.btn--ghost,.t21 .foot a.btn--ghost,.t25 .foot a.btn--ghost{color:var(--fg)}

/* --- İÇ SAYFA BAŞLIĞI: GÖRSEL VE KOYU DEGRADE ZEMİNİN ARKASINA
   DÜŞMESİN ---------------------------------------------------------
   .phero--g'nin arka plan görseli (.phero__bg, z-index:-2) ve üstündeki
   koyu degrade (::after, z-index:-1) negatif katmanda duruyor. .phero
   yalnızca position:relative taşıyor, z-index/isolation yok, yani yığma
   bağlamı KURMUYOR. Negatif katman en yakın yığma bağlamına (köke)
   çıkıyor ve .phero'nun kendi background:var(--bg2) zemini ikisini de
   örtüyor. Sonuç: açık gri zeminde beyaz yazı, kontrast 1.04.
   Kardeşi .cta--g'de isolation:isolate zaten var, burada unutulmuş.
   Zemin de koyuya alındı: görsel yüklenmezse yazı yine okunur kalsın. */
.phero--g{isolation:isolate;background:#0a0a0c}
/* Kırıntı bağlantısı: EK'in ilerisindeki genel kuralı (.crumbs
   a:not([aria-current]){color:var(--fg2)}) doğrudan <a>'yı hedeflediği için
   .phero--g'nin kalıtımla verdiği açık rengi eziyordu. Açık temada --fg2
   koyu gri olduğu için koyu görselin üstünde okunmuyordu. */
.phero--g .crumbs a:not([aria-current]){color:rgba(255,255,255,.72)}
.phero--g .crumbs a:not([aria-current]):hover{color:#fff}

/* --- YAPIŞKAN BAŞLIK: KAYDIRIRKEN TİTREMESİN ----------------------
   Hap kabuğunun iç kutusu %78-88 saydamdı ve sürekli
   backdrop-filter:blur(14-16px) taşıyordu. Yerleşim kusursuz sabit
   (0-900px arası ölçüldü: başlık yüksekliği, iç kutu yüksekliği,
   içeriğin üst konumu ve sayfa boyu hiç değişmiyor), ama altından geçen
   içerik saydam hapın içinden görünüp her karede yeniden bulanıklaştığı
   için başlık titriyormuş gibi algılanıyordu. Zemin opaklaştırıldı;
   opak zeminin arkasında blur zaten görünmez olduğu için filtre de
   kaldırıldı, böylece bir compositing katmanı da eksildi. Gölge geçişi
   eşikte sıçramasın diye yumuşatıldı. */
.head--pill .head__in,
.head--pill.is-stuck .head__in{background:var(--surf);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.head--pill .head__in{transition:box-shadow .3s ease,border-color .3s ease}

/* --- RAKAM BLOKLARINDA SAYI ETIKET PUNTOSUNA DUSUYORDU ------------
   Isaretleme soyle: <b><span data-count>35</span><i>+</i></b><span>etiket</span>
   Yani sayac <span>'i <b>'nin ICINDE. Taban kural
   .statbar__in span,.stats span{font-size:.76rem} butun span'leri
   yakaladigi icin rakam 41.6 px yerine 12.16 px basiliyordu; yanindaki
   <i>+</i> ise <b>'den punto aldigi icin rakamdan buyuk cikiyor ve blok
   "kucuk sayi, kocaman arti" gibi gorunuyordu. Etiket kurali yalnizca
   dogrudan cocuk span'e uygulanmali. */
.statbar__in b span,.stats b span{font-size:inherit;letter-spacing:inherit;
  opacity:1;color:inherit}

/* --- [hidden] OZNITELIGI YAZAR STILLERIYLE EZILIYORDU --------------
   Tarayicinin varsayilan [hidden]{display:none} kurali (0,1,0) yazar
   stilleriyle ayni ozgullukte, ama yazar stilleri kaynak sirasinda her
   zaman one gecer. Cekirdekteki .gal__it{display:block} ve
   .gal__more{display:flex} bu yuzden hidden ozniteligini etkisiz
   birakiyordu: galeri filtresi dogru hesapliyor (sayac ve fis durumu
   guncelleniyor) ama gizlenmesi gereken kartlar ekranda kaliyor, yani
   filtre hic calismiyormus gibi gorunuyordu. Elle yazilmis tasarim 1-5
   CSS'inde bu satirin karsiligi var (.gal__it[hidden] vb.), motora hic
   girmemis; 6-25 arasindaki 20 tasarimin hepsi etkileniyordu. Tek tek
   secici saymak yerine genel kural: yeni bir bilesende de tekrarlamasin. */
[hidden]{display:none!important}

/* --- baskı --- */
@media print{
  .head,.topbar,.drawer,.scrim,.fabs,.dock,.filters,.lb,.mbar,.head--rail,
  .tick,.hero__bar,.hero__kayan,.hero__cue{display:none!important}
  body{padding:0!important;background:#fff;color:#000}
  .sect{padding-block:18px}
  a{text-decoration:underline}
  .gal{grid-template-columns:repeat(4,1fr)}
}

/* --- İLETİŞİM KARTLARI: ESKİ LİSTE MODELİNDEN KALAN KÜNYE KURALLARI ---
   `.info` 8 Eylül 2026'da tek bir kutunun içinde saç teli çizgiyle ayrılmış
   liste olmaktan çıkıp ayrı ayrı kartlara döndü (teklif formu kalkınca sayfa
   tek sütuna indi). Künyelerin çoğunda o modelden kalma `background:var(--line)`
   ve 17'de `border-width:3px` var; kart aralarını boyuyor, kartların arasında
   kalın bir çerçeve bırakıyorlardı. Çekirdekten sonra geldikleri için burada
   sıfırlanıyor. Yeni bir künyeye `.info` kuralı yazılacaksa kart modeline göre
   yazılmalı. */
.info{background:transparent;border:0;gap:clamp(12px,1.4vw,18px)}