/* ==========================================================================
   premium.css — üst katman
   Referans mekanikler: arolax (GSAP ScrollSmoother/SplitText/ScrollTrigger)
   Uygulama: bağımlılık yok. CSS scroll-driven animations + küçük JS.
   Tasarım DNA'sı (tek renk, hairline, keskin köşe) korunur.
   ========================================================================== */

:root{
  --ease-heavy:cubic-bezier(.32,.72,0,1);
  --ease-out-soft:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. Film grain — sabit katman, repaint yok ---------- */
.grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Koyu bölümlerde multiply grain'i yutar: aynı doku screen ile ikinci kez basılır.
   Kireçtaşı zeminde dokunsal his, mürekkep zeminde de korunsun diye. */
.theme-dark .grain,
.hero .grain{mix-blend-mode:soft-light;opacity:var(--grain-opacity-dark)}
@media (prefers-reduced-motion:reduce){.grain{display:none}}

/* ---------- 2. Okuma ilerleme çizgisi (scroll-driven, JS'siz) ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  transform-origin:0 50%;transform:scaleX(0);background:var(--black);pointer-events:none;
}
.header--light ~ .progress,.progress{background:var(--black)}
@supports (animation-timeline:scroll()){
  .progress{animation:progressGrow linear both;animation-timeline:scroll(root block)}
}
@keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 3. Özel imleç ---------- */
.cursor,.cursor-ring{
  position:fixed;top:0;left:0;z-index:90;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference;will-change:transform;
}
.cursor{width:7px;height:7px;background:var(--paper);margin:-3.5px 0 0 -3.5px}
.cursor-ring{
  width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,255,255,.55);
  transition:width .45s var(--ease-out-soft),height .45s var(--ease-out-soft),
             margin .45s var(--ease-out-soft),border-color .45s var(--ease-out-soft),
             background .45s var(--ease-out-soft),opacity .3s;
  display:grid;place-items:center;
  font-family:var(--font-narrow);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);
}
.cursor-ring span{opacity:0;transition:opacity .3s var(--ease-out-soft);white-space:nowrap}
body.cursor-hover .cursor-ring{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:rgba(255,255,255,.85)}
body.cursor-label .cursor-ring{width:82px;height:82px;margin:-41px 0 0 -41px;background:rgba(255,255,255,.14)}
body.cursor-label .cursor-ring span{opacity:1}
body.cursor-label .cursor{opacity:0}
body.cursor-down .cursor-ring{width:30px;height:30px;margin:-15px 0 0 -15px}
html.has-cursor,html.has-cursor *{cursor:none!important}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.cursor,.cursor-ring{display:none}html.has-cursor,html.has-cursor *{cursor:auto!important}}

/* ---------- 4. Sayfa geçiş perdesi ---------- */
.curtain{
  position:fixed;inset:0;z-index:100;background:var(--ink-deep);pointer-events:none;
  transform:scaleY(0);transform-origin:50% 100%;
}
.curtain__mark{
  position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  color:var(--off-white);font-family:var(--font-narrow);font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;
}
body.is-leaving .curtain{transform:scaleY(1);transform-origin:50% 100%;transition:transform .62s var(--ease-heavy)}
body.is-leaving .curtain__mark{opacity:1;transition:opacity .4s .18s}
body.is-entering .curtain{transform:scaleY(1);transform-origin:50% 0}
body.entered .curtain{transform:scaleY(0);transform-origin:50% 0;transition:transform .78s var(--ease-heavy)}
@media (prefers-reduced-motion:reduce){.curtain{display:none}}

/* ---------- 5. Satır maskeli başlık açılımı (SplitText karşılığı) ---------- */
.reveal-lines{overflow:hidden}
.reveal-lines .rl-line{display:block;overflow:hidden}
.reveal-lines .rl-inner{
  display:block;transform:translateY(102%);
  transition:transform 1s var(--ease-heavy);
}
.reveal-lines.is-in .rl-inner{transform:translateY(0)}
.reveal-lines .rl-line:nth-child(2) .rl-inner{transition-delay:.09s}
.reveal-lines .rl-line:nth-child(3) .rl-inner{transition-delay:.18s}
.reveal-lines .rl-line:nth-child(4) .rl-inner{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){.reveal-lines .rl-inner{transform:none!important}}

