/* =====================================================================
   MEDIPLAY UI layer (2026-11-05): navigation, language + theme switches,
   contact button, footer, light theme, page transitions. Loaded last.
   Corporate identity stays fixed: logo, purple/orange, Montserrat.
   ===================================================================== */
:root{--nav-h:84px}
html{color-scheme:dark}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
html.leaving main,html.leaving .foot2{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}

/* ---------- navigation ---------- */
.nav{height:auto;border:0;background:linear-gradient(180deg,rgba(7,5,15,.94),rgba(7,5,15,.72));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .45s}
.nav .nav-in{max-width:1360px;margin:0 auto;padding:0 32px;height:var(--nav-h);display:flex;align-items:center;gap:28px;border:1px solid transparent;border-radius:0;
  transition:max-width .55s var(--ease),height .45s var(--ease),margin .45s var(--ease),padding .45s var(--ease),background .45s,border-color .45s,border-radius .45s,box-shadow .45s}
.nav-line{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(143,123,232,.55) 30%,rgba(245,114,46,.55) 70%,transparent 100%);transition:opacity .4s}
.nav.solid,.nav.open{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
.nav.solid .nav-line{opacity:0}
.nav.solid .nav-in{max-width:1240px;height:64px;margin-top:10px;padding:0 12px 0 16px;border-radius:20px;background:rgba(16,11,32,.86);border-color:var(--l-d2);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 24px 60px -24px rgba(0,0,0,.75)}
.nav.open .nav-in{background:var(--bg-0)}
/* logo: the tile turns into a disc with one spin, the wordmark folds away */
.brand .brand-mark{clip-path:inset(0 round 24%);transition:transform .7s var(--ease),clip-path .7s var(--ease),width .45s var(--ease),height .45s var(--ease)}
.brand .brand-txt{display:inline-block;max-width:180px;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--ease),opacity .35s}
.nav.solid .brand .brand-mark{transform:rotate(360deg);clip-path:inset(3px round 50%);width:38px;height:38px}
.nav.solid .brand .brand-txt{max-width:0;opacity:0}
.nav.solid .brand{gap:0}
.brand{transition:gap .45s}
/* links with a sliding highlight */
.links{position:relative;gap:2px;padding:5px;border-radius:14px;background:rgba(143,123,232,.06);border:1px solid var(--l-d)}
.links a{position:relative;z-index:1;padding:8px 12px;border-radius:10px;color:var(--m-d);font-weight:600;font-size:14px;transition:color .25s}
.links a:hover,.links a[aria-current]{color:var(--t-d)}
.links a[aria-current]::after{display:none}
.links .hl{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:10px;opacity:0;
  background:linear-gradient(120deg,rgba(143,123,232,.32),rgba(245,114,46,.2));border:1px solid rgba(143,123,232,.45);
  transition:transform .4s var(--ease),width .4s var(--ease),opacity .3s}
.nav-r{gap:10px}

/* ---------- language switch (flags) ---------- */
.langsw{position:relative;display:inline-flex;width:124px;padding:4px;border-radius:99px;border:1px solid var(--l-d2);background:rgba(143,123,232,.06);flex:none}
.langsw .lthumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--grad);box-shadow:0 6px 16px -6px rgba(245,114,46,.6);transition:transform .45s var(--ease)}
.langsw.is-tr .lthumb{transform:translateX(100%)}
.langsw .lo{position:relative;z-index:1;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;border-radius:99px;font-size:12px;font-weight:700;color:var(--m-d);transition:color .3s}
.langsw .lo[aria-current],.langsw .lo.now{color:#fff}
.langsw.going .lo[aria-current]{color:var(--m-d)}
.langsw .fl{width:20px;height:20px;border-radius:50%;overflow:hidden;display:block;flex:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.4);transition:transform .7s var(--ease)}
.langsw .fl svg{width:100%;height:100%;display:block}
.langsw .lo.flip .fl{transform:rotateY(360deg) scale(1.15)}
.langsw.sm{width:112px}
.langsw.sm .lo{height:26px}
.langsw.lg{width:150px}
.langsw.lg .lo{height:36px;font-size:13px}

