@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..800&family=Instrument+Serif&family=Outfit:wght@300..600&family=Space+Grotesk:wght@500..700&family=Syne:wght@600..800&family=Unbounded:wght@400..900&display=swap');
/* ================= GüvenPatent · logo workshop ================= */
.q-no{font-size:12px;font-weight:600;font-stretch:80%;letter-spacing:.14em;text-transform:uppercase;color:var(--mavi)}

/* ---------- hero: title left, form right ---------- */
.at-hero{padding:calc(var(--hd) + 80px) 0 64px}
.at-hero-izgara{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:end;margin-top:26px}
.at-hero .giris-metni{margin-top:28px}
.at-form{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.at-alan{display:flex;flex-direction:column;gap:6px;width:100%}
.at-alan span,.at-secim legend,.at-g-ad{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--m60)}
.at-alan span i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--m45);margin-left:6px}
.at-alan input{width:100%;border:0;border-bottom:2px solid var(--murekkep);background:transparent;padding:6px 0 8px;font-size:22px;font-weight:600;outline:none;border-radius:0;transition:border-color .2s}
.at-alan-buyuk input{font-size:clamp(34px,3.4vw,52px);font-weight:800;font-stretch:88%;letter-spacing:-.02em;text-transform:uppercase;caret-color:var(--mavi)}
.at-alan input:focus{border-color:var(--mavi)}
.at-alan input::placeholder{color:var(--m45);font-weight:400}
.at-secim{border:0;display:flex;flex-direction:column;gap:10px;width:100%}
.at-secim>div{display:flex;flex-wrap:wrap;gap:6px}
.at-secim button,.at-modlar button{font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--m15);background:var(--sayfa);transition:background .2s,color .2s,border-color .2s}
.at-secim button:hover,.at-modlar button:hover{border-color:var(--murekkep)}
.at-secim button[aria-pressed="true"],.at-modlar button[aria-pressed="true"]{background:var(--murekkep);border-color:var(--murekkep);color:var(--kagit)}

/* ---------- the drawing sheet ---------- */
.at-pafta{padding:24px 0 clamp(80px,12vh,140px)}
.at-pafta-bas{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-top:1px solid var(--murekkep);border-bottom:1px solid var(--m15);margin-bottom:28px}
.at-pafta-kunye{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--m60)}
.at-pafta-kunye b{color:var(--muhur)}
.at-pafta-kunye span:nth-child(2){color:var(--murekkep)}
.at-yeniden{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;border:1px solid var(--murekkep);transition:background .2s,color .2s}
.at-yeniden i{font-style:normal;transition:transform .5s var(--e-out)}
.at-yeniden:hover{background:var(--murekkep);color:var(--kagit)}
.at-yeniden:hover i{transform:rotate(180deg)}
.at-izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px}
.at-taslak{cursor:pointer;outline:none}
.at-kagit{position:relative;background:var(--sayfa);padding:10px;box-shadow:0 1px 0 var(--m08);transition:transform .45s var(--e-out),box-shadow .45s var(--e-out)}
/* crop marks at the corners, like a print sheet */
.at-kagit::before,.at-kagit::after{content:"";position:absolute;inset:-7px;pointer-events:none;background:
  linear-gradient(var(--m45),var(--m45)) left 0 top 7px/5px 1px no-repeat,linear-gradient(var(--m45),var(--m45)) left 7px top 0/1px 5px no-repeat,
  linear-gradient(var(--m45),var(--m45)) right 0 top 7px/5px 1px no-repeat,linear-gradient(var(--m45),var(--m45)) right 7px top 0/1px 5px no-repeat}
.at-kagit::after{background:
  linear-gradient(var(--m45),var(--m45)) left 0 bottom 7px/5px 1px no-repeat,linear-gradient(var(--m45),var(--m45)) left 7px bottom 0/1px 5px no-repeat,
  linear-gradient(var(--m45),var(--m45)) right 0 bottom 7px/5px 1px no-repeat,linear-gradient(var(--m45),var(--m45)) right 7px bottom 0/1px 5px no-repeat}