/* ---------- 6. Ağır giriş: blur + kalkış ---------- */
.rise{opacity:0;transform:translateY(46px);filter:blur(6px);
  transition:opacity .9s var(--ease-out-soft),transform 1s var(--ease-heavy),filter .9s var(--ease-out-soft)}
.rise.is-in{opacity:1;transform:none;filter:none}
.rise[data-delay="1"]{transition-delay:.1s}
.rise[data-delay="2"]{transition-delay:.2s}
.rise[data-delay="3"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.rise{opacity:1!important;transform:none!important;filter:none!important}}

/* ---------- 7. Buton: dolgu süpürme (btn-hover-bgchange karşılığı) ---------- */
.btn{isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--black);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .5s var(--ease-heavy);
}
.btn--solid-light::before,.btn--primary::before{background:var(--off-white)}
.btn--ghost-dark::before{background:var(--off-white)}
.btn:hover::before{transform:scaleY(1);transform-origin:50% 0}
.btn--solid-light:hover,.btn--primary:hover{color:var(--black)}
.btn--primary:hover{--btn-fg:var(--black)}
.btn--solid-light:hover{--btn-fg:var(--black)}
.btn:not(.btn--solid-light):not(.btn--primary):not(.btn--ghost-dark):hover{--btn-fg:var(--off-white)}
.btn:active{transform:scale(.985)}

/* ---------- 8. Manyetik yuvarlak CTA (dönen yazı halkası) ---------- */
.orbit{
  position:relative;width:190px;height:190px;flex:none;display:grid;place-items:center;
  color:inherit;will-change:transform;
}
.orbit__ring{position:absolute;inset:0;animation:orbitSpin 22s linear infinite}
.orbit:hover .orbit__ring{animation-duration:9s}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.orbit__ring text{
  font-family:var(--font-narrow);font-size:10.5px;letter-spacing:.34em;
  text-transform:uppercase;fill:currentColor;opacity:.72;
}
.orbit__core{
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:var(--black);color:var(--off-white);
  transition:transform .6s var(--ease-heavy),background .6s var(--ease-heavy);
}
.theme-dark .orbit__core,.banner .orbit__core{background:var(--off-white);color:var(--black)}
.orbit:hover .orbit__core{transform:scale(1.09)}
.orbit__core svg{transition:transform .6s var(--ease-heavy)}
.orbit:hover .orbit__core svg{transform:translate(3px,-3px)}
@media (prefers-reduced-motion:reduce){.orbit__ring{animation:none}}

/* ---------- 9. Kart: hairline süpürme + görsel açılımı ---------- */
.card,.work,.member,.price-card{position:relative}
.card::after,.work::after,.member::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--black);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-heavy);
}
.theme-dark .card::after,.theme-dark .work::after,.theme-dark .member::after{background:var(--off-white)}
.card:hover::after,.work:hover::after,.member:hover::after{transform:scaleX(1)}
.work__art svg,.member__mono{transition:transform 1s var(--ease-heavy),filter .6s var(--ease-out-soft)}
.work:hover .work__art svg{transform:scale(1.045)}

/* ---------- 10. İki yönlü portföy şeridi (g-slider--one/two karşılığı) ---------- */
.strip{overflow:hidden;display:grid;gap:14px;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip__row{display:flex;gap:14px;width:max-content;animation:stripL 46s linear infinite}
.strip__row.is-reverse{animation-name:stripR}
.strip:hover .strip__row{animation-play-state:paused}
@keyframes stripL{to{transform:translateX(-50%)}}
@keyframes stripR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.strip__item{
  width:min(31vw,300px);flex:none;border:1px solid var(--hairline-dark);
  background:var(--ink-raised);position:relative;overflow:hidden;aspect-ratio:16/10;
}
.strip__item svg{width:100%;height:100%;display:block}
.strip__item b{
  position:absolute;left:12px;bottom:10px;font-family:var(--font-narrow);font-weight:500;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--off-white);opacity:.9;
}
@media (prefers-reduced-motion:reduce){.strip__row{animation:none}}

/* ---------- 11. Yapışkan footer açılımı ---------- */
@media (min-width:900px){
  body.has-sticky-footer main{position:relative;z-index:2;background:var(--page)}
  body.has-sticky-footer .footer{position:sticky;bottom:0;z-index:1}
}