/* ---------- theme switch ---------- */
.themesw{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--l-d2);overflow:hidden;flex:none;color:var(--t-d);transition:border-color .25s,background .25s}
.themesw:hover{border-color:var(--org);background:rgba(245,114,46,.08)}
.themesw .ts{position:absolute;inset:0;display:grid;place-items:center;transition:transform .5s var(--ease),opacity .3s}
.themesw .ts svg{width:18px;height:18px}
.themesw .sun{color:#FBBF24}
.themesw .moon{transform:translateY(120%) rotate(90deg);opacity:0;color:#5A48A6}
html[data-theme="light"] .themesw .sun{transform:translateY(-120%) rotate(-90deg);opacity:0}
html[data-theme="light"] .themesw .moon{transform:none;opacity:1}

/* ---------- contact button: contact icons slide in on hover ---------- */
.cbtn{position:relative;overflow:hidden;min-width:104px}
.cbtn .ct{display:block;transition:transform .35s var(--ease),opacity .25s}
.cbtn .ci{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.cbtn .ci i{display:grid;opacity:0;transform:translateY(16px);transition:transform .4s var(--ease),opacity .3s}
.cbtn .ci svg{width:16px;height:16px}
.cbtn .ci i:nth-child(2){transition-delay:.06s}.cbtn .ci i:nth-child(3){transition-delay:.12s}
.cbtn:hover,.cbtn:focus-visible{border-color:var(--org);background:rgba(245,114,46,.1);color:var(--org)}
.cbtn:hover .ct,.cbtn:focus-visible .ct{transform:translateY(-170%);opacity:0}
.cbtn:hover .ci i,.cbtn:focus-visible .ci i{opacity:1;transform:none}
.cbtn:hover .ci i:first-child svg{animation:ringing .45s ease-in-out 2 .2s}
@keyframes ringing{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}75%{transform:rotate(18deg)}}

/* ---------- drawer (phones) ---------- */
.drawer-tools{display:flex;gap:12px;align-items:center;margin-top:24px}

/* ---------- product hero film ---------- */
.hero-film{width:100%}
.hero-film .film{box-shadow:0 50px 100px -40px rgba(74,58,140,.8),0 0 0 1px var(--l-d2)}
.hero-film .film-note{font-size:12.5px}
.film .cover b,.film .cover span{color:#fff}
.film .cover span{opacity:.8}
.film .cover{background:linear-gradient(0deg,rgba(7,5,15,.95) 0%,rgba(7,5,15,.7) 30%,rgba(7,5,15,0) 60%),var(--poster) center top/115% auto no-repeat}
.film .cover b{line-height:1.2}

/* ---------- footer ---------- */
.foot2{position:relative;overflow:hidden;padding:88px 0 0;color:var(--m-d);
  background:radial-gradient(ellipse 60% 55% at 85% 0%,rgba(74,58,140,.28),transparent 60%),radial-gradient(ellipse 40% 40% at 0% 100%,rgba(245,114,46,.08),transparent 60%),var(--bg-0)}
.f2-line{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#8F7BE8 30%,#F5722E 70%,transparent);opacity:.75}
.f2-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:56px}
.f2-brand p{margin-top:22px;max-width:44ch;font-size:15px;line-height:1.7}
.f2-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.f2-tags span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--l-d2);font-size:12px;font-weight:600;color:var(--m-d)}
.f2-col .f2-h{margin-top:0;line-height:1.4;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t-d);margin-bottom:18px}
.f2-col ul{list-style:none;display:grid;gap:12px}
.f2-col a{font-size:15px;display:inline-block;transition:color .2s,transform .25s var(--ease)}
.f2-col a:hover{color:var(--t-d);transform:translateX(5px)}
.f2-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.f2-tile{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:18px;border:1px solid var(--l-d2);background:rgba(143,123,232,.05);transition:transform .35s var(--ease),border-color .3s,background .3s}
.f2-tile:hover{transform:translateY(-4px);border-color:rgba(143,123,232,.55);background:rgba(143,123,232,.1)}
.f2-ic{width:46px;height:46px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 12px 24px -12px rgba(245,114,46,.7)}
.f2-ic svg{width:20px;height:20px}
.f2-tile small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m-d);margin-bottom:4px}
.f2-tile b{display:block;font-size:16px;font-weight:600;color:var(--t-d);line-height:1.45}
.f2-bot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:48px;padding:22px 0;border-top:1px solid var(--l-d);font-size:13px}
.f2-tools{display:flex;gap:12px;align-items:center}
.f2-up{width:40px;height:40px;border-radius:12px;border:1px solid var(--l-d2);display:grid;place-items:center;color:var(--t-d);transition:background .25s,border-color .25s,transform .25s}
.f2-up:hover{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-2px)}
.f2-up svg{width:18px;height:18px}
.f2-mark{font-size:clamp(84px,17.5vw,260px);font-weight:800;letter-spacing:-.055em;line-height:.78;text-align:center;margin:6px 0 -.1em;
  background:linear-gradient(180deg,rgba(143,123,232,.26),rgba(245,114,46,.10) 55%,rgba(143,123,232,0) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .links a{padding:8px 9px;font-size:13.5px}
  .nav .nav-in{gap:18px}
}
@media (max-width:1040px){
  .nav-r .themesw{display:none}
}
/* 921–1120 px (iPad landscape, small laptops): the links move into the menu so nothing wraps;
   the bar keeps the logo, language switch, demo button and the menu button */
@media (min-width:921px) and (max-width:1120px){
  .links,.nav-r .cbtn,.nav-r .themesw{display:none}
  .burger{display:block}
  .drawer{display:block;position:fixed;inset:var(--nav-h) 0 0;z-index:49;background:var(--ink);padding:32px max(32px,calc(50vw - 360px)) 48px;overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:.3s var(--ease)}
  .nav.open+.drawer{opacity:1;visibility:visible;transform:none}
  .drawer a.big{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--l-d);font-size:22px;font-weight:500;letter-spacing:-.02em}
  .drawer a.big small{font-family:var(--mono);font-size:11px;color:var(--m-d);align-self:center}
  .drawer .btn{width:100%;margin-top:24px}
  .drawer .themesw{display:block}
  body.lock{overflow:hidden}
}
/* keep the floating pill off the screen edges on narrower desktops */
/* five menu items (2026-11-05): between 1121 and 1365 px the contact button steps aside (contact stays one click away
   through the demo button), and up to 1300 px the language switch shows the flags only (EN / TR stay readable for screen readers) */
