/* ================= GüvenPatent · service & content pages ================= */
.gorunmez{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- hero ---------- */
.s-hero{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;padding:calc(var(--hd) + 48px) var(--pad) 64px;overflow:hidden}
.s-hero-kopya{grid-column:1/8;position:relative;z-index:2;display:flex;flex-direction:column;gap:24px}
.s-iz{font-size:13px;color:var(--m60);display:flex;gap:10px}
.s-iz a:hover{color:var(--murekkep)}
.s-ad{font-size:clamp(68px,11vw,196px);font-weight:750;font-stretch:84%;letter-spacing:-.05em;line-height:.86}
.s-ad em{font-style:italic;font-weight:400;font-stretch:100%;color:var(--mavi)}
.s-etiket{font-size:clamp(20px,1.9vw,30px);line-height:1.28;letter-spacing:-.02em;color:var(--m80);max-width:30ch}
.s-hero-alt{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:10px}
.s-sahne{grid-column:8/13;position:relative;align-self:center;aspect-ratio:1;width:100%}
.s-sahne canvas{position:absolute;inset:0;width:100%;height:100%}
.s-sahne .s-damga{position:absolute;inset:0;display:grid;place-items:center}
.s-sahne .s-damga span{background:var(--kagit);border:1px solid var(--murekkep);border-radius:50%;width:24%;aspect-ratio:1;display:grid;place-items:center;text-align:center;font-size:clamp(12px,1vw,15px);font-weight:800;font-stretch:120%;text-transform:uppercase;line-height:1.05;padding:6px}
.s-sahne .s-damga small{display:block;font-size:9px;font-weight:600;font-stretch:70%;letter-spacing:.14em;color:var(--mavi);margin-top:4px}
html.js:not(.rm) .s-hero-kopya>*{opacity:0}

/* ---------- facts ---------- */
.kunye4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--murekkep)}
.kunye4>div{padding:24px 24px 28px 0}
.kunye4>div+div{padding-left:24px;border-left:1px solid var(--m15)}
.kunye4 dt{font-size:12px;font-weight:600;font-stretch:80%;letter-spacing:.14em;text-transform:uppercase;color:var(--mavi);margin-bottom:10px}
.kunye4 dd{font-size:17px;line-height:1.45;color:var(--m80)}

/* ---------- process with a drawn rail ---------- */
.surec{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.surec-bas{grid-column:1/5;position:sticky;top:calc(var(--hd) + 40px);align-self:start;display:flex;flex-direction:column;gap:20px}
.surec-adimlar{grid-column:6/13;list-style:none;position:relative;padding-left:44px}
.surec-ray{position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:var(--m15)}
.surec-ray i{position:absolute;inset:0;background:var(--mavi);transform-origin:50% 0;transform:scaleY(0)}
.surec-adimlar li{position:relative;padding:0 0 64px}
.surec-adimlar li::before{content:"";position:absolute;left:-44px;top:8px;width:20px;height:20px;border-radius:50%;background:var(--kagit);border:2px solid var(--m45);transition:background .4s,border-color .4s}
.surec-adimlar li.gecti::before{background:var(--mavi);border-color:var(--mavi)}
.surec-adimlar span{font-size:13px;font-weight:600;color:var(--mavi);font-variant-numeric:tabular-nums}
.surec-adimlar h3{font-size:clamp(26px,2.6vw,40px);font-weight:650;font-stretch:90%;letter-spacing:-.035em;line-height:1.02;margin:8px 0 10px}
.surec-adimlar p{font-size:18px;color:var(--m80);max-width:46ch}
.surec-adimlar small{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--m60);border:1px solid var(--m15);border-radius:999px;padding:5px 10px}

/* ---------- what can be protected ---------- */
.turler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tur{position:relative;background:var(--sayfa);border-radius:22px;padding:26px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .6s var(--e-out),box-shadow .4s}
.tur svg{position:absolute;right:-30px;top:-30px;width:180px;height:180px;opacity:.28;transition:transform 1.4s var(--e-out),opacity .4s}
.tur:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(14,26,21,.3)}
.tur:hover svg{transform:rotate(60deg);opacity:.6}
.tur b{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mavi)}
.tur h3{font-size:clamp(24px,2.2vw,34px);font-weight:650;font-stretch:90%;letter-spacing:-.03em;line-height:1.02;margin-top:auto;margin-bottom:8px;position:relative}
.tur p{font-size:15px;color:var(--m80);position:relative}