/* ---------- 12. Bölüm numarası — kenar işareti ---------- */
.sec-mark{
  position:absolute;top:0;right:0;font-family:var(--font-narrow);font-size:12px;
  letter-spacing:.16em;color:var(--grey-2);writing-mode:vertical-rl;padding-top:6px;
}
.section{position:relative}

/* ---------- 13. Odak görünürlüğü (a11y) ---------- */
:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;
}
.theme-dark :where(a,button,summary):focus-visible,.hero :where(a,button):focus-visible{
  outline-color:var(--off-white);
}

/* ---------- 14. Parallax (scroll-driven, destekleyen tarayıcıda) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:900px){
    .parallax{animation:parallaxShift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes parallaxShift{from{transform:translateY(34px)}to{transform:translateY(-34px)}}
  }
}

/* ---------- 15. Rakam bloğu vurgusu ---------- */
.metric{position:relative;overflow:hidden}
.metric::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease-heavy);
}
.metric.is-in::after{transform:scaleX(1)}

/* ---------- 16. Header teması: koyu bölüm üzerindeyken ---------- */
.header.header--on-dark{
  color:var(--off-white);background:rgba(7,20,23,.72);border-bottom-color:var(--hairline-dark);
}
.header.header--on-dark.header--stuck{background:rgba(7,20,23,.82)}
.header.header--on-dark .btn--nav{--btn-fg:var(--off-white);--btn-bd:rgba(239,234,224,.5)}
.header.header--on-dark .btn--nav:hover{--btn-bg:rgba(239,234,224,.14)}

/* ---------- 17. Form alanlarında klavye odağı (main.css outline:none'ı dengeler) ---------- */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,
.signup input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 18. Hizmet kümeleri (9'lu düz liste yerine 3+3+3) ---------- */
.prop-groups{display:grid;gap:0}
.prop-group{border-top:1px solid var(--hairline);padding:8px 0 40px}
.prop-group:first-child{border-top:0}
@media (min-width:1000px){
  .prop-group{display:grid;grid-template-columns:minmax(220px,3fr) 8fr;column-gap:var(--layout-columns-gap);padding:0 0 24px}
  .prop-group__head{position:sticky;top:calc(var(--header-h) + var(--announce-h) + 34px);align-self:start;padding:38px 0}
}
.prop-group__head{padding:34px 0 8px;max-width:34ch}
.prop-group__letter{
  font-family:var(--font-narrow);font-size:12px;letter-spacing:.2em;color:var(--grey-1);
  display:block;margin-bottom:12px;
}
.prop-group__title{
  font-size:clamp(26px,3.4vw,40px);font-weight:400;letter-spacing:-.025em;line-height:1.06;margin-bottom:12px;
}
.prop-group__list .prop:first-child{border-top:1px solid var(--hairline)}
@media (min-width:1000px){.prop-group__list .prop:first-child{border-top:0}}
.prop-group:last-child .prop-group__list .prop:last-child{border-bottom:0}

/* ---------- 19. Henüz hedefi olmayan öğeler link gibi görünmesin ---------- */
.footer__cols li > span{color:var(--grey-2);font-size:15px}

/* ---------- 20. Portföy grid'i son satırda boşluk bırakmasın ---------- */
@media (min-width:1200px){
  .work.is-half{grid-column:span 3}
  .work.is-half .work__art{aspect-ratio:16/9}
}

/* ==========================================================================
   21. Sektör sayfaları (hub + spoke)
   ========================================================================== */

/* --- Hub: sektör kartları --- */
.sector-grid{display:grid;gap:0;border-top:1px solid var(--hairline)}
@media (min-width:700px){.sector-grid{grid-template-columns:repeat(2,1fr);column-gap:var(--layout-columns-gap)}}
@media (min-width:1200px){.sector-grid{grid-template-columns:repeat(3,1fr)}}
.sector-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:22px 4px;border-bottom:1px solid var(--hairline);position:relative;
  transition:padding-left .5s var(--ease-heavy),color .4s var(--ease);
}
.sector-card:hover{padding-left:14px}
.sector-card__no{font-family:var(--font-narrow);font-size:12px;letter-spacing:.1em;color:var(--grey-1)}
.sector-card__t{font-size:19px;letter-spacing:-.01em;line-height:1.25}
.sector-card__t small{
  display:block;font-family:var(--font-narrow);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey-1);margin-top:5px;
}
.sector-card__go{opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .5s var(--ease-heavy)}
.sector-card:hover .sector-card__go{opacity:1;transform:none}
.sector-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--black);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease-heavy);
}
.sector-card:hover::before{transform:scaleY(1);transform-origin:50% 0}