.at-kagit canvas{width:100%;height:auto;aspect-ratio:4/3}
.at-taslak figcaption{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;margin-top:12px;font-size:13px}
.at-taslak figcaption b{font-weight:700;font-variant-numeric:tabular-nums}
.at-taslak figcaption span{color:var(--m60)}
.at-taslak figcaption em{font-style:normal;font-weight:600;color:var(--mavi);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--e-out)}
.at-taslak:hover .at-kagit,.at-taslak:focus-visible .at-kagit{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 22px 40px -22px rgba(14,26,21,.45)}
.at-taslak:hover figcaption em,.at-taslak:focus-visible figcaption em{opacity:1;transform:none}
.at-taslak.secik .at-kagit{box-shadow:0 0 0 2px var(--mavi)}
.at-taslak.secik figcaption em{opacity:1;transform:none}
.at-not{margin-top:26px;font-size:13px;color:var(--m60);max-width:70ch}

/* ---------- the desk: an identity book ---------- */
.at-masa{background:var(--kagit2);padding:clamp(88px,12vh,140px) 0 clamp(96px,14vh,160px);scroll-margin-top:0;counter-reset:yay}
.kt-bas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:22px;align-items:end}
.kt-bas .q-no{grid-column:1/-1}
.kt-baslik{grid-column:1/9;font-size:clamp(52px,8.2vw,150px);overflow-wrap:anywhere}
.kt-baslik span,.kt-baslik em{display:block}
.kt-bas .giris-metni{grid-column:9/13;font-size:17px;padding-bottom:.6em}
.kt-kunye{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--murekkep);margin-top:18px}
.kt-kunye div{padding:12px 16px 0 0;border-right:1px solid var(--m15);margin-right:16px}
.kt-kunye div:last-child{border:0}
.kt-kunye dt{font-size:11px;font-weight:600;font-stretch:80%;letter-spacing:.14em;text-transform:uppercase;color:var(--m60)}
.kt-kunye dd{font-size:15px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.kt-icindekiler{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:40px;border-top:1px solid var(--m15);border-bottom:1px solid var(--m15)}
.kt-icindekiler a{display:flex;gap:8px;align-items:baseline;padding:12px 18px 12px 0;font-size:14px;font-weight:550;color:var(--m80);transition:color .2s}
.kt-icindekiler a b{font-size:11px;font-weight:700;color:var(--mavi);font-variant-numeric:tabular-nums}
.kt-icindekiler a:hover{color:var(--mavi)}

/* a spread: number, title, designer's note; then panels on a 12-column grid */
.ky{margin-top:clamp(96px,13vh,170px);scroll-margin-top:24px;counter-increment:yay;counter-reset:pano}
.ky-bas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;border-top:1px solid var(--murekkep);padding-top:16px;margin-bottom:28px}
.ky-no{grid-column:1/3;font-size:clamp(64px,7.4vw,124px);font-weight:700;font-stretch:72%;letter-spacing:-.05em;line-height:.78;color:var(--mavi);font-variant-numeric:tabular-nums}
.ky-ad{grid-column:3/8;font-size:clamp(28px,2.9vw,46px);font-weight:600;font-stretch:92%;letter-spacing:-.03em;line-height:1.02}
.ky-not{grid-column:8/13;font-size:16px;line-height:1.5;color:var(--m80);max-width:46ch}
.ky-izgara{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.ky-p{grid-column:span var(--g);min-width:0;counter-increment:pano}
.ky-tuval{position:relative;background:var(--kagit)}
.ky-tuval canvas{width:100%;display:block}
.ky-p figcaption{display:flex;gap:10px;margin-top:9px;font-size:12.5px;color:var(--m60);line-height:1.35}
.ky-p figcaption::before{content:counter(yay,decimal-leading-zero) "." counter(pano);font-weight:700;color:var(--murekkep);font-variant-numeric:tabular-nums}

/* the floating toolbar: colour and ground for the whole book */
.kt-cubuk{position:sticky;bottom:16px;z-index:30;display:flex;align-items:center;gap:18px;width:max-content;max-width:100%;margin:56px auto 0;padding:7px 8px 7px 20px;border-radius:999px;background:var(--murekkep);color:var(--kagit);box-shadow:0 18px 40px -18px rgba(14,26,21,.6)}
.kt-c-ad{font-size:13px;font-weight:700;font-stretch:84%;letter-spacing:.06em;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-c-grup{display:flex;align-items:center;gap:10px}
.kt-c-et{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--k60)}
.kt-cubuk .at-paletler{display:flex;gap:6px;width:auto}
.kt-cubuk .at-palet{display:flex;width:44px;height:26px;border-radius:999px;border:2px solid transparent;overflow:hidden;background:none}
.kt-cubuk .at-palet span{flex:1;height:100%}
.kt-cubuk .at-palet b{display:none}
.kt-cubuk .at-palet[aria-pressed="true"]{border-color:var(--kagit)}
.kt-cubuk .at-modlar button{font-size:13px;padding:6px 12px;background:transparent;color:var(--kagit);border-color:var(--k15)}
.kt-cubuk .at-modlar button:hover{border-color:var(--kagit)}
.kt-cubuk .at-modlar button[aria-pressed="true"]{background:var(--kagit);color:var(--murekkep);border-color:var(--kagit)}
.kt-c-btn{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--k15);white-space:nowrap;transition:background .2s,color .2s}
.kt-c-btn i{font-style:normal}
.kt-c-btn:hover{background:var(--kagit);color:var(--murekkep)}
.kt-c-indir{background:var(--mavi);border-color:var(--mavi);color:#fff}
.at-palet{display:grid;grid-template-columns:repeat(3,1fr)}
.at-modlar{display:flex;gap:6px}
.at-g-ad{margin-bottom:-8px}
.at-indir{display:flex;flex-direction:column;border-top:1px solid var(--murekkep);width:100%}
.at-indir button{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--m15);text-align:left;transition:padding .35s var(--e-out),color .2s}
.at-indir b{font-size:20px;font-weight:800;font-stretch:88%;min-width:46px}
.at-indir span{font-size:14px;color:var(--m60)}
.at-indir button::after{content:"↓";margin-left:auto;font-weight:700;color:var(--mavi)}
.at-indir button:hover{padding-left:10px;color:var(--mavi)}
.at-indir button[data-mesgul]{opacity:.6;pointer-events:none}
.ky-son{margin-top:clamp(64px,9vh,110px)}
.at-tescil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.at-tescil>div:first-child{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.at-tescil .soluk{max-width:48ch}
.at-tescil-sag{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.at-tescil .at-not{margin-top:0}

@media (max-width:1100px){
  .at-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
  .at-hero-izgara,.at-tescil{grid-template-columns:1fr}
  .kt-baslik,.kt-bas .giris-metni{grid-column:1/-1}
  .ky-no{grid-column:1/-1;margin-bottom:10px}
  .ky-ad{grid-column:1/6}
  .ky-not{grid-column:6/13}
  .kt-c-ad{display:none}
}
@media (max-width:760px){
  .ky-bas{display:block}
  .ky-no{font-size:72px;margin-bottom:6px}
  .ky-ad{font-size:30px}
  .ky-not{margin-top:12px;font-size:15px}
  .ky-izgara{gap:12px}
  .ky-p{grid-column:span var(--ms)}
  .kt-kunye{grid-template-columns:1fr 1fr;row-gap:12px}
  .kt-kunye div:nth-child(2){border:0}
  .kt-icindekiler{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);padding-left:var(--pad)}
  .kt-icindekiler a{white-space:nowrap}
  .kt-cubuk{width:100%;gap:8px 10px;padding:8px;flex-wrap:wrap;justify-content:center;border-radius:20px}
  .kt-cubuk .kt-c-btn{flex:1 1 0;justify-content:center;padding:9px 10px}
  .kt-c-et{display:none}
  .kt-cubuk .at-palet{width:36px}
  .kt-cubuk .at-modlar button{padding:6px 10px}
}
@media (max-width:640px){
  .at-hero{padding-top:calc(var(--hd) + 48px)}
  .at-izgara{grid-template-columns:1fr 1fr;gap:26px 14px}
  .at-taslak figcaption{grid-template-columns:auto 1fr;font-size:12px}
  .at-taslak figcaption em{display:none}
  .at-kagit{padding:6px}
  .at-pafta-bas{flex-direction:column;align-items:flex-start}
  .at-form .btn{width:100%;justify-content:space-between}
}