@media (min-width:1121px) and (max-width:1365px){.nav-r .cbtn{display:none}}
@media (min-width:1121px) and (max-width:1300px){.nav-r .langsw:not(.lg){width:84px}.nav-r .langsw:not(.lg) .lo b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (min-width:921px) and (max-width:1280px){.nav.solid .nav-in{margin-left:12px;margin-right:12px}}
@media (max-width:920px){
  :root{--nav-h:68px}
  .nav .nav-in{padding:0 16px}
  .nav.solid .nav-in{margin:8px 10px 0;height:58px;padding:0 8px 0 12px}
  .nav-r .langsw:not(.lg),.nav-r .themesw{display:none}
  .drawer .themesw{display:block}
  .f2-top{grid-template-columns:1fr 1fr;gap:40px}
  .f2-brand{grid-column:1/-1}
  .f2-tiles{grid-template-columns:1fr}
}
@media (max-width:560px){
  .f2-top{grid-template-columns:1fr}
  .f2-bot{flex-direction:column;align-items:flex-start}
}

/* =====================================================================
   Light theme (corporate purple/orange on a light lavender base)
   ===================================================================== */
html[data-theme="light"]{color-scheme:light;
  --bg-0:#F7F5FD; --bg-1:#FFFFFF; --bg-2:#EFEBFA;
  --ink:#F7F5FD; --ink2:#FFFFFF; --ink3:#EFEBFA; --ink4:#E2DCF3;
  --paper:#F2EFFB; --paper2:rgba(74,58,140,.06); --white:#FFFFFF;
  --t-d:#16112B; --m-d:#5B5577; --d-d:#8C86A5; --l-d:rgba(74,58,140,.12); --l-d2:rgba(74,58,140,.2);
  --t-l:#16112B; --m-l:#5B5577; --l-l:rgba(74,58,140,.12); --l-l2:rgba(74,58,140,.22)}
html[data-theme="light"] body{background:var(--bg-0)}
html[data-theme="light"] .nav{background:linear-gradient(180deg,rgba(247,245,253,.95),rgba(247,245,253,.78))}
html[data-theme="light"] .nav.solid,html[data-theme="light"] .nav.open{background:transparent}
html[data-theme="light"] .nav.solid .nav-in{background:rgba(255,255,255,.88);box-shadow:0 20px 50px -24px rgba(74,58,140,.35)}
html[data-theme="light"] .nav.open .nav-in{background:#fff}
html[data-theme="light"] .drawer{background:#fff}
html[data-theme="light"] .burger span{background:var(--t-d)}
html[data-theme="light"] .langsw .fl{box-shadow:0 0 0 1.5px rgba(74,58,140,.25)}
html[data-theme="light"] .hero3{background:radial-gradient(ellipse 55% 50% at 80% 10%,rgba(143,123,232,.22),transparent 65%),radial-gradient(ellipse 40% 40% at 10% 95%,rgba(245,114,46,.10),transparent 60%),var(--bg-0)}
html[data-theme="light"] .phero{background:radial-gradient(ellipse 60% 70% at 85% 20%,rgba(143,123,232,.2),transparent 65%),radial-gradient(ellipse 40% 50% at 95% 90%,rgba(245,114,46,.08),transparent 60%),var(--bg-0)}
html[data-theme="light"] .light,html[data-theme="light"] .white{background:radial-gradient(ellipse 80% 60% at 15% 0%,rgba(143,123,232,.12),transparent 60%),#FFFFFF}
html[data-theme="light"] .status{background:rgba(255,255,255,.8)}
html[data-theme="light"] .dg{background:linear-gradient(180deg,#FFFFFF,#FBFAFF);box-shadow:0 40px 90px -50px rgba(74,58,140,.45)}
html[data-theme="light"] .dg-c,html[data-theme="light"] .dg-row{background:#FFFFFF}
html[data-theme="light"] .dg-hub{background:linear-gradient(180deg,rgba(143,123,232,.18),#FFFFFF)}
html[data-theme="light"] .dg-hub.v{background:linear-gradient(180deg,rgba(245,114,46,.14),#FFFFFF)}
html[data-theme="light"] .dg-head span:nth-child(1){color:#DC2626}
html[data-theme="light"] .dg-head span:nth-child(3){color:#059669}
html[data-theme="light"] .dg-lines .b{stroke:rgba(74,58,140,.22)}
html[data-theme="light"] .fl-card{background:rgba(255,255,255,.92);box-shadow:0 20px 44px -24px rgba(74,58,140,.45)}
html[data-theme="light"] .vcard{background:#FFFFFF}
html[data-theme="light"] .call2{background:#FFFFFF;box-shadow:0 40px 90px -50px rgba(74,58,140,.45)}
html[data-theme="light"] .c2-res{background:#F7F5FD}
html[data-theme="light"] .c2-link{background:repeating-linear-gradient(90deg,rgba(74,58,140,.35) 0 6px,transparent 6px 12px);background-size:12px 2px}
html[data-theme="light"] .moment li::before,html[data-theme="light"] .tl2 .nd{background:#EFEBFA}
html[data-theme="light"] .tl2 li::before{background:#E2DCF3}
html[data-theme="light"] .ba-row .old{color:#8C86A5}
html[data-theme="light"] .proj .vis{background:#1B1533}
html[data-theme="light"] .proj article{box-shadow:0 30px 60px -40px rgba(74,58,140,.35)}
html[data-theme="light"] .points div,html[data-theme="light"] .f2-tile{background:#FFFFFF}
html[data-theme="light"] .feat>div:hover{background:rgba(143,123,232,.06)}
html[data-theme="light"] .phone{box-shadow:0 0 0 1px rgba(74,58,140,.25),0 50px 100px -40px rgba(74,58,140,.45),inset 0 0 0 2px #2a2440}
html[data-theme="light"] .foot2{background:radial-gradient(ellipse 60% 55% at 85% 0%,rgba(143,123,232,.18),transparent 60%),radial-gradient(ellipse 40% 40% at 0% 100%,rgba(245,114,46,.08),transparent 60%),#F2EFFB}
html[data-theme="light"] .f2-mark{background:linear-gradient(180deg,rgba(91,69,184,.22),rgba(245,114,46,.10) 55%,rgba(91,69,184,0) 92%);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:#FBFAFF}
html[data-theme="light"] .cta2{background:var(--bg-0)}
html[data-theme="light"] .links{background:rgba(143,123,232,.07)}

/* hero film: compact cover so the title never meets the play button */
.hero-film .film .cover{padding:18px 20px}
.hero-film .film .cover b{font-size:15px;line-height:1.35}
.hero-film .film .cover span{font-size:10.5px}
.hero-film .film .cover .play{width:72px;height:72px;margin:-36px 0 0 -36px}
.hero-film .film .cover .play svg{width:24px;height:24px}
/* ---------- review fixes (2026-11-05) ---------- */
/* F06 compact film covers on phones */
@media (max-width:560px){.film .cover,.hero-film .film .cover{padding:14px 16px}.film .cover b,.hero-film .film .cover b{font-size:15px;line-height:1.35}.film .cover span,.hero-film .film .cover span{font-size:10.5px}.film .cover .play,.hero-film .film .cover .play{top:40%;width:60px;height:60px;margin:-30px 0 0 -30px}}
/* F16 the lightbox really enlarges on phones and tablets (pan sideways, tap to close) */
.lightbox:focus{outline:none}
@media (max-width:920px){.lightbox{padding:0;overflow:auto;justify-content:flex-start}.lightbox img{max-width:none;max-height:none;width:auto;height:min(80vh,900px);border-radius:0;margin:auto 0}}
/* F41 back-to-top moves focus to the content */
main:focus{outline:none}
/* F14 light theme: status and semantic colours with enough contrast on white (brand colours unchanged) */
html[data-theme="light"] .alerts .r{background:rgba(220,38,38,.09);color:#B91C1C}
html[data-theme="light"] .alerts .y{background:rgba(217,119,6,.12);color:#92400E}
html[data-theme="light"] .alerts .g{background:rgba(5,150,105,.1);color:#047857}
html[data-theme="light"] .call-out span.good,html[data-theme="light"] .vcard .vr .g,html[data-theme="light"] .vcard[data-s="done"] .vh .st{color:#047857;border-color:rgba(4,120,87,.35)}
html[data-theme="light"] .call-out span.warn,html[data-theme="light"] .vcard .vr .y{color:#92400E;border-color:rgba(146,64,14,.35)}
html[data-theme="light"] .dg-via:not(.v),html[data-theme="light"] .tl2 .tp:not(.v),html[data-theme="light"] .tl-br span:not(.v){color:#4A3A8C}
html[data-theme="light"] .proj .badge.nda{color:#B3ACCB}
html[data-theme="light"] .ba-row .old,html[data-theme="light"] .proj .pfoot small{color:#6B6585}
html[data-theme="light"] :focus-visible{outline-color:#4A3A8C}

/* =====================================================================
   Projects (2026-11-05): "Projects" dropdown, drawer sub-menu, footer column,
   project pages (hero stage, link cards) and the work-areas grid
   ===================================================================== */
.links .dd{position:relative;display:flex}
.links .dd>a{display:inline-flex;align-items:center;gap:5px}
.links .dd>a .chev{width:12px;height:12px;opacity:.7;transition:transform .3s var(--ease)}
.links .dd>a.cur{color:var(--t-d)}
.dd-panel{position:absolute;z-index:5;top:calc(100% + 12px);left:50%;width:600px;padding:12px;border-radius:18px;text-align:left;
  background:rgba(14,10,28,.98);border:1px solid var(--l-d2);box-shadow:0 30px 80px -30px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .22s,transform .3s var(--ease),visibility .22s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.links .dd:hover>.dd-panel,.links .dd:focus-within>.dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.links .dd.shut>.dd-panel{opacity:0;visibility:hidden;transform:translate(-50%,8px)}
.links .dd:hover>a .chev,.links .dd:focus-within>a .chev{transform:rotate(180deg)}
.links .dd.shut>a .chev{transform:none}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-g{grid-column:1/-1;padding:10px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m-d)}
.links .dd-panel a.dd-i{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:12px;color:var(--t-d);font-size:14px;line-height:1.3}
.dd-i .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--l-d2);color:var(--org);background:rgba(143,123,232,.08);transition:background .25s,color .25s}
.dd-i .ic svg{width:17px;height:17px}
.dd-i b{display:block;font-weight:700;font-size:14px}
.dd-i small{display:block;margin-top:3px;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--m-d)}
.links .dd-panel a.dd-i:hover,.links .dd-panel a.dd-i:focus-visible{background:rgba(143,123,232,.13)}
.links .dd-panel a.dd-i[aria-current] .ic{background:var(--grad);border-color:transparent;color:#fff}
.dd-foot{display:flex;justify-content:space-between;gap:16px;margin-top:8px;padding:12px 12px 4px;border-top:1px solid var(--l-d)}
.links .dd-foot a{padding:0;border-radius:4px;font-size:13px;font-weight:700;color:var(--org)}
.links .dd-foot a:hover{color:var(--t-d)}
html[data-theme="light"] .dd-panel{background:rgba(255,255,255,.99);box-shadow:0 30px 70px -30px rgba(74,58,140,.45)}
html[data-theme="light"] .links .dd-foot a{color:#C2410C}

/* drawer: "Projects" opens a sub-list */
.drawer .dmore summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--l-d);font-size:22px;font-weight:500;letter-spacing:-.02em}
.drawer .dmore summary::-webkit-details-marker{display:none}
.drawer .dmore summary small{font-size:20px;font-weight:400;line-height:1;color:var(--m-d);transition:transform .3s var(--ease)}
.drawer .dmore[open] summary small{transform:rotate(45deg)}
.drawer .dsub{display:grid;padding:6px 0 10px;border-bottom:1px solid var(--l-d)}
.drawer .dsub a{display:flex;justify-content:space-between;align-items:center;padding:11px 0 11px 18px;font-size:16px;color:var(--m-d)}
.drawer .dsub a small{font-size:11px;color:var(--m-d)}
.drawer .dsub a:hover,.drawer .dsub a[aria-current]{color:var(--t-d)}


/* project pages */
.pstage{position:relative;aspect-ratio:4/3;width:100%;border-radius:22px;overflow:hidden;background:#0E0A1E;border:1px solid var(--l-d2);box-shadow:0 50px 100px -40px rgba(74,58,140,.8)}
.pstage canvas{position:absolute;inset:0;width:100%;height:100%}
.pstage .ps-logo{position:absolute;left:50%;top:9%;width:50%;height:auto;transform:translateX(-50%);filter:drop-shadow(0 12px 30px rgba(40,110,255,.35))}
figure.pstage{margin:0}
.pstage.white{background:#fff;border-color:rgba(74,58,140,.16)}
.pstage .duo{position:absolute;inset:8% 7%;display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center}
.pstage .duo img{width:100%;height:100%;object-fit:contain}
.chip.st i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none}
.chip.st.run i{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.btn .xi{width:14px;height:14px;opacity:.85}
.badge.own{color:#C9BEFF}
.proj article{position:relative}
.proj h3 a.stretch{color:inherit}
.proj h3 a.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.proj h3 a.stretch:focus-visible{outline:none}
.proj article:has(a.stretch:focus-visible){outline:2px solid var(--org);outline-offset:3px}
.proj .pfoot .go{font-weight:700;font-size:14px;color:var(--org)}
.proj .pfoot .go .ar{display:inline-block;transition:transform .25s var(--ease)}
.proj article:hover .pfoot .go .ar{transform:translateX(4px)}
@media (min-width:1101px){.proj.three{grid-template-columns:repeat(3,1fr)}}
.facts span a{color:var(--t-d);border-bottom:1px solid rgba(245,114,46,.5)}
.facts span a:hover{color:var(--org)}

/* compact project link cards */
.plinks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plinks.two{grid-template-columns:repeat(2,1fr)}
.plinks .pl{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--l-d2);border-radius:16px;background:var(--white);transition:border-color .25s,transform .3s var(--ease)}
.plinks .pl:hover{border-color:rgba(143,123,232,.55);transform:translateY(-2px)}
.plinks .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(143,123,232,.1);border:1px solid var(--l-d2);color:var(--org)}
.plinks .ic svg{width:20px;height:20px}
.plinks .tx{flex:1;min-width:0}
.plinks b{display:block;font-size:16px;font-weight:700;line-height:1.3}
.plinks small{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--m-d)}
.plinks .ar{color:var(--org);font-weight:700;transition:transform .25s var(--ease)}
.plinks .pl:hover .ar{transform:translateX(4px)}
.plinks .pl.all{background:linear-gradient(120deg,rgba(143,123,232,.18),rgba(245,114,46,.1));border-color:rgba(143,123,232,.42)}
@media (max-width:920px){.plinks,.plinks.two{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.plinks,.plinks.two{grid-template-columns:1fr}}

/* work areas */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ar-c{position:relative;display:flex;flex-direction:column;padding:30px 28px;border:1px solid var(--l-d2);border-radius:20px;background:var(--white);transition:border-color .25s,transform .35s var(--ease)}
.ar-c:hover{border-color:rgba(143,123,232,.5);transform:translateY(-3px)}
.ar-c .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(143,123,232,.1);border:1px solid var(--l-d2);color:var(--org);margin-bottom:22px}
.ar-c .ic svg{width:22px;height:22px}
.ar-c h3{font-size:20px;margin-bottom:10px}
.ar-c p{font-size:15px;color:var(--m-d)}
.ar-x{display:block;margin-top:auto;padding-top:18px;font-size:13px;font-weight:600;color:var(--m-d)}
.ar-x a{color:var(--t-d);border-bottom:1px solid rgba(245,114,46,.5)}
.ar-x a:hover{color:var(--org)}
.ar-cta{color:#fff;border-color:transparent;background:linear-gradient(125deg,#3B2D78 0%,#5B45B8 45%,#8B5FD6 80%,#F5722E 135%);box-shadow:0 40px 80px -40px rgba(91,69,184,.75)}
.ar-cta:hover{border-color:transparent;filter:brightness(1.06)}
.ar-cta .ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.ar-cta p{color:rgba(255,255,255,.9)}
.ar-go{margin-top:auto;padding-top:18px;font-weight:700;font-size:14.5px}
.ar-go .ar{display:inline-block;transition:transform .25s var(--ease)}
.ar-cta:hover .ar-go .ar{transform:translateX(4px)}
@media (max-width:920px){.areas{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.areas{grid-template-columns:1fr}.ar-c{padding:26px 22px}}
html[data-theme="light"] .plinks .pl,html[data-theme="light"] .ar-c:not(.ar-cta){box-shadow:0 24px 50px -36px rgba(74,58,140,.35)}
/* project page heroes: long names, so a smaller headline than the product pages */
.phero.pj h1{font-size:clamp(34px,4.2vw,60px);max-width:17ch;line-height:1.08}
@media (max-width:920px){.phero.pj .phero-grid>div:last-child{max-width:560px}}
/* light theme: project-card links in a deeper orange so they stay readable */
html[data-theme="light"] .proj .pfoot .go{color:#C2410C}

/* home page: every project as a visual card (a swipeable row on phones) */
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp{position:relative;display:flex;flex-direction:column;border:1px solid var(--l-d2);border-radius:20px;overflow:hidden;background:var(--white);transition:border-color .25s,transform .35s var(--ease),box-shadow .35s}
.hp:hover{border-color:rgba(143,123,232,.55);transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(74,58,140,.6)}
.hp-vis{position:relative;aspect-ratio:16/9;background:#0E0A1E;border-bottom:1px solid var(--l-d);overflow:hidden}
.hp-vis canvas,.hp-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-vis .badges{position:absolute;left:14px;top:14px;display:flex;gap:6px;z-index:2}
.hp-b{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;flex:1}
.hp-b .client{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--org)}
.hp-b b{font-size:18px;font-weight:700;line-height:1.3;color:var(--t-d)}
.hp-b small{font-size:14px;line-height:1.5;color:var(--m-d)}
.hp-b .go{margin-top:auto;padding-top:10px;font-weight:700;font-size:14px;color:var(--org)}
.hp .go .ar{display:inline-block;transition:transform .25s var(--ease)}
.hp:hover .go .ar{transform:translateX(4px)}
.hprojects .ctas{margin-top:40px}
html[data-theme="light"] .hp-vis{background:#1B1533}
html[data-theme="light"] .hp{box-shadow:0 24px 50px -36px rgba(74,58,140,.35)}
html[data-theme="light"] .hp-b .go{color:#C2410C}
@media (max-width:920px){.hgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .hgrid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 12px;scrollbar-width:none}
  .hgrid::-webkit-scrollbar{display:none}
  .hp{flex:0 0 84%;scroll-snap-align:center}
}

/* =====================================================================
   Phones and tablets (2026-11-05, "telefonda güzel ve dikkat çekici durmuyor"):
   a bigger hero with the live cards as a moving strip, swipeable rows with dots
   instead of long lists, a tighter rhythm and a two-column footer
   ===================================================================== */
.fl-track{display:contents}
.fl-card.dup{display:none}
.cdots{display:none}
@media (max-width:1260px){
  .h3-stage{display:flex;flex-direction:column}
  .h3-stage>*{min-width:0;max-width:100%}
  .hero3 .h3-top{width:100%}
  .hero3 .status{max-width:100%}
  .h3-float{display:block;position:relative;inset:auto;order:2;margin:0 -20px 40px;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .fl-track{display:flex;gap:12px;width:max-content;padding:12px 0 16px;animation:flmarq 34s linear infinite}
  .fl-card,.fl-card.dup{position:static;display:flex;width:auto;max-width:none;animation:none}
  .hero3 .h3-top{margin-bottom:30px}
}
@keyframes flmarq{to{transform:translateX(calc(-50% - 6px))}}
@media (prefers-reduced-motion:reduce){.fl-track{animation:none}.h3-float{overflow-x:auto}}
@media (max-width:600px){
  .hero3{background:radial-gradient(ellipse 130% 55% at 50% 0%,rgba(91,69,184,.42),transparent 62%),radial-gradient(ellipse 90% 40% at 100% 45%,rgba(245,114,46,.16),transparent 62%),var(--bg-0)}
  .hero3 .h3-top h1{font-size:clamp(38px,11.4vw,48px);line-height:1.02;letter-spacing:-.04em}
  .hero3 .h3-top .lead{font-size:16.5px}
  .sec{padding:68px 0}
  .sec-h{margin-bottom:30px}
  h2{font-size:clamp(29px,8.2vw,35px);line-height:1.12}
  .sec-h p,.sub{font-size:16.5px}
  /* swipeable rows */
  .feat,.feat.two,.feat.four,.areas,.dg-m{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .feat::-webkit-scrollbar,.areas::-webkit-scrollbar,.dg-m::-webkit-scrollbar{display:none}
  .feat,.feat.two,.feat.four,.areas{margin:0 -20px;padding:4px 20px 6px;border:0}
  .feat>div{flex:0 0 80%;scroll-snap-align:center;border:1px solid var(--l-d2);border-radius:18px;background:var(--white);padding:26px 22px}
  .light .feat>div,.white .feat>div{border-color:var(--l-l2)}
  .ar-c{flex:0 0 82%;scroll-snap-align:center}
  .dg-m{position:relative;margin:0 -16px;padding:2px 16px 4px}
  .dg-row{flex:0 0 88%;scroll-snap-align:center}
  .cdots{display:flex;justify-content:center;gap:6px;margin-top:16px}
  .cdots i{width:6px;height:6px;border-radius:99px;background:var(--l-d2);transition:width .3s var(--ease),background .3s}
  .cdots i.on{width:22px;background:var(--grad)}
  /* grid columns may shrink below a swipe row's width (otherwise the row pushes its column past the screen) */
  .thesis>*,.sec-h>*,.pblock>*{min-width:0}
  /* sectors: two columns */
  .who{grid-template-columns:1fr 1fr}
  .who div{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 16px;font-size:14px;line-height:1.35}
}
@media (max-width:560px){
  .f2-top{grid-template-columns:1fr 1fr;gap:32px 20px}
  .f2-brand{grid-column:1/-1}
  .f2-col a{font-size:14px}
}
html[data-theme="light"] .hp .badge.nda{color:#B3ACCB}
/* phones under 560 px have a 16 px page margin: the full-bleed rows follow it so nothing sticks out */
@media (max-width:560px){.feat,.feat.two,.feat.four,.areas,.hgrid{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.h3-float{margin-left:-16px;margin-right:-16px}}

/* =====================================================================
   Work areas page and news (2026-11-05)
   ===================================================================== */
.dd-panel.one{width:400px}
.dd-panel.one .dd-grid{grid-template-columns:1fr}
.achips{margin-top:30px}
.achips .chip{transition:border-color .25s,color .25s}
.achips .chip:hover{border-color:var(--org);color:var(--t-d)}
.area .aw{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.area .aw.rev>div:first-child{order:2}
.area h2{display:flex;align-items:center;gap:16px;margin-top:14px}
.aic{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 16px 36px -16px rgba(245,114,46,.6)}
.aic svg{width:26px;height:26px}
.alist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.alist li{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--l-d2);border-radius:14px;background:rgba(143,123,232,.05);font-size:14.5px;line-height:1.45;color:var(--t-d)}
.alist li svg{flex:none;width:18px;height:18px;color:var(--ok);margin-top:1px}
.aproof{display:grid;gap:12px}
.aproof-l{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m-d)}
.ar-c h3 a{color:inherit;transition:color .2s}
.ar-c h3 a:hover{color:var(--org)}
.ngrid .hp-b small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ngrid.two{grid-template-columns:repeat(2,1fr)}
.post{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.post aside{position:sticky;top:calc(var(--nav-h) + 24px)}
.post .prose{max-width:720px}
.post .prose h2{font-size:24px}
.post .prose p,.post .prose li{color:var(--m-d);font-size:16.5px;line-height:1.75}
.post .prose a{color:var(--org);font-weight:600}
.prose .pnote{margin-top:28px;padding:16px 18px;border:1px solid var(--l-d2);border-radius:14px;font-size:14px!important}
html[data-theme="light"] .post .prose a{color:#C2410C}
@media (max-width:920px){.area .aw{grid-template-columns:1fr;gap:36px}.area .aw.rev>div:first-child{order:0}.post{grid-template-columns:1fr;gap:40px}.post aside{position:static}.ngrid.two{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.alist{grid-template-columns:1fr}.area h2{gap:12px}.aic{width:46px;height:46px;border-radius:13px}.aic svg{width:22px;height:22px}}