/* --- Spoke: sorun / gereklilik ızgarası --- */
.pain-grid{display:grid;gap:0;border-top:1px solid var(--hairline)}
@media (min-width:820px){.pain-grid{grid-template-columns:repeat(2,1fr);column-gap:var(--layout-columns-gap)}}
.pain{padding:24px 0 26px;border-bottom:1px solid var(--hairline)}
.pain h3{font-size:20px;font-weight:400;letter-spacing:-.015em;margin-bottom:8px;display:flex;gap:12px;align-items:baseline}
.pain h3 b{font-family:var(--font-narrow);font-size:12px;letter-spacing:.1em;color:var(--grey-1);font-weight:500;flex:none}
.pain p{font-size:15px;line-height:1.6;color:var(--grey-1);padding-left:30px}

.must-grid{display:grid;gap:0;border-top:1px solid var(--hairline)}
@media (min-width:820px){.must-grid{grid-template-columns:repeat(3,1fr);column-gap:var(--layout-columns-gap)}}
.must{padding:22px 0 24px;border-bottom:1px solid var(--hairline)}
.must h3{font-size:17px;font-weight:500;letter-spacing:-.01em;margin-bottom:7px}
.must p{font-size:14.5px;line-height:1.55;color:var(--grey-1)}

/* --- Mevzuat bloğu --- */
.reg{border:1px solid var(--hairline-dark);background:rgba(239,234,224,.05);padding:28px 24px}
@media (min-width:900px){.reg{padding:38px 40px}}
.reg h3{font-size:clamp(22px,2.6vw,30px);font-weight:400;letter-spacing:-.02em;margin-bottom:16px}
.reg p{font-size:16px;line-height:1.65;color:rgba(239,234,224,.72);max-width:78ch}
.reg__note{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline-dark);
  font-family:var(--font-narrow);font-size:13px;letter-spacing:.03em;color:rgba(239,234,224,.5);max-width:74ch;
}

/* --- Yapılmaması gerekenler --- */
.dont-list{display:grid;gap:0;border-top:1px solid var(--hairline-dark)}
.dont-item{
  display:flex;gap:16px;align-items:baseline;padding:18px 0;
  border-bottom:1px solid var(--hairline-dark);font-size:16px;line-height:1.5;
}
.dont-item i{
  flex:none;width:18px;height:18px;position:relative;top:3px;
  border:1px solid rgba(239,234,224,.45);display:inline-block;
}
.dont-item i::before,.dont-item i::after{
  content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;background:rgba(239,234,224,.75);
}
.dont-item i::before{transform:rotate(45deg)}
.dont-item i::after{transform:rotate(-45deg)}

/* --- Paket önerisi --- */
.pack{display:grid;gap:24px;align-items:center}
@media (min-width:900px){.pack{grid-template-columns:auto 1fr auto;gap:40px}}
.pack__price{display:flex;align-items:baseline;gap:8px}
.pack__price b{font-size:clamp(38px,5vw,56px);font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pack__price span{font-family:var(--font-narrow);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--grey-1)}
.pack__name{font-family:var(--font-narrow);font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey-1);margin-bottom:8px}

/* --- İlgili sektörler --- */
.related-row{display:grid;gap:0;border-top:1px solid var(--hairline)}
@media (min-width:700px){.related-row{grid-template-columns:repeat(3,1fr);column-gap:var(--layout-columns-gap)}}

/* --- Kırıntı yolu --- */
.crumbs{
  font-family:var(--font-narrow);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:rgba(239,234,224,.5);margin-bottom:18px;
}
.crumbs a{color:rgba(239,234,224,.72)}
.crumbs a:hover{color:var(--off-white)}

/* ---------- 22. Gezinme 7 öğeye çıktı — masaüstünde biraz sıkıştır ---------- */
@media (min-width:1000px) and (max-width:1379px){
  .nav a{padding:9px 10px;font-size:12.5px}
  .header .btn--nav .btn__label{padding:0 14px}
}
@media (min-width:1000px) and (max-width:1099px){
  .header__cta{display:none}
}

/* ==========================================================================
   23. Dal (alt sektör) sayfaları
   ========================================================================== */

/* --- Site haritası: bu dalda hangi sayfalar olmalı --- */
.blueprint{display:grid;gap:0;border-top:1px solid var(--hairline);counter-reset:bp}
.bp{
  display:grid;gap:6px;padding:20px 0 22px;border-bottom:1px solid var(--hairline);
  position:relative;transition:padding-left .5s var(--ease-heavy);
}
@media (min-width:820px){.bp{grid-template-columns:44px minmax(220px,1fr) 1.6fr;column-gap:24px;align-items:baseline}}
.bp:hover{padding-left:10px}
.bp__n{
  font-family:var(--font-narrow);font-size:12px;letter-spacing:.1em;color:var(--grey-1);
}
.bp__t{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.bp__d{font-size:15px;line-height:1.6;color:var(--grey-1)}
.bp::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--black);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--ease-heavy);
}
.bp:hover::before{transform:scaleY(1);transform-origin:50% 0}

/* --- Dönüşüm akışı: üç adım, aralarında bağlantı --- */
.flow{display:grid;gap:22px;counter-reset:fl}
@media (min-width:820px){.flow{grid-template-columns:repeat(3,1fr);gap:var(--layout-columns-gap)}}
.flow__step{border-top:2px solid var(--black);padding-top:18px;position:relative}
.theme-dark .flow__step{border-top-color:var(--off-white)}
.flow__step b{
  display:block;font-family:var(--font-narrow);font-size:12px;letter-spacing:.12em;
  color:var(--grey-1);margin-bottom:10px;font-weight:500;
}
.theme-dark .flow__step b{color:rgba(239,234,224,.55)}
.flow__step h3{font-size:21px;font-weight:400;letter-spacing:-.02em;margin-bottom:9px}
.flow__step p{font-size:15px;line-height:1.6;color:var(--grey-1)}
.theme-dark .flow__step p{color:rgba(239,234,224,.66)}

/* --- Entegrasyonlar --- */
.integr{display:grid;gap:0;border-top:1px solid var(--hairline-dark)}
@media (min-width:760px){.integr{grid-template-columns:repeat(2,1fr);column-gap:var(--layout-columns-gap)}}
.integr__item{padding:18px 0 20px;border-bottom:1px solid var(--hairline-dark)}
.integr__item h3{
  font-size:16px;font-weight:500;letter-spacing:.01em;margin-bottom:6px;
  display:flex;align-items:center;gap:10px;
}
.integr__item h3::before{
  content:"";width:7px;height:7px;flex:none;border:1px solid currentColor;transform:rotate(45deg);opacity:.65;
}
.integr__item p{font-size:14.5px;line-height:1.55;color:rgba(239,234,224,.62)}

/* --- İçerik fikirleri --- */
.ideas{display:grid;gap:0;border-top:1px solid var(--hairline)}
.idea{
  display:flex;gap:16px;align-items:baseline;padding:16px 0;
  border-bottom:1px solid var(--hairline);font-size:16.5px;line-height:1.5;letter-spacing:-.01em;
}
.idea b{font-family:var(--font-narrow);font-size:12px;letter-spacing:.1em;color:var(--grey-1);font-weight:500;flex:none}

/* --- Dikkat notları --- */
.watch{display:grid;gap:0;border-top:1px solid var(--hairline)}
.watch__item{
  display:flex;gap:14px;align-items:baseline;padding:16px 0;
  border-bottom:1px solid var(--hairline);font-size:15.5px;line-height:1.6;color:var(--grey-1);
}
.watch__item i{
  flex:none;width:16px;height:16px;position:relative;top:2px;border:1px solid var(--grey-2);
  border-radius:50%;display:grid;place-items:center;
}
.watch__item i::after{content:"!";font-size:10px;font-weight:600;color:var(--grey-1);line-height:1}

