/* =========================================================================
   SCOPO — Premium CNC sayfası · template-parts/cnc-premium.php
   Renk/yazı değişkenleri header-premium.css içindeki :root'tan gelir.
   Dil: katalogdaki pah kırılmış plaka, vida dişi kenarı ve cetvel.
   ========================================================================= */

.sc{
  --sc-night: #03070f;
  --sc-porselen: #f1ece3;
  --sc-gut: clamp(20px, 3.2vw, 64px);
  --sc-pah: 34px;
  position: relative; overflow: hidden; overflow: clip;
  background: var(--sc-night); color: var(--sx-text-strong); font-family: var(--sx-sans);
}
.sc *, .sc *::before, .sc *::after{ box-sizing: border-box; }
body.page-template-page-cnc, body.page-template-page-cnc main{ background: #03070f; }
body:has(.sc) #smooth-content::before{ display: none; }   /* menü boşluğunu üst bölüm kendisi bırakır */
.sc a{ text-decoration: none; }
.sc img{ display: block; max-width: 100%; }
.sc-kap{ width: min(1680px, 100%); margin: 0 auto; padding: 0 var(--sc-gut); }

/* Ortak yazı */
.sc-kicker{
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font: 500 11px/1 var(--sx-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--sx-brass-light);
}
.sc-kicker span{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(232, 210, 166, .35) inset; letter-spacing: 0; color: var(--sx-brass); }
.sc .sc-baslik{
  margin: 0; max-width: 13ch;
  font: 700 clamp(44px, 6.4vw, 112px)/.96 var(--sx-display) !important;
  letter-spacing: -.045em !important; color: var(--sx-text-strong); text-wrap: balance;
}
.sc .sc-kucuk{ font-size: clamp(38px, 4.4vw, 76px) !important; }
.sc .sc-koyu{ color: #0a1424; }
.sc em{
  display: block; font-style: normal;
  background: linear-gradient(100deg, var(--sx-brass-light) 0%, var(--sx-brass) 50%, var(--sx-brass-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sc .sc-koyu em{ background-image: linear-gradient(100deg, #b98f4e, #8a6526 60%, #6e4b17); }
.sc-lead{ max-width: 520px; margin: 0; font: 400 16px/1.65 var(--sx-sans); color: rgba(240, 243, 248, .66); text-wrap: pretty; }

.sc-butonlar{ display: flex; flex-wrap: wrap; gap: 12px; }
.sc-btn{
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: linear-gradient(100deg, var(--sx-brass-light), var(--sx-brass)); color: #0a1424 !important;
  font: 600 15px/1 var(--sx-sans); transition: transform .4s var(--sx-ease), box-shadow .4s var(--sx-ease);
}
.sc-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(201, 164, 107, .28); }
.sc-btn-cizgi{ background: none; color: var(--sx-text-strong) !important; box-shadow: 0 0 0 1px rgba(232, 210, 166, .4) inset; }
.sc-btn-cizgi:hover{ box-shadow: 0 0 0 1px var(--sx-brass-light) inset; }
.sc a:focus-visible, .sc button:focus-visible{ outline: 2px solid var(--sx-brass-light); outline-offset: 3px; }

/* Pah kırılmış çerçeve: dış katman pirinç çizgi, iç katman içerik */
.sc-pah{
  position: relative; padding: 1px; background: rgba(201, 164, 107, .55);
  clip-path: polygon(0 0, calc(100% - var(--sc-pah)) 0, 100% var(--sc-pah), 100% 100%, calc(var(--sc-pah) / 2) 100%, 0 calc(100% - var(--sc-pah) / 2));
}
.sc-pah-ic{
  position: relative; width: 100%; height: 100%; overflow: hidden; background: #050c18;
  clip-path: polygon(0 0, calc(100% - var(--sc-pah) + .4px) 0, 100% calc(var(--sc-pah) - .4px), 100% 100%, calc(var(--sc-pah) / 2 - .4px) 100%, 0 calc(100% - var(--sc-pah) / 2 + .4px));
}
.sc-pah-ic img{ width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- Giriş: başlık bandı + aşağı akan üç kolon */
.sc-hero{ padding: calc(var(--sx-bar-h) + var(--sx-top) + 34px) 0 clamp(90px, 10vw, 150px); background: var(--sc-night); }
.sc-hero-ust{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.sc-hero-ust .sc-kicker{ margin-bottom: 14px; }
.sc-hero-ust .sc-baslik{ max-width: none; font-size: clamp(38px, 5.4vw, 100px) !important; }
.sc-hero-yan .sc-lead{ margin-bottom: 22px; }
.sc-galeri{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); align-items: start; }
.sc-kolon{ display: grid; gap: clamp(28px, 3vw, 52px); will-change: transform; }
.sc-kolon:nth-child(2){ margin-top: clamp(40px, 6vw, 110px); }
.sc-kolon:nth-child(3){ margin-top: clamp(16px, 2.4vw, 44px); }
.sc-kart{ margin: 0; }
.sc-kart .sc-pah{ --sc-pah: 34px; }
.sc-yatay .sc-pah{ aspect-ratio: 800 / 680; }
.sc-dikey .sc-pah{ aspect-ratio: 600 / 790; }
.sc-kart figcaption{ padding-top: 12px; }
.sc-kart b{ display: block; margin-bottom: 4px; font: 600 18px/1.2 var(--sx-sans); color: var(--sx-brass-light); }
.sc-kart span{ display: block; max-width: 44ch; font: 400 15px/1.5 var(--sx-sans); color: rgba(240, 243, 248, .68); }
.sc-pah-ic img.sc-makine{ object-position: 72% 62%; }
.sc-pah-ic img.sc-sol{ object-position: 0 50%; }
.sc-dis{ display: block; width: 100%; height: 100%; }
.sc-dis-y{ font: 500 22px/1 var(--sx-mono); letter-spacing: .04em; fill: #e8d2a6; }
.sc-dis-koyu{ fill: #2a1c08; }

/* ---------------------------------------------------------------- Swiss sahnesi */
.sc-swiss{ position: relative; background: var(--sc-night); }
.sc-swiss-sahne{
  position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2vh, 28px);
  padding: calc(var(--sx-bar-h) + var(--sx-top) + 18px) var(--sc-gut) 26px;
  background: var(--sc-porselen); color: #0a1424;
  border-radius: 40px 40px 0 0;
}
.sc-swiss-bas{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end; width: min(1560px, 100%); margin: 0 auto; }
.sc-swiss .sc-baslik{ max-width: none; font-size: clamp(36px, 4.2vw, 74px) !important; }
.sc-swiss .sc-kicker{ color: #8a6526; }
.sc-swiss .sc-kicker span{ color: #8a6526; box-shadow: 0 0 0 1px rgba(138, 101, 38, .4) inset; }
.sc-swiss .sc-lead{ color: rgba(10, 20, 36, .72); }
.sc-cizim{ display: block; flex: 1; min-height: 0; width: min(1560px, 100%); margin: 0 auto; }
.sc-eksen{ fill: none; stroke: #0a1424; stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 26 6 4 6; }
.sc-parca-c{ stroke: #0a1424; stroke-width: 1.4; }
.sc-et{ font: 500 12.5px/1 var(--sx-mono); letter-spacing: .04em; fill: #0a1424; }
.sc-olcu path{ fill: none; stroke: #0a1424; stroke-width: 1; }
.sc-olcu [data-s-ok]{ stroke: #9c7a43; stroke-width: 3; }
.sc-okuma{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: min(1560px, 100%); margin: 0 auto; padding-top: 14px; border-top: 1px solid rgba(10, 20, 36, .16); }
.sc-okuma dt{ margin: 0 0 6px; font: 500 12px/1 var(--sx-mono); letter-spacing: .02em; color: rgba(10, 20, 36, .6); }
.sc-okuma dd{ margin: 0; font: 600 18px/1.2 var(--sx-sans); }
.sc-okuma b{ font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Çubuk şeridi: üst ve alt kenar vida dişi */
.sc-serit{ position: relative; z-index: 1; height: clamp(260px, 56vh, 620px); margin: -3px 0; overflow: hidden; background: var(--sc-porselen); }
.sc-serit img{ width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.sc-serit::before, .sc-serit::after{
  content: ""; position: absolute; left: 0; right: 0; height: 18px; z-index: 1;
  background: 0 0 / 30px 18px repeat-x;
}
.sc-serit::before{ top: 0; box-shadow: 0 -4px 0 var(--sc-porselen); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='18'%3E%3Cpath d='M0 0H30V8L21 18H9L0 8Z' fill='%23f1ece3'/%3E%3C/svg%3E"); }
.sc-serit::after{ bottom: 0; box-shadow: 0 4px 0 var(--sc-night); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='18'%3E%3Cpath d='M0 18H30V10L21 0H9L0 10Z' fill='%2303070f'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- Tezgâhlar */
.sc-tezgah{ padding: clamp(84px, 10vw, 160px) 0 0; }
.sc-tezgah-bas{ margin-bottom: clamp(36px, 5vw, 72px); }
.sc-tezgah .sc-baslik{ max-width: none; font-size: clamp(38px, 4.8vw, 84px) !important; }
.sc-tezgah-izgara{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.sc-foto-cift{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc-foto-cift .sc-pah{ aspect-ratio: 600 / 760; }
.sc-foto-cift .sc-pah:nth-child(2){ margin-top: 56px; margin-bottom: -56px; }
.sc-mil{ display: block; width: 100%; max-width: 560px; height: auto; margin: 0 0 26px; }
.sc-h-eksen{ stroke: rgba(232, 210, 166, .3); stroke-dasharray: 18 5 3 5; }
.sc-mil-olcu path{ fill: none; stroke: rgba(232, 210, 166, .45); stroke-width: 1; }
.sc-mil-olcu text{ font: 500 15px/1 var(--sx-mono); fill: rgba(240, 243, 248, .72); }
.sc-mil-olcu .sc-h-p{ fill: var(--sx-brass-light); }
/* Dönüş: yüzey izleri ve ayna çeneleri tek yönde akar; ölçüye gerek kalmadan döndüğü anlaşılır */
@keyframes scMilIz{ to{ transform: translateY(24px); } }
@keyframes scMilCene{ to{ transform: translateY(62px); } }
.sc-mil.is-don .sc-mil-iz{ animation: scMilIz .42s linear infinite; }
.sc-mil.is-don .sc-mil-cene{ animation: scMilCene .54s linear infinite; }
@media (prefers-reduced-motion: reduce){ .sc-mil .sc-mil-iz, .sc-mil .sc-mil-cene{ animation: none !important; } }
.sc-tablo dl{ margin: 0; border-top: 1px solid var(--sx-line); }
.sc-tablo dl > div{ display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--sx-line); }
.sc-tablo dt{ font: 600 17px/1.25 var(--sx-sans); color: var(--sx-text-strong); }
.sc-tablo dd{ margin: 0; text-align: right; font: 600 26px/1 var(--sx-sans); letter-spacing: -.02em; color: var(--sx-brass-light); white-space: nowrap; }
.sc-tablo small{ display: block; margin-top: 7px; font: 400 13px/1.2 var(--sx-sans); letter-spacing: 0; color: rgba(240, 243, 248, .55); }

/* ---------------------------------------------------------------- Yetenekler */
.sc-yetenek{ padding: clamp(130px, 13vw, 210px) 0 0; }
.sc-yetenek-izgara{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: stretch; }
.sc-liste{ margin-top: 34px; border-top: 1px solid var(--sx-line); }
.sc-liste button{
  display: block; width: 100%; padding: 20px 0; border: 0; border-bottom: 1px solid var(--sx-line); background: none; color: inherit;
  text-align: left; cursor: pointer; font-family: inherit;
}
.sc-liste b{ display: block; font: 600 clamp(19px, 1.7vw, 26px)/1.2 var(--sx-sans); letter-spacing: -.02em; color: rgba(240, 243, 248, .62); transition: color .35s var(--sx-ease); }
.sc-liste span{ display: block; overflow: hidden; font: 400 15px/1.55 var(--sx-sans); color: rgba(240, 243, 248, .66); }
.sc-liste button:hover b{ color: var(--sx-text-strong); }
.sc-liste button[aria-pressed="true"] b{ color: var(--sx-brass-light); }
.sc-liste button span{ max-height: 0; transition: max-height .5s var(--sx-ease), margin .5s var(--sx-ease); }
.sc-liste button[aria-pressed="true"] span{ max-height: 80px; margin-top: 8px; }
.sc-yetenek-foto{ min-height: 520px; --sc-pah: 54px; }
.sc-yetenek-foto img{ position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--sx-ease), transform 1.1s var(--sx-ease-out); }
.sc-yetenek-foto img.is-on{ opacity: 1; transform: none; }
.sc-yetenek-sol{ object-position: 0 50%; }

/* ---------------------------------------------------------------- Çağrı */
.sc-cta{ padding: clamp(90px, 11vw, 170px) 0 clamp(70px, 8vw, 120px); }
.sc-cta-ic{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.sc-cta .sc-lead{ margin: 24px 0 30px; }
.sc-cta .sc-baslik{ max-width: none; }
.sc-lamba{ width: clamp(150px, 16vw, 240px); aspect-ratio: 600 / 830; }

/* Kaydırınca belirme */
[data-sc-reveal]{ opacity: 0; transform: translateY(36px); transition: opacity 1s var(--sx-ease), transform 1.2s var(--sx-ease-out); }
[data-sc-reveal].is-in{ opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Mobil */
@media (max-width: 900px){
  .sc{ --sc-pah: 22px; }
  .sc-hero{ padding-top: calc(var(--sx-bar-h) + var(--sx-top) + 20px); }
  .sc-hero-ust{ grid-template-columns: 1fr; gap: 16px; }
  .sc-hero-ust .sc-baslik{ font-size: clamp(34px, 10vw, 60px) !important; }
  .sc-galeri{ grid-template-columns: 1fr; gap: 28px; }
  .sc-kolon, .sc-kolon:nth-child(2), .sc-kolon:nth-child(3){ margin-top: 0; }
  .sc-kart .sc-pah{ --sc-pah: 24px; }
  .sc-swiss-bas{ grid-template-columns: 1fr; gap: 12px; }
  .sc-swiss-bas .sc-lead{ font-size: 14px; }
  .sc-swiss-sahne{ border-radius: 24px 24px 0 0; }
  .sc-okuma{ gap: 10px; } .sc-okuma dd{ font-size: 15px; }
  .sc-tezgah-izgara, .sc-yetenek-izgara{ grid-template-columns: 1fr; }
  .sc-foto-cift .sc-pah:nth-child(2){ margin-top: 28px; margin-bottom: -28px; }
  .sc-tablo{ margin-top: 40px; }
  .sc-yetenek-foto{ min-height: 0; aspect-ratio: 4 / 3; }
  .sc-cta-ic{ grid-template-columns: 1fr; }
  .sc-lamba{ display: none; }
}

/* ---------------------------------------------------------------- Az hareket: sahneler sabit, tüm aşamalar okunur */
@media (prefers-reduced-motion: reduce){
  .sc-swiss-sahne{ height: auto; min-height: 0; }
  .sc-cizim{ flex: none; height: auto; }
  [data-sc-reveal]{ opacity: 1; transform: none; transition: none; }
  .sc-yetenek-foto img, .sc-btn, .sc-liste b{ transition: none; }
}