/* ---------- mistakes (dark) ---------- */
.hatalar{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.hatalar h2{grid-column:1/6}
.hatalar ol{grid-column:7/13;list-style:none;counter-reset:h}
.hatalar li{counter-increment:h;display:grid;grid-template-columns:56px 1fr;gap:8px;padding:22px 0;border-bottom:1px solid var(--k15);font-size:19px;line-height:1.45}
.hatalar li::before{content:counter(h,decimal-leading-zero);font-size:13px;font-weight:600;color:#AEB8FF;padding-top:5px}

/* ---------- FAQ ---------- */
.sss{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.sss h2{grid-column:1/5}
.sss-liste{grid-column:6/13;border-top:1px solid var(--murekkep)}
.sss details{border-bottom:1px solid var(--m15)}
.sss summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.015em}
.sss summary::-webkit-details-marker{display:none}
.sss summary i{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--m15);display:grid;place-items:center;font-style:normal;transition:transform .4s var(--e-out),background .3s,color .3s}
.sss details[open] summary i{transform:rotate(45deg);background:var(--mavi);color:#fff;border-color:var(--mavi)}
.sss details p{padding:0 60px 26px 0;font-size:17px;color:var(--m80);max-width:62ch}

/* ---------- CTA + next ---------- */
.s-cta{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.sonraki{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:72px var(--pad);border-top:1px solid var(--m15);background:var(--kagit2);transition:background .4s}
.sonraki:hover{background:var(--mavi2)}
.sonraki strong{display:block;font-size:clamp(48px,8vw,140px);font-weight:750;font-stretch:84%;letter-spacing:-.05em;line-height:.9;margin-top:12px}
.sonraki i{font-style:normal;font-size:clamp(40px,5vw,80px);transition:transform .5s var(--e-out)}
.sonraki:hover i{transform:translateX(12px)}

/* ---------- attorney page ---------- */
.v-hero{min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding:calc(var(--hd) + 40px) var(--pad) 64px}
.v-hero .s-hero-kopya{grid-column:1/7;align-self:end}
.v-madalyon{grid-column:7/13;position:relative;aspect-ratio:1}
.v-madalyon svg{position:absolute;inset:0;width:100%;height:100%}
.v-yazi{font-family:Archivo,sans-serif;font-size:11px;font-weight:600;font-stretch:68%;letter-spacing:3.3px;fill:var(--m80)}
.ilkeler{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--k15)}
.ilkeler article{padding:30px 24px 34px 0}
.ilkeler article+article{padding-left:24px;border-left:1px solid var(--k15)}
.ilkeler span{font-size:46px;font-weight:800;font-stretch:125%;color:#AEB8FF;line-height:1}
.ilkeler h3{font-size:clamp(22px,1.9vw,28px);font-weight:650;font-stretch:92%;letter-spacing:-.025em;line-height:1.08;margin:16px 0 10px}
.ilkeler p{color:var(--k80);font-size:16px}
.alinti{font-size:clamp(30px,3.8vw,62px);font-weight:560;font-stretch:94%;letter-spacing:-.035em;line-height:1.08;max-width:22ch}
.alinti em{font-style:italic;font-weight:400;color:var(--mavi)}

/* ---------- contact page ---------- */
.konular{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.konu{position:relative;display:flex;flex-direction:column;gap:12px;min-height:230px;padding:26px;border-radius:22px;background:var(--sayfa);transition:transform .5s var(--e-out),box-shadow .4s}
.konu:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(14,26,21,.3)}
.konu span{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--mavi)}
.konu h3{font-size:clamp(23px,2vw,31px);font-weight:650;font-stretch:92%;letter-spacing:-.03em;line-height:1.04}
.konu p{color:var(--m80);margin-top:auto;font-size:15px;max-width:34ch}
.konu i{position:absolute;right:24px;top:22px;font-style:normal;font-size:20px;transition:transform .4s var(--e-out)}
.konu:hover i{transform:translate(3px,-3px)}
.yazi-formu{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.yazi-formu label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--m60)}
.yazi-formu input,.yazi-formu select,.yazi-formu textarea{border:1px solid var(--m15);border-radius:14px;background:var(--sayfa);padding:14px 16px;font-size:17px;color:var(--murekkep);outline:none;transition:border-color .2s}
.yazi-formu input:focus,.yazi-formu select:focus,.yazi-formu textarea:focus{border-color:var(--mavi)}
.yazi-formu .tam{grid-column:1/-1}
.yazi-formu textarea{min-height:150px;resize:vertical}
.adres-izgara{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.adres-buyuk{font-size:clamp(28px,3vw,48px);font-weight:600;font-stretch:92%;letter-spacing:-.03em;line-height:1.12}
.iletisim-satir{display:flex;flex-direction:column;gap:12px;font-size:20px}
.iletisim-satir a{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--m15);transition:color .2s,padding .4s var(--e-out)}
.iletisim-satir a:hover{color:var(--mavi);padding-left:10px}

/* ---------- 404 ---------- */
.yok{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:calc(var(--hd) + 40px) var(--pad) 80px}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .s-hero,.v-hero{grid-template-columns:1fr;row-gap:28px;min-height:auto;padding-top:calc(var(--hd) + 32px)}
  .s-hero-kopya,.s-sahne,.v-hero .s-hero-kopya,.v-madalyon{grid-column:1}
  .s-sahne,.v-madalyon{grid-row:1;width:min(78vw,480px);margin:0 auto}
  .kunye4{grid-template-columns:1fr 1fr}
  .kunye4>div:nth-child(3){padding-left:0;border-left:0}
  .surec,.hatalar,.sss{grid-template-columns:1fr;row-gap:36px}
  .surec-bas,.surec-adimlar,.hatalar h2,.hatalar ol,.sss h2,.sss-liste{grid-column:1}
  .surec-bas{position:relative;top:auto}
  .turler,.konular{grid-template-columns:1fr 1fr}
  .ilkeler{grid-template-columns:1fr 1fr}
  .ilkeler article:nth-child(3){padding-left:0;border-left:0}
  .adres-izgara{grid-template-columns:1fr}
}
@media (max-width:640px){
  .kunye4,.turler,.konular,.ilkeler{grid-template-columns:1fr}
  .kunye4>div,.kunye4>div+div,.ilkeler article,.ilkeler article+article{padding:18px 0;border-left:0;border-bottom:1px solid var(--m15)}
  .yazi-formu{grid-template-columns:1fr}
  .sonraki{flex-direction:column;align-items:flex-start}
  .sss details p{padding-right:0}
}