/* --- Kardeş dallar (yatay şerit) --- */
.siblings{display:flex;gap:10px;flex-wrap:wrap}
.sibling{
  font-family:var(--font-narrow);font-size:13px;letter-spacing:.05em;
  border:1px solid var(--hairline);padding:9px 14px;color:var(--grey-1);
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.sibling:hover{border-color:var(--black);color:var(--black);background:rgba(0,0,0,.04)}
.sibling[aria-current]{background:var(--black);color:var(--off-white);border-color:var(--black)}
.theme-dark .sibling{border-color:var(--hairline-dark);color:rgba(239,234,224,.7)}
.theme-dark .sibling:hover{border-color:var(--off-white);color:var(--off-white);background:rgba(239,234,224,.1)}

/* --- Sektör sayfasındaki dal listesi --- */
.branch-list{display:grid;gap:0;border-top:1px solid var(--hairline)}
@media (min-width:760px){.branch-list{grid-template-columns:repeat(2,1fr);column-gap:var(--layout-columns-gap)}}
@media (min-width:1200px){.branch-list{grid-template-columns:repeat(3,1fr)}}
.branch-link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 2px;border-bottom:1px solid var(--hairline);font-size:16.5px;letter-spacing:-.01em;
  transition:padding-left .45s var(--ease-heavy);
}
.branch-link:hover{padding-left:12px}
.branch-link svg{opacity:0;transform:translateX(-5px);transition:opacity .35s,transform .45s var(--ease-heavy)}
.branch-link:hover svg{opacity:1;transform:none}

/* ---------- 24. KVKK onay kutusu ---------- */
.consent{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-family:var(--font-narrow);font-size:13px;line-height:1.5;letter-spacing:.03em;
  color:var(--grey-1);cursor:pointer;
}
.consent input{width:16px;height:16px;margin:1px 0 0;accent-color:var(--black);cursor:pointer}
.consent a{color:var(--black);text-underline-offset:3px}
.consent input:focus-visible{outline:2px solid var(--black);outline-offset:2px}

/* ---------- 25. Form gönderim durumları ----------
   Durum yalnızca RENKLE taşınmıyor: hata durumu ayrıca sol kenar çizgisi, dolgu ve
   "!" işaretiyle işaretleniyor. Sebep: WCAG 1.4.1 (rengi tek sinyal olarak kullanma)
   ve pratik bir çakışma — kızıl bir aksan paletinde hata kırmızısı aksandan
   ayırt edilemiyor (ölçülen: #b00020 ile #C43C14 arası 1.40:1). */
.form__status{padding-left:0;border-left:0}
.form__status.is-ok{color:var(--black);font-weight:500}
.form__status.is-ok::before{content:"✓ ";font-weight:600}
.form__status.is-error{
  color:var(--black);text-transform:none;letter-spacing:.02em;font-size:14px;
  border-left:3px solid currentColor;padding:8px 0 8px 12px;background:var(--surface);
}
.form__status.is-error::before{content:"! ";font-weight:700}
.form__status.is-error a{color:inherit;text-underline-offset:3px}
.form.is-sending{opacity:.7;pointer-events:none}

/* ---------- 26. Yasal metin sayfası ---------- */
.legal{max-width:72ch}
.legal h2{
  font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;font-weight:400;
  margin:44px 0 12px;padding-top:20px;border-top:1px solid var(--hairline);
}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0 0;padding-left:20px;display:grid;gap:6px}
.legal li{font-size:16px;line-height:1.6;color:var(--grey-1)}
.legal strong{color:var(--black);font-weight:500}
.legal a{color:var(--black);text-underline-offset:3px}
.legal code{font-size:.9em;background:rgba(0,0,0,.05);padding:1px 5px}

/* ---------- 27. Skip link (klavye ile içeriğe atla) ----------
   Ekrandan gizli durur, yalnızca klavye odağında iner. İlk Tab'da görünür;
   fare kullanıcısını rahatsız etmez, klavye kullanıcısını 13 header linkinden kurtarır. */
.skip{
  position:absolute;left:12px;top:-100px;z-index:200;
  padding:10px 16px;background:var(--black);color:var(--off-white);
  font-family:var(--font-narrow);font-size:13px;letter-spacing:var(--label-tracking);
  text-transform:uppercase;text-decoration:none;transition:top .18s var(--ease);
}
.skip:focus-visible{top:12px;outline:2px solid var(--off-white);outline-offset:-5px}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}

