@import url('/fonts/manrope.css');
/* Library styles are scoped so all training pages keep their existing layout. */
@property --library-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
body.in-library{background:#100c23;color:#fff;--muted:#d5cfdf}
.in-library #vipScene{background:radial-gradient(ellipse at 0% 5%,#641239 0,transparent 55%),radial-gradient(ellipse at 65% 0%,#3e216e 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#132e60 0,transparent 55%),#100c23!important}
.in-library #vipScene>.aurora,.in-library #vipScene>.stars{display:none}
.in-library #vipScene>.laser{display:none}
.library-edge-trace{position:fixed;inset:0 12px;z-index:3;pointer-events:none;overflow:hidden}
.library-edge-trace:before{content:'';position:absolute;left:0;top:-160px;width:2px;height:140px;background:linear-gradient(transparent,#c896ef,#ffb7de,transparent);box-shadow:0 0 9px #da7ab6;animation:library-edge-fall 7s linear infinite}
.library-edge-trace:after{content:'';position:absolute;right:0;top:-160px;width:2px;height:140px;background:linear-gradient(transparent,#c896ef,#ffb7de,transparent);box-shadow:0 0 9px #da7ab6;animation:library-edge-fall 7s linear infinite}
body:not(.in-library) .library-edge-trace{display:none}
@keyframes library-edge-fall{to{transform:translateY(calc(100vh + 320px))}}
.in-library header{height:auto;min-height:108px;padding:20px max(32px,5vw);gap:20px;flex-wrap:wrap;background:#130e25a6;border-bottom:1px solid #ffffff24}
.in-library .brand{padding:0;gap:20px;max-width:100%;color:#fff}
.library-logo{width:112px;min-width:112px;height:62px;background:#fff;border-radius:14px;display:grid;place-items:center;box-shadow:0 6px 18px #0003;position:relative;transform:perspective(600px) rotateY(-6deg)}
.library-logo img{width:96px;height:45px;object-fit:contain}
.library-logo:after{content:'';position:absolute;inset:-4px;border:1px solid #f6c5e155;border-radius:18px;box-shadow:0 0 18px #e8a5da22;animation:library-logo-light 5s ease-in-out infinite}
@keyframes library-logo-light{50%{box-shadow:0 0 22px #e8a5da60}}
.in-library .library-brand-title{font-size:clamp(16px,1.55vw,24px);font-weight:750;line-height:1.25;letter-spacing:.3px}
.in-library .edition{display:none}
.in-library .library-location{color:#ded7eb;font-size:13px}
.in-library .admin-entry{font-size:13px;min-height:44px;color:#fff;background:#251b3b;border-color:#ffffff55;margin-left:0}
.library-page{max-width:1600px;padding:35px max(32px,4vw) 28px}
.library-intro{margin-bottom:28px;max-width:900px}
.library-kicker{font-size:13px;letter-spacing:1px;font-weight:750;color:#f8bfd9;margin:0 0 12px}
.library-intro h1{font-size:clamp(32px,3.3vw,48px);letter-spacing:-1.4px;line-height:1.18;margin:0 0 13px;color:#fff;font-weight:650}
.library-intro h1 span{color:#fff}
.library-intro>p:last-child{font-size:16px;color:#ded7eb;line-height:1.6;margin:0}
.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.library-card{min-width:0;position:relative;isolation:isolate;border:1px solid #ffffff40;border-radius:28px;background:linear-gradient(135deg,#ffffff14,transparent 48%),#171326b8;backdrop-filter:blur(20px);box-shadow:0 20px 55px #0003,inset 0 1px 0 #ffffff30;overflow:hidden;display:flex;flex-direction:column}
.library-card:after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--library-angle),transparent 0deg,transparent 285deg,#a78aff88 315deg,#ffb6d6 345deg,transparent 359deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:library-rim 8s linear infinite;z-index:2}
@keyframes library-rim{to{--library-angle:360deg}}
.library-card-top{display:flex;justify-content:space-between;gap:12px;padding:23px 25px 0;color:#f2d8eb;font-size:12px;font-weight:750;letter-spacing:.7px}
.library-card-top>span:last-child{font-size:15px;color:#d4cae6}
.library-product{height:250px;margin:10px 16px 0;position:relative;display:grid;place-items:center;isolation:isolate}
.library-halo{position:absolute;inset:15% 2%;border-radius:50%;background:radial-gradient(ellipse,#9a80c54f,transparent 70%);filter:blur(20px);z-index:-1}
.library-product img{width:100%;height:100%;max-height:230px;object-fit:contain;filter:drop-shadow(0 16px 14px #0006);position:relative}
.library-appliance .library-product img{max-height:245px;width:auto;max-width:90%}
.library-climate .library-halo{background:radial-gradient(ellipse,#829ec43d,transparent 70%)}
.library-climate .library-product img{max-width:96%;filter:drop-shadow(0 12px 12px #0005)}
.library-card-copy{padding:22px 25px 25px;background:#171326;flex:1;display:flex;flex-direction:column;border-top:1px solid #ffffff12}
.library-model{font-size:12px;color:#d1c5df;margin:0 0 10px;line-height:1.5;min-height:36px}
.library-card h2{color:#fff;font-size:clamp(25px,2.05vw,32px);line-height:1.2;letter-spacing:-.6px;margin:0 0 13px;font-weight:700;min-height:2.4em;text-wrap:balance;overflow-wrap:normal;word-break:normal}
.library-description{font-size:15px;line-height:1.65;color:#ded7eb;margin:0 0 22px;min-height:4.95em}
.library-enter{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 18px;min-height:54px;border:1px solid #eed6ec;background:#eed6ec;color:#201329;border-radius:13px;font-size:16px;font-weight:800;margin-top:auto}
.library-enter::after{content:'';position:absolute;inset:0;z-index:3;cursor:pointer}
.library-enter:hover{background:#fff;color:#201329;box-shadow:0 4px 22px #f5c4eb30}
.library-enter:focus-visible{outline:3px solid #fff;outline-offset:5px}
.library-enter>span:last-child{font-size:23px;line-height:1}
.library-credits{margin:24px 0 0;padding-top:18px;border-top:1px solid #ffffff30;display:grid;gap:15px}
.library-credits div{display:grid;gap:5px}.library-credits dt{font-size:12px;color:#c9bdd8;line-height:1.5}.library-credits dd{margin:0;font-size:14px;font-weight:700;color:#fff;line-height:1.5}.library-credits dd span{display:block;font-size:13px;color:#ded7eb;font-weight:450}
.library-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#ded7eb;font-size:13px;padding:25px 2px 0;line-height:1.6}
.in-library footer{font-size:12px;color:#d5ccdf}.in-library footer b{color:#fff}
.tv-section-credits{margin:20px 0 30px;padding:22px 26px;border:1px solid #ffffff38;border-radius:18px;background:#171326;color:white}.tv-section-credits .library-credits{grid-template-columns:repeat(2,minmax(0,1fr));border:0;margin:0;padding:0}
@media(min-width:768px) and (max-width:1100px) and (orientation:landscape){.library-page{padding:26px 30px}.library-grid{gap:15px}.library-card-top,.library-card-copy{padding-left:18px;padding-right:18px}.library-product{height:220px}.library-product img{max-height:195px}.library-appliance .library-product img{max-height:215px}.library-card h2{font-size:25px}.library-model{min-height:54px}.library-description{min-height:6.6em}}
@media(max-width:767px),(min-width:768px) and (max-width:1100px) and (orientation:portrait){.library-grid{grid-template-columns:1fr;gap:24px}.library-page{max-width:760px;padding:28px 24px}.in-library header{padding:18px 24px;gap:16px;min-height:0}.in-library .brand{gap:14px}.library-logo{min-width:82px;width:82px;height:54px;border-radius:12px}.library-logo img{width:72px;height:38px}.in-library .library-brand-title{font-size:clamp(15px,3.5vw,21px)}.in-library #crumbs{display:none}.in-library .admin-entry{margin-left:auto}.library-intro{margin-bottom:24px}.library-intro h1{font-size:34px;letter-spacing:-1px}.library-intro h1 span{display:block}.library-product{height:250px}.library-card h2{min-height:0;font-size:30px}.library-description{min-height:0}.library-model{min-height:0;font-size:13px}.library-card-copy{padding:22px 24px}.library-bottom{font-size:13px}.tv-section-credits .library-credits{grid-template-columns:1fr}.library-edge-trace{inset:0 6px}}
@media(prefers-reduced-motion:reduce){.library-card:after,.library-logo:after,.library-edge-trace:before,.library-edge-trace:after{animation:none!important}.library-logo{transform:none}.library-edge-trace:before,.library-edge-trace:after{top:15%;height:70%;opacity:.4}}

@media (max-width:767px) {
 .library-page {padding:16px 14px 22px}
 .library-intro {margin-bottom:16px}
 .library-intro h1 {font-size:clamp(25px,7.5vw,34px)}
 .library-intro p:last-child {margin:8px 0 0;font-size:13px;line-height:1.4}
 .library-grid {gap:9px}
 .library-card {display:grid;grid-template-columns:minmax(76px,29%) minmax(0,1fr);align-items:center;border-radius:16px}
 .library-card-top {display:none}
 .library-product {height:84px;margin:0 0 0 6px}
 .library-product img {width:100%;height:100%;max-width:100%}
 .library-halo {max-width:100%;max-height:100%}
 .library-card-copy {padding:9px 10px;background:transparent;border:0}
 .library-model {display:none}
 .library-card h2 {font-size:clamp(16px,4.5vw,21px);margin:0 0 3px;text-wrap:initial}
 .library-description {font-size:11px;line-height:1.3;margin:0 0 4px}
 .library-enter {align-self:flex-start;gap:6px;min-height:0;padding:2px 0;border:0;background:transparent;color:#f6d9ed;font-size:11px}
 .library-enter:hover {background:transparent;color:#fff;box-shadow:none}
 .library-enter > span:last-child {font-size:13px}
 .library-card .library-credits {grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:4px 0 0;padding-top:4px}
 .library-card .library-credits div {gap:0}
 .library-card .library-credits dt,.library-card .library-credits dd,.library-card .library-credits dd span {font-size:9px;line-height:1.25}
}

/* Ortak kütüphanenin ekran boyutuna göre düzeni. */
body.in-library {font-family:Manrope,system-ui,sans-serif}
.in-library header {justify-content:center;min-height:0;padding:10px 16px;gap:0;backdrop-filter:none}
.in-library .brand {justify-content:center;gap:10px;text-align:center;font:inherit}
.in-library #crumbs {display:none}
.in-library .library-brand-title {font-size:clamp(15px,3.9vw,25px);letter-spacing:0}
.in-library .library-logo {width:38px;min-width:38px;height:38px;overflow:hidden;display:block;background:transparent;box-shadow:none;transform:none}
.in-library .library-logo img {display:block;width:auto;max-width:none;height:100%}
.in-library .library-logo::after {display:none}
.in-library .admin-entry {position:fixed;z-index:41;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));margin:0}
.in-library .ui-sound-toggle {bottom:max(66px,calc(env(safe-area-inset-bottom) + 54px))}
.library-page {padding-top:20px}
.library-intro {margin:0 auto 18px;text-align:center}
.library-kicker {margin-bottom:6px;letter-spacing:.2px}
.library-intro h1 {margin-bottom:7px}
.library-intro h1 span {display:inline}
.library-card-top {padding-top:13px}
.library-card-copy {padding-top:12px;padding-bottom:15px}
.library-card h2 {min-height:0;margin-bottom:6px}
.library-description {min-height:0;margin-bottom:10px}
.library-card .library-credits {margin-top:10px;padding-top:8px;gap:6px}
@media (min-width:768px) {
 .library-product {height:clamp(125px,16vw,200px);margin-top:4px}
 .library-product img {max-height:100%}
}
@media (min-width:768px) and (max-width:1100px) and (orientation:portrait) {
 .library-page {max-width:960px;padding:18px 24px}
 .library-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .library-card .library-credits {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px) {
 .library-page {padding-top:12px}
 .library-intro {margin-bottom:12px}
 .library-intro h1 {font-size:clamp(22px,6vw,32px)}
 .library-grid {gap:7px}
 .library-card-copy {padding:7px 9px}
 .library-card .library-credits {margin-top:3px;padding-top:3px;gap:4px}
 .library-description {margin-bottom:3px}
}

.library-appliance .library-product img,.library-climate .library-product img {
 width:auto;
 max-width:100%;
 aspect-ratio:1;
 border-radius:10px;
}

/* Equal image frames preserve the original aspect ratios. */
.in-library .library-logo {
 width:clamp(54px,12vw,76px);
 min-width:clamp(54px,12vw,76px);
 height:34px;
 overflow:visible;
}
.in-library .library-logo img {width:100%;height:100%;object-fit:contain}
.library-card .library-product {
 --product-image-size:clamp(124px,13vw,172px);
 height:var(--product-image-size);
}
.library-card .library-product img {
 width:min(100%,var(--product-image-size));
 height:auto;
 max-width:none;
 max-height:none;
 aspect-ratio:1;
 object-fit:contain;
 border-radius:0;
}
.library-appliance .library-product img,.library-climate .library-product img {
 object-fit:fill;
}
.library-appliance .library-product img {
 clip-path:polygon(33.3% 3.2%,66.5% 3.2%,67% 96.7%,33.1% 96.7%);
}
.library-climate .library-product img {
 clip-path:polygon(3.4% 37.2%,4.5% 36.4%,9.5% 36.4%,10.8% 34.4%,90% 34.4%,92.2% 36.4%,96.4% 36.8%,97% 39%,97% 59%,95.8% 65.2%,4.6% 65.2%,3.4% 59%);
}
@media (max-width:767px) {
 .library-card .library-product {--product-image-size:84px}
}

/* Entrance cards follow the three device layouts in the reference. */
.library-page {max-width:1240px;padding:clamp(18px,4vw,54px) clamp(12px,4vw,44px) 28px}
.library-intro {margin:0 auto clamp(14px,3vw,34px)}
.library-intro h1 {margin:0;font-size:clamp(24px,4vw,46px);line-height:1.18;letter-spacing:-.025em}
.library-grid {gap:clamp(8px,1.5vw,19px)}
.library-card {
 display:grid;
 grid-template-rows:minmax(0,1fr) auto;
 align-items:stretch;
 min-height:clamp(200px,26vw,340px);
 border-radius:clamp(15px,2vw,26px);
 border-color:#9c7bc4a3;
 background:radial-gradient(ellipse at 0 0,#ac307b42,transparent 65%),linear-gradient(145deg,#ffffff12,#11163366 60%,#10678355);
 box-shadow:inset 0 1px 3px #fbc3ff60,inset 0 -2px 5px #56ceff45,0 10px 24px #09071d50;
}
.library-card .library-product {
 --product-image-size:clamp(128px,18vw,245px);
 height:auto;
 min-height:0;
 margin:8px;
}
.library-card .library-product img {width:min(100%,var(--product-image-size))}
.library-card .library-card-copy {justify-content:center;align-items:center;text-align:center;background:transparent;border:0;padding:0 8px 14px}
.library-card h2 {font-size:clamp(14px,2.15vw,25px);line-height:1.15;margin:0;min-height:0;text-wrap:balance}
.library-card:focus-visible {outline:2px solid #fff;outline-offset:3px}
.library-team {margin:15px 0 0;font-size:13px;color:#e7ddf5}
.library-team summary {cursor:pointer;width:fit-content}
.library-team-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:12px}
.library-team h3 {margin:0;font-size:14px}
.library-team .library-credits {margin-top:6px;padding-top:6px}
@media (max-width:1100px) and (orientation:portrait),(max-width:767px) {
 .library-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .library-card {grid-template-columns:minmax(0,1fr);min-height:clamp(176px,30vw,275px)}
 .library-card.library-climate {grid-column:1 / -1;min-height:clamp(125px,22vw,195px)}
 .library-card .library-product {--product-image-size:clamp(112px,22vw,180px)}
 .library-card.library-climate .library-product {--product-image-size:clamp(150px,36vw,255px)}
 .library-card.library-climate .library-product img {position:absolute}
 .library-card h2 {font-size:clamp(14px,3.8vw,22px)}
}

.library-card .library-lead {margin:7px 0 0;line-height:1.25;color:#f3e5fb}
.library-card .library-lead strong,.library-card .library-lead span {display:block}
.library-card .library-lead strong {font-size:clamp(11px,1.25vw,15px)}
.library-card .library-lead span {margin-top:3px;font-size:clamp(9px,1vw,12px);color:#e3d6ed}