/* ================= MARKA scene: one name, six kinds of mark ================= */
.mt{position:relative;height:620vh}
.mt-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,88px);align-items:center;padding:calc(var(--hd) + 16px) var(--pad) 28px;max-width:1440px;margin:0 auto}
.mt-sol{display:flex;flex-direction:column;gap:22px}
.mt-liste{list-style:none;border-top:1px solid var(--murekkep);margin-top:6px}
.mt-liste li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:6px;padding:13px 0;border-bottom:1px solid var(--m15);cursor:pointer;opacity:.38;transition:opacity .4s}
.mt-liste li.gecti{opacity:.6}
.mt-liste li.acik{opacity:1}
.mt-liste b{font-size:12px;font-weight:600;color:var(--mavi);padding-top:7px;font-variant-numeric:tabular-nums}
.mt-liste h3{font-size:clamp(20px,1.7vw,27px);font-weight:650;font-stretch:90%;letter-spacing:-.025em;line-height:1.15}
.mt-liste p{font-size:15px;color:var(--m80);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--e-out),opacity .4s,margin .4s}
.mt-liste li.acik p{max-height:60px;opacity:1;margin-top:4px}
.mt-liste li>i{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mavi);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.mt-sahne{display:grid;place-items:center}
.mt-kutu{position:relative;width:min(100%,74vh);aspect-ratio:1;background:var(--sayfa);border-radius:6px;overflow:hidden;container-type:size;box-shadow:0 1px 0 var(--m08),0 40px 80px -50px rgba(14,26,21,.6)}
.mt-zemin{position:absolute;inset:0;background:var(--mavi);clip-path:circle(0% at 26% 50%);transition:clip-path 1.1s var(--e-out)}
.mt.s3 .mt-zemin,.mt.s4 .mt-zemin{clip-path:circle(150% at 26% 50%)}
.mt-logo{position:absolute;inset:0;transition:opacity .6s,transform .9s var(--e-out)}
.mt-sembol{position:absolute;left:50%;top:50%;width:44cqw;translate:-50% -50%;scale:.2;opacity:0;overflow:visible;transition:translate 1s var(--e-out),scale 1s var(--e-out),opacity .5s}
.mt-sembol path,.mt-sembol circle{fill:transparent;stroke:var(--murekkep);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--e-out),fill .6s .5s,stroke .6s}
.mt-kelime{position:absolute;left:50%;top:50%;translate:-50% -50%;white-space:nowrap;font-size:calc(78cqw / (var(--n,6) * .66));font-weight:800;font-stretch:88%;letter-spacing:-.02em;line-height:1;color:var(--murekkep);transition:translate 1s var(--e-out),scale 1s var(--e-out),opacity .5s,letter-spacing .9s var(--e-out),color .6s}
.mt-kelime span{display:inline-block}
.mt.s1 .mt-sembol{scale:1;opacity:1}
.mt.s1 .mt-sembol path,.mt.s1 .mt-sembol circle,.mt.s2 .mt-sembol path,.mt.s2 .mt-sembol circle,.mt.s3 .mt-sembol path,.mt.s3 .mt-sembol circle,.mt.s4 .mt-sembol path,.mt.s4 .mt-sembol circle{stroke-dashoffset:0;fill:var(--murekkep)}
.mt.s1 .mt-sembol circle,.mt.s2 .mt-sembol circle{fill:var(--mavi);stroke:var(--mavi)}
.mt.s1 .mt-kelime{opacity:0;letter-spacing:.6em;scale:.8}
.mt.s2 .mt-sembol,.mt.s3 .mt-sembol,.mt.s4 .mt-sembol{opacity:1;scale:.34;translate:calc(-50% - 21cqw) -50%}
.mt.s2 .mt-kelime,.mt.s3 .mt-kelime,.mt.s4 .mt-kelime{scale:.6;translate:calc(-50% + 10cqw) -50%}
.mt.s3 .mt-kelime,.mt.s4 .mt-kelime{color:#fff}
.mt.s3 .mt-sembol path,.mt.s4 .mt-sembol path{fill:#fff;stroke:#fff}
.mt.s3 .mt-sembol circle,.mt.s4 .mt-sembol circle{fill:var(--murekkep);stroke:var(--murekkep)}
.mt.s4 .mt-logo{transform:translateY(-9cqw)}
.mt.s4 .mt-kelime span{animation:mtZipla .8s var(--e-std) infinite;animation-delay:calc(var(--i) * .07s)}
@keyframes mtZipla{0%,100%{transform:none}35%{transform:translateY(-14%)}}
.mt-dalga{position:absolute;left:14%;right:14%;top:58%;height:18%;display:flex;align-items:center;gap:1%;opacity:0;transition:opacity .5s}
.mt-dalga i{flex:1;height:calc(var(--h) * 100%);background:#fff;border-radius:99px;transform:scaleY(.05);transition:transform .6s var(--e-out)}
.mt.s4 .mt-dalga{opacity:1}
.mt.s4 .mt-dalga i{transform:scaleY(1);animation:mtDalga .9s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes mtDalga{to{transform:scaleY(.25)}}
.mt.s5 .mt-logo{opacity:0;transform:scale(.7)}
.mt-kod{position:absolute;left:6%;top:6%;font-size:12px;font-weight:600;letter-spacing:.06em;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .5s .4s,transform .6s .4s var(--e-out)}
.mt.s3 .mt-kod{opacity:1;transform:none}
.mt-alt{position:absolute;left:6%;right:6%;bottom:5%;display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--m60);transition:color .6s}
.mt.s3 .mt-alt,.mt.s4 .mt-alt{color:rgba(255,255,255,.8)}
.mt-alt [data-mt-no]{color:var(--muhur)}
.mt.s3 .mt-alt [data-mt-no],.mt.s4 .mt-alt [data-mt-no]{color:#fff}
.mt-sayac{flex:1;height:1px;background:currentColor;opacity:.35;position:relative}
.mt-sayac i{position:absolute;inset:-.5px 0;background:currentColor;transform-origin:0 50%;transform:scaleX(0)}
.mt-3d{position:absolute;inset:0;display:grid;place-items:center;perspective:1400px;opacity:0;transform:translateY(8cqw);transition:opacity .6s,transform 1s var(--e-out)}
.mt.s5 .mt-3d{opacity:1;transform:none}
.mt-kup{position:relative;width:36cqw;height:46cqw;transform-style:preserve-3d;animation:mtDon 9s linear infinite}
@keyframes mtDon{from{transform:rotateX(-16deg) rotateY(0)}to{transform:rotateX(-16deg) rotateY(360deg)}}
.mt-f{position:absolute;left:0;top:0;width:36cqw;height:46cqw;background:var(--mavi);backface-visibility:hidden;display:grid;place-items:center}
.mt-f.on{transform:translateZ(12cqw)}
.mt-f.arka{transform:rotateY(180deg) translateZ(12cqw)}
.mt-f.sag{width:24cqw;left:6cqw;transform:rotateY(90deg) translateZ(18cqw);background:#2133B4}
.mt-f.sol{width:24cqw;left:6cqw;transform:rotateY(-90deg) translateZ(18cqw);background:#2133B4}
.mt-f.ust{height:24cqw;top:11cqw;transform:rotateX(90deg) translateZ(23cqw);background:#4A5CE6}
.mt-f.alt{height:24cqw;top:11cqw;transform:rotateX(-90deg) translateZ(23cqw);background:#18268F}
.mt-y{display:flex;flex-direction:column;align-items:center;gap:2cqw;color:#fff}
.mt-mini{display:flex;flex-direction:column;align-items:center;gap:2cqw}
.mt-mini svg{width:11cqw;fill:#fff}
.mt-mini svg circle{fill:var(--murekkep)}
.mt-mini b{font-size:4cqw;font-weight:800;font-stretch:88%;letter-spacing:.02em}
.mt-golge{position:absolute;left:50%;top:78%;width:46cqw;height:5cqw;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(14,26,21,.3),transparent)}

/* ================= PATENT scene: Figure 1 ================= */
.pt{position:relative;height:560vh;background:var(--sayfa)}
.pt-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"ust istem" "pafta pafta";gap:18px clamp(28px,5vw,80px);padding:calc(var(--hd) + 18px) var(--pad) 24px;max-width:1440px;margin:0 auto}
.pt-ust{grid-area:ust;display:flex;flex-direction:column;gap:14px}
.pt-ust .giris-metni{font-size:16px;max-width:52ch}
.pt-istem{grid-area:istem;align-self:end;border-left:2px solid var(--murekkep);padding-left:22px;min-height:9.5em}
.pt-istem em{font-style:normal;color:var(--m45)}
.pt-metin{margin-top:10px;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--murekkep)}
.pt-metin b{color:var(--mavi);font-weight:700}
.pt-imlec{display:inline-block;width:2px;height:1.05em;background:var(--mavi);vertical-align:-.15em;margin-left:2px;animation:ptYan .8s steps(1) infinite}
@keyframes ptYan{50%{opacity:0}}
.pt-pafta{grid-area:pafta;position:relative;min-height:0;border:1px solid var(--murekkep);padding:14px;display:flex;flex-direction:column;background:var(--sayfa)}
.pt-pafta::before{content:"";position:absolute;inset:6px;border:1px solid var(--m15);pointer-events:none}
.pt-cizim{flex:1;min-height:0;width:100%;height:100%}
.pt-cizim [pathLength],.pt-eksen line{fill:none;stroke:var(--murekkep);stroke-width:2.2;vector-effect:non-scaling-stroke}
.pt-eksen line{stroke-width:1;stroke:var(--muhur)}
.pt-dolgu{fill:url(#tarama);stroke:none;opacity:0}
.pt-ref path{fill:none;stroke:var(--murekkep);stroke-width:1.2;vector-effect:non-scaling-stroke}
.pt-ref circle{fill:var(--murekkep)}
.pt-ref text{font:700 26px Archivo,sans-serif;fill:var(--murekkep);transition:fill .3s}
.pt-ref.anildi text{fill:var(--mavi)}
.pt-ref.simdi text{fill:var(--muhur)}
.pt-ref.simdi circle{fill:var(--muhur)}
.pt-kunye{position:absolute;right:14px;bottom:14px;display:flex;border:1px solid var(--murekkep);background:var(--sayfa);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.pt-kunye span{padding:7px 12px}
.pt-kunye span+span{border-left:1px solid var(--murekkep);color:var(--m60)}
.pt-kunye span:first-child{color:var(--muhur)}

/* ================= TASARIM scene: seven views ================= */
.ts{position:relative;height:640vh}
.ts-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:1fr auto;gap:18px clamp(28px,5vw,80px);padding:calc(var(--hd) + 18px) var(--pad) 22px;max-width:1440px;margin:0 auto}
.ts-sol{display:flex;flex-direction:column;gap:20px;align-self:center}
.ts-sol .giris-metni{font-size:17px}
.ts-gorunus{display:flex;align-items:baseline;gap:16px;margin-top:18px;overflow:hidden}
.ts-gorunus b{display:inline-block;font-size:clamp(80px,9vw,150px);font-weight:750;font-stretch:84%;letter-spacing:-.05em;line-height:.85;color:var(--muhur)}
.ts-gorunus span{display:inline-block;font-size:clamp(28px,3vw,48px);font-weight:650;font-stretch:90%;letter-spacing:-.03em}
.ts-sahne{position:relative;min-height:0;display:grid;place-items:center}
.ts-sahne canvas{height:100%;max-height:100%;width:auto;max-width:100%;aspect-ratio:1;background-color:var(--sayfa);background-image:linear-gradient(var(--m08) 1px,transparent 1px),linear-gradient(90deg,var(--m08) 1px,transparent 1px);background-size:5% 5%;border:1px solid var(--murekkep)}
.ts-olcu{display:none}
.ts-serit{grid-column:1/-1;list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;border-top:1px solid var(--murekkep);padding-top:12px}
.ts-serit li{display:flex;align-items:center;gap:10px;opacity:.3;transition:opacity .4s}
.ts-serit li.cekildi{opacity:.75}
.ts-serit li.simdi{opacity:1}
.ts-serit canvas{width:52px;height:52px;flex:none;border:1px solid var(--m15);background:var(--sayfa);transition:border-color .3s}
.ts-serit li.simdi canvas{border-color:var(--muhur)}
.ts-serit span{font-size:12px;font-weight:600;line-height:1.2}

@media (max-width:900px){
  .mt-pin{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:16px}
  .mt-sahne{order:-1}
  .mt-kutu{width:min(100%,44vh)}
  .mt-sol .etiket,.mt-sol .baslik{display:none}
  .mt-liste li{display:none;opacity:1}
  .mt-liste li.acik{display:grid}
  .pt-pin{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"ust" "pafta" "istem";align-content:start}
  .pt-ust .giris-metni{display:none}
  .pt-pafta{min-height:30vh;padding:8px}
  .pt-kunye{position:static;margin-top:6px;align-self:flex-start;font-size:9px}
  .pt-kunye span{padding:5px 7px}
  .pt-istem{min-height:0;align-self:start}
  .pt-metin{font-size:15px}
  .ts-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .ts-sol .giris-metni,.ts-sol .etiket{display:none}
  .ts-sol{gap:6px}
  .ts-gorunus{margin-top:0}
  .ts-gorunus b{font-size:56px}
  .ts-sahne canvas{width:min(100%,50vh);height:auto}
  .ts-serit{display:flex;overflow-x:auto;gap:8px}
  .ts-serit li{flex:none;flex-direction:column;gap:4px}
  .ts-serit canvas{width:44px;height:44px}
  .ts-serit span{font-size:10px}
}
html.rm .mt,html.rm .pt,html.rm .ts{height:auto}
html.rm .mt-pin,html.rm .pt-pin,html.rm .ts-pin{position:relative;height:auto;min-height:100vh}