/* ---------- 28. Sektör görseli (temsilî fotoğraf) ----------
   width/height HTML'de yazılı; buradaki aspect-ratio yedek. İkisi birlikte
   görsel yüklenmeden önce yerin ayrılmasını garantiler (CLS = 0). */
.sektor-gorsel{
  margin:44px 0 0;
  border:1px solid var(--hairline);
  background:var(--surface);
  overflow:hidden;
}
.sektor-gorsel img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
}
@media (min-width:900px){.sektor-gorsel{margin-top:56px}}

/* ---------- 29. Hızlı iletişim (WhatsApp + Ara) ----------
   Sabit konumlu, sağ altta. Mobilde iki düğme yan yana ve daha büyük dokunma
   hedefi (44×44 alt sınırı); masaüstünde etiketli. Kaydırma işaretiyle
   çakışmasın diye z-index ve konum ona göre. */
.hizli-iletisim{
  position:fixed;right:16px;bottom:16px;z-index:80;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
}
.hizli-iletisim__btn{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:0 16px;
  background:var(--black);color:var(--off-white);
  border:1px solid var(--black);border-radius:999px;
  font-family:var(--font-narrow);font-size:13px;font-weight:500;
  letter-spacing:var(--label-tracking);text-transform:uppercase;text-decoration:none;
  box-shadow:0 6px 24px rgba(7,20,23,.22);
  transition:transform .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.hizli-iletisim__btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.hizli-iletisim__btn:hover{transform:translateY(-2px)}
.hizli-iletisim__btn--wa{background:#128C7E;border-color:#128C7E;color:#fff}
.hizli-iletisim__btn--wa:hover{background:#0f7a6e;border-color:#0f7a6e}
.hizli-iletisim__btn--tel{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.hizli-iletisim__btn:focus-visible{outline:3px solid var(--black);outline-offset:3px}
.hizli-iletisim__btn--wa:focus-visible,
.hizli-iletisim__btn--tel:focus-visible{outline-color:var(--off-white)}

/* Dar ekran: etiketler kalkar, yuvarlak dokunma hedefi kalır. Yan yana
   dizilir ki tek elle başparmak erişimi kolay olsun. */
@media (max-width:599px){
  .hizli-iletisim{flex-direction:row;right:12px;bottom:12px;gap:10px}
  .hizli-iletisim__btn{min-width:52px;min-height:52px;padding:0;justify-content:center}
  .hizli-iletisim__etiket{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .hizli-iletisim__btn svg{width:23px;height:23px}
}
@media (prefers-reduced-motion:reduce){
  .hizli-iletisim__btn{transition:none}
  .hizli-iletisim__btn:hover{transform:none}
}
@media print{.hizli-iletisim{display:none}}

/* ---------- 24. Portföy kartında fotoğraf ve "temsili" rozeti ---------- */
.work__art{position:relative}
.work__art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease-heavy)}
.work:hover .work__art img{transform:scale(1.045)}
.work__temsili{
  position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--font-narrow);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--off-white);background:rgba(10,12,18,.72);backdrop-filter:blur(4px);
  padding:4px 8px;border:1px solid rgba(243,243,243,.28);
}

/* ---------- 25. Ana sayfa: kart fotoğrafı ve stüdyo bandı ---------- */
.card__viz--foto{position:relative;height:180px;border:1px solid var(--hairline);
  background:var(--surface);overflow:hidden}
.card__viz--foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease-heavy)}
.card:hover .card__viz--foto img{transform:scale(1.05)}

.band{margin:0;position:relative;border:1px solid var(--hairline);overflow:hidden;background:#0d0f14}
.band img{width:100%;height:auto;display:block;aspect-ratio:16/7;object-fit:cover}
.band__cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 24px 22px;color:var(--off-white);
  background:linear-gradient(transparent,rgba(8,10,14,.82) 55%);
}
@media (min-width:900px){.band__cap{padding:40px 40px 34px;max-width:62ch}}
.band__cap .eyebrow{color:rgba(243,243,243,.6);display:block;margin-bottom:10px}
.band__cap p{font-size:clamp(17px,2vw,22px);line-height:1.45;letter-spacing:-.01em;margin:0}