/* Liquid glass layer. Loaded last; only adds surfaces, never changes layout or motion. */
:root{
 --lg-fill:linear-gradient(135deg,#ffffffb3 0%,#f4f9fb66 45%,#e6f0f480 100%);
 --lg-rim:#ffffffc7;
 --lg-soft:0 1px 3px #182c3614,0 6px 18px #182c361c;
 --lg-soft-dark:0 1px 3px #0b1a222e,0 8px 22px #0b1a222b;
 --lg-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a42e,inset 0 0 18px #ffffff40,var(--lg-soft);
 --lg-blur:blur(22px) saturate(180%);
}

/* Header: turns into a floating rounded glass bar after scrolling.
   The glass is drawn on ::before so the header box (and the page) never shifts. */
header::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 border-radius:0;border:1px solid transparent;
 transition:inset .45s cubic-bezier(.22,.8,.2,1),border-radius .45s cubic-bezier(.22,.8,.2,1),background .35s ease,box-shadow .35s ease,border-color .35s ease;
}
header{transition:box-shadow .35s ease,background-color .35s ease,border-color .35s ease}
header.is-scrolled{background:transparent;box-shadow:none;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Soft veil behind the glass bar: blur that fades out downward instead of ending in a hard edge. */
header::after{
 content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 28px);z-index:-2;pointer-events:none;
 opacity:0;transition:opacity .35s ease;
 /* Gradient only: Safari ignores the mask on a backdrop blur and shows a hard-edged strip. */
 background:linear-gradient(#f3f5f6e6 0%,#f3f5f6b3 40%,#f3f5f640 75%,#f3f5f600 100%);
}
header.is-scrolled::after{opacity:1}
header.is-scrolled::before{
 inset:10px 2.5%;border-radius:30px;
 background:var(--lg-fill);border-color:var(--lg-rim);box-shadow:var(--lg-shadow);
 -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
}
header.is-scrolled .language-control{background:#ffffff59;border-color:#ffffffb3}
@media(max-width:760px){
 header{transition:box-shadow .35s ease,background-color .35s ease,border-color .35s ease,padding .45s cubic-bezier(.22,.8,.2,1)}
 header.is-scrolled{padding-left:8%;padding-right:8%}
 header.is-scrolled::before{inset:6px 2.5%;border-radius:26px}
}
@media(prefers-reduced-motion:reduce){header::before{transition:none}}

/* Language picker: the globe is part of the select's hit area. */
.language-control{position:relative;padding:0 10px 0 0}
.language-control svg{position:absolute;left:11px;top:50%;translate:0 -50%;pointer-events:none}
.language-control select{padding-left:35px;max-width:170px;min-width:141px}
@media(max-width:760px){.language-control select{padding-left:35px;min-width:133px}}

/* Contact section: rounded glass outer layer. */
.contact-section{
 position:relative;isolation:isolate;margin:0 2.5%;border-radius:40px;overflow:hidden;
 padding-top:14px;
 background:radial-gradient(ellipse at 0 0,#ffffff2b,transparent 45%),radial-gradient(ellipse at 100% 100%,#9fc6d42e,transparent 50%),linear-gradient(150deg,#3d6f7cf0,#2b5361f2 55%,#22414ef5);
 border:1px solid #ffffff4d;
 box-shadow:inset 1px 1px 2px #ffffff66,inset -1px -2px 6px #0e222b40,inset 0 0 40px #ffffff12,var(--lg-soft-dark);
}
.contact-section::before{
 content:"";position:absolute;inset:4px;border-radius:36px;pointer-events:none;z-index:-1;
 border:1px solid #ffffff1f;
}

/* Portrait: glass frame with rounded photo. The frame is a transparent border so
   overflow:hidden clips the zooming photo and the curtain to the rounded inner edge. */
.contact-portrait{
 margin:0 -3.2% 76px;padding:0;border:10px solid transparent;border-radius:30px;isolation:isolate;
 background:linear-gradient(135deg,#ffffff59,#ffffff14 40%,#c7dde533) border-box;
 box-shadow:0 0 0 1px #ffffff73,inset 0 0 0 1px #ffffff40,var(--lg-soft-dark);
}
.contact-portrait img{border-radius:20px;background:#dadcdd}
/* Curtain = everything outside a growing rounded "window": the window is transparent and its
   spread shadow paints the curtain, so the revealed photo edge bulges outward like ")". */
.contact-portrait::after{inset:0 auto 0 0;width:0;border-radius:20px;background:transparent;transform:none;box-shadow:0 0 0 200vmax #dadcdd}
/* Photo zoom-in: the photo clips itself to the rounded frame at every frame of the zoom,
   so it arrives rounded even where the parent's rounded overflow clip is skipped (Safari). */
@property --lg-zoom{syntax:"<number>";inherits:false;initial-value:1}
.contact-portrait img{
 --lg-zoom:1.12;--lg-r:20px;
 transform:scale(var(--lg-zoom));transform-origin:70% 50%;
 clip-path:inset(calc(50% * (1 - 1 / var(--lg-zoom))) calc(30% * (1 - 1 / var(--lg-zoom))) calc(50% * (1 - 1 / var(--lg-zoom))) calc(70% * (1 - 1 / var(--lg-zoom))) round calc(var(--lg-r) / var(--lg-zoom)));
}
.contact-portrait.in img{animation:lg-portrait-settle 2s cubic-bezier(.22,.8,.2,1) forwards}
@keyframes lg-portrait-settle{from{--lg-zoom:1.12}to{--lg-zoom:1}}
@media(prefers-reduced-motion:reduce){.contact-portrait img{--lg-zoom:1}.contact-portrait.in img{animation:none}}
/* Reveal grows left to right with the same timing as the original wipe. */
.contact-portrait.in::after{animation:lg-portrait-reveal 1.4s cubic-bezier(.77,0,.18,1) forwards}
@keyframes lg-portrait-reveal{to{width:100%}}

@media(max-width:760px){
 .contact-section{border-radius:30px}
 .contact-section::before{border-radius:26px}
}
@media(max-width:600px){
 .contact-section{margin:0 3%;padding-top:10px}
 .contact-portrait{margin:0 -2.5% 48px;border-width:8px;border-radius:24px}
 .contact-portrait img{border-radius:16px 16px 0 0;--lg-r:16px}
 .contact-portrait img{clip-path:inset(calc(50% * (1 - 1 / var(--lg-zoom))) calc(30% * (1 - 1 / var(--lg-zoom))) calc(50% * (1 - 1 / var(--lg-zoom))) calc(70% * (1 - 1 / var(--lg-zoom))) round calc(var(--lg-r) / var(--lg-zoom)) calc(var(--lg-r) / var(--lg-zoom)) 0 0)}
 .contact-portrait::after{border-radius:16px}
 .portrait-signature{background:transparent;color:#fff;padding:20px 5% 14px}
}

/* Expertise: stacked glass cards with topic icons. Same <details> accordion and reveal motion. */
.practice .expertise,.practice .expertise:last-child{
 border:1px solid #ffffffd9;border-radius:26px;margin-bottom:14px;overflow:hidden;
 background:linear-gradient(135deg,#ffffffc2 0%,#f6fafbb3 55%,#eaf2f5a6 100%);
 box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,var(--lg-soft);
 transition:opacity .7s,transform .7s,box-shadow .35s ease,border-color .35s ease,background .35s ease;
}
.practice .expertise summary{grid-template-columns:56px 1fr 44px;padding:22px 26px 22px 22px;gap:22px}
.expertise-symbol{
 width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:var(--accent);
 background:linear-gradient(145deg,#ffffff,#e4eef2);border:1px solid #ffffffe6;
 box-shadow:inset 1px 1px 1px #fff,inset -1px -2px 4px #6e93a426,var(--lg-soft);
 transition:background .35s ease,color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.22,.8,.2,1);
}
.expertise-symbol svg{width:26px;height:26px}
.practice .expand{
 width:44px;height:44px;font-size:22px;border-color:#ffffffe6;
 background:linear-gradient(145deg,#ffffffd9,#eef4f6b3);
 box-shadow:inset 1px 1px 1px #fff,var(--lg-soft);
 transition:transform .3s cubic-bezier(.22,.8,.2,1),background .3s ease,color .3s ease,scale .2s ease,border-color .2s ease;
}
.practice .expertise[open]{
 border-color:#ffffff;background:linear-gradient(135deg,#ffffffeb,#f3f8fad9);
 box-shadow:inset 1px 1px 1px #fff,inset 0 0 0 1px #315c681a,var(--lg-soft);
}
.practice .expertise[open] .expertise-symbol{
 color:#fff;background:linear-gradient(145deg,#4a7a87,#24485a);border-color:#ffffff66;
 box-shadow:inset 1px 1px 2px #ffffff59,var(--lg-soft);
}
.practice .expertise[open] .expand{background:var(--ink);color:#fff;border-color:var(--ink)}
.practice .expertise-content{padding:0 30px 28px 100px;max-width:none}
.practice .expertise-content p{max-width:760px}
@media(hover:hover) and (pointer:fine){
 .practice .expertise:hover{box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,var(--lg-soft)}
 .practice .expertise summary:hover{background:transparent}
 .practice .expertise summary:hover .expertise-symbol{transform:translateY(-2px) rotate(-4deg)}
}
@media(max-width:760px){
 .practice .expertise,.practice .expertise:last-child{border-radius:22px;margin-bottom:10px}
 .practice .expertise summary{grid-template-columns:44px 1fr 34px;padding:14px 14px 14px 12px;gap:14px}
 .expertise-symbol{width:44px;height:44px;border-radius:14px}
 .expertise-symbol svg{width:22px;height:22px}
 .practice .expand{width:34px;height:34px;font-size:19px}
 .practice .expertise-content{padding:0 16px 20px 70px}
}
@media(max-width:420px){.practice .expertise-content{padding:0 16px 20px 16px}}
@media(prefers-reduced-motion:reduce){.expertise-symbol{transition:none}}

/* Instagram embeds: glass cards with a soft Instagram-tinted glow behind. */
.instagram-card{
 position:relative;isolation:isolate;padding:20px 20px 16px;border-radius:30px;
 background:linear-gradient(135deg,#ffffffc7 0%,#f6fafbb3 55%,#eaf2f5a6 100%);
 border:1px solid #ffffffd9;
 box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,var(--lg-soft);
 transition:opacity .7s,transform .7s,box-shadow .4s ease;
}
.instagram-card::before{
 content:"";position:absolute;inset:12% 6% -4%;z-index:-1;border-radius:40px;pointer-events:none;
 background:radial-gradient(closest-side at 30% 55%,#ff8a5c,transparent),radial-gradient(closest-side at 70% 50%,#b13cd8,transparent);
 opacity:.22;transition:opacity .4s ease;
}
.instagram-card .brand-heading{padding:2px 4px 16px}
.instagram-card .brand-heading>a{
 width:36px;height:36px;border-color:#ffffffe6;
 background:linear-gradient(145deg,#ffffffd9,#eef4f6b3);
 box-shadow:inset 1px 1px 1px #fff,var(--lg-soft);
 transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.instagram-card .instagram-container{
 border:1px solid #ffffffe6;border-radius:20px;
 box-shadow:0 0 0 1px #182c3608,var(--lg-soft);
}
.instagram-card .brand-profile{padding:14px 4px 0}
@media(hover:hover) and (pointer:fine){
 .instagram-card:hover{box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,var(--lg-soft)}
 .instagram-card:hover::before{opacity:.36}
}
@media(max-width:760px){
 .instagram-card{padding:14px 14px 12px;border-radius:24px}
 .instagram-card .instagram-container{border-radius:16px}
}

/* Contact dialog: liquid glass panel that opens with a soft lift + fade, fields rising in sequence. */
dialog#contact-dialog{
 border-radius:32px;border:1px solid #ffffffd9;color:var(--ink);
 background:linear-gradient(140deg,#ffffffd1 0%,#f4f9fbb8 50%,#e6f0f4c2 100%);
 box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 3px #6e93a42e,inset 0 0 40px #ffffff4d,var(--lg-soft-dark);
 -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
 opacity:0;transform:translateY(16px) scale(.97);
 transition:opacity .28s ease,transform .28s ease,overlay .28s allow-discrete,display .28s allow-discrete;
}
dialog#contact-dialog[open]{opacity:1;transform:none;animation:lg-dialog-in .6s cubic-bezier(.2,.9,.25,1.05) backwards}
dialog#contact-dialog::backdrop{
 background:#13232c00;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
 transition:background .28s ease,backdrop-filter .28s ease,overlay .28s allow-discrete,display .28s allow-discrete;
}
dialog#contact-dialog[open]::backdrop{
 background:#13232c59;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
 animation:lg-backdrop-in .45s ease backwards;
}
dialog#contact-dialog[open]>*,dialog#contact-dialog[open] form>*{animation:lg-rise .55s cubic-bezier(.22,.8,.2,1) both}
dialog#contact-dialog[open]>.eyebrow{animation-delay:.08s}
dialog#contact-dialog[open]>h2{animation-delay:.13s}
dialog#contact-dialog[open]>.form-intro{animation-delay:.18s}
dialog#contact-dialog[open]>form{animation:none}
dialog#contact-dialog[open] form>*:nth-child(1){animation-delay:.23s}
dialog#contact-dialog[open] form>*:nth-child(2){animation-delay:.28s}
dialog#contact-dialog[open] form>*:nth-child(3){animation-delay:.33s}
dialog#contact-dialog[open] form>*:nth-child(5){animation-delay:.38s}
dialog#contact-dialog[open] form>*:nth-child(6){animation-delay:.42s}
dialog#contact-dialog[open] form>*:nth-child(7){animation-delay:.46s}
dialog#contact-dialog[open] form>*:nth-child(n+8){animation-delay:.5s}
dialog#contact-dialog[open]>.close{animation:lg-pop .5s .2s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes lg-dialog-in{from{opacity:0;transform:translateY(34px) scale(.94);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes lg-backdrop-in{from{background:#13232c00;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@keyframes lg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lg-pop{from{opacity:0;transform:scale(.6) rotate(-45deg)}to{opacity:1;transform:none}}

#contact-dialog .close{
 border-radius:50%;border:1px solid #ffffffe6;top:14px;right:14px;line-height:1;
 background:linear-gradient(145deg,#ffffffd9,#eef4f6b3);box-shadow:inset 1px 1px 1px #fff,var(--lg-soft-dark);
}
#contact-dialog input:not([type="checkbox"]),#contact-dialog textarea,#contact-dialog select{
 border-radius:14px;border:1px solid #ffffffcc;
 background:linear-gradient(145deg,#ffffffb3,#f5f9fa8c);
 box-shadow:inset 1px 1px 2px #182c360d,inset -1px -1px 1px #ffffffb3,var(--lg-soft-dark);
}
#contact-dialog input:not([type="checkbox"]):focus,#contact-dialog textarea:focus,#contact-dialog select:focus{
 background:#ffffffe6;border-color:#315c6866;box-shadow:inset 1px 1px 2px #182c360a,0 0 0 4px #315c6814;
}
#contact-dialog .submit-button{
 border-radius:16px;
 background:linear-gradient(145deg,#2b4c5a,#18232c);
 box-shadow:inset 1px 1px 1px #ffffff40,var(--lg-soft-dark);
}
#contact-dialog .privacy{padding:12px 14px;border-radius:14px;background:#ffffff59;border:1px solid #ffffffb3}

@media(max-width:760px){
 dialog#contact-dialog{border-radius:26px}
}
@media(prefers-reduced-motion:reduce){
 dialog#contact-dialog,dialog#contact-dialog::backdrop{transition:none}
 dialog#contact-dialog[open],dialog#contact-dialog[open]::backdrop,dialog#contact-dialog[open]>*,dialog#contact-dialog[open] form>*{animation:none}
}

/* Same tiny soft shadow under the glass surfaces defined in the older stylesheets. */
.creative-process{box-shadow:inset 0 1px 0 #fff9,var(--lg-soft)}
.process-node{box-shadow:inset 0 1px 1px #fff,var(--lg-soft)}
.process-node.is-selected{box-shadow:inset 0 1px 1px #fff,0 1px 3px #182c361a,0 8px 22px #182c3624}
.about-visual-stack .about-art{box-shadow:inset 1px 1px 2px #ffffffd9,inset -1px -2px 5px #6e93a42b,var(--lg-soft)}
.language-control{box-shadow:var(--lg-soft)}
.social-links a{box-shadow:0 1px 0 #ffffff1f inset,var(--lg-soft-dark)}

/* Section labels (Hakkımda, Uzmanlık, Referanslar, İletişim…): icon in a glass tile, bolder label. */
.eyebrow:has(>.section-icon){font-size:13px;font-weight:800;letter-spacing:2.6px;gap:14px;color:var(--ink)}
.eyebrow>.section-icon{
 box-sizing:content-box;width:22px;height:22px;padding:10px;border-radius:14px;color:var(--accent);
 background:linear-gradient(145deg,#ffffff,#e4eef2);border:1px solid #ffffffe6;
 box-shadow:inset 1px 1px 1px #fff,inset -1px -2px 4px #6e93a426,var(--lg-soft);
}
.contact-section .eyebrow:has(>.section-icon){color:#fff}
.contact-section .eyebrow>.section-icon{
 color:#fff;border-color:#ffffff4d;
 background:linear-gradient(145deg,#ffffff38,#ffffff12);
 box-shadow:inset 1px 1px 1px #ffffff59,inset -1px -2px 4px #0e222b33,var(--lg-soft-dark);
}
@media(max-width:600px){
 .eyebrow:has(>.section-icon){font-size:12px;letter-spacing:2.2px;gap:12px}
 .eyebrow>.section-icon{width:20px;height:20px;padding:9px;border-radius:12px}
}

/* Production approach cards: glass cards, icon in a glass tile like the expertise list. */
.production-grid{gap:24px}
.production-grid article{
 border:1px solid #ffffffd9;border-radius:26px;padding:26px 26px 28px;
 background:linear-gradient(135deg,#ffffffc2 0%,#f6fafbb3 55%,#eaf2f5a6 100%);
 box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,var(--lg-soft);
}
.production-mark,.production-grid .production-mark{
 width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:22px;color:var(--accent);
 background:linear-gradient(145deg,#ffffff,#e4eef2);border:1px solid #ffffffe6;
 box-shadow:inset 1px 1px 1px #fff,inset -1px -2px 4px #6e93a426,var(--lg-soft);
}
.production-mark svg,.production-grid .production-mark svg{width:28px;height:28px}
.production-grid h3{font-weight:750;color:var(--ink)}
@media(max-width:900px){
 .production-grid article{padding:20px 20px 22px;border-radius:22px}
 .production-mark,.production-grid .production-mark{width:48px;height:48px;border-radius:15px;margin-bottom:16px}
 .production-mark svg,.production-grid .production-mark svg{width:24px;height:24px}
}

/* Tools slider: rounded glass capsule. The side fade moves from a mask (which would also
   fade the capsule) to glass-colored overlays clipped inside the rounded edge. */
.tools{
 position:relative;isolation:isolate;border:1px solid #ffffffd9;border-radius:999px;
 -webkit-mask-image:none;mask-image:none;
 background:linear-gradient(135deg,#ffffffc2 0%,#f6fafbb3 55%,#eaf2f5a6 100%);
 box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,var(--lg-soft);
}
.tools::before,.tools::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:1;pointer-events:none}
.tools::before{left:0;background:linear-gradient(90deg,#f8fafb,#f8fafb00)}
.tools::after{right:0;background:linear-gradient(270deg,#f3f7f9,#f3f7f900)}
@media(max-width:600px){.tools::before,.tools::after{width:16%}}
@media(prefers-reduced-motion:reduce){.tools{border-radius:28px}.tools::before,.tools::after{display:none}}

/* Tinted section backgrounds (Hakkımda, production): rounded glass panels instead of
   full-width bands. Side padding is reduced by the margin so content stays aligned. */
.about.section,.production-section.section{
 margin-left:2.5%;margin-right:2.5%;padding-left:2.5%;padding-right:2.5%;border-radius:40px;
 border:1px solid #ffffffd9;
 box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,var(--lg-soft);
}
.about.section{background:linear-gradient(135deg,#eef4f6f2 0%,#e6eef1e6 60%,#e2ebeee6 100%)}
.production-section.section{background:linear-gradient(135deg,#f1f6f7f2 0%,#e9f0f2e6 60%,#e5edf0e6 100%);margin-bottom:24px}
@media(max-width:760px){
 .about.section,.production-section.section{margin-left:3%;margin-right:3%;padding-left:5%;padding-right:5%;border-radius:30px}
}

/* FAQ: floating 3D phone in the empty space under the intro (desktop only). */
.faq-phone{display:none}
@media(min-width:901px){
 .faq-phone{display:flex;justify-content:center;margin-top:48px;padding:10px 0 30px}
}
@media(min-width:901px) and (min-height:820px){.faq-intro{position:sticky;top:110px}}
.phone-scene{position:relative;perspective:1100px;width:230px}
.phone{
 position:relative;width:230px;aspect-ratio:9 / 19;border-radius:40px;padding:9px;transform-style:preserve-3d;
 background:linear-gradient(150deg,#3a4a52,#121b20 45%,#26343b);
 box-shadow:inset 0 0 0 1px #ffffff2e,inset 2px 2px 3px #ffffff26,0 1px 3px #182c3626,0 30px 60px #182c3630;
 transform:rotateY(-22deg) rotateX(9deg) rotateZ(2deg);
 animation:phone-float 7s ease-in-out infinite;
}
/* Back plate gives the body thickness when it turns. */
.phone::before{
 content:"";position:absolute;inset:0;border-radius:inherit;transform:translateZ(-14px);
 background:linear-gradient(150deg,#2b3a41,#0d1418);box-shadow:0 0 0 1px #0d1418;
}
.phone-screen{position:relative;height:100%;border-radius:31px;overflow:hidden;background:#1d2a30;transform:translateZ(1px);isolation:isolate}
/* Glass glare sweeping across the screen. */
.phone-screen::after{content:"";position:absolute;inset:-40% -60%;z-index:3;pointer-events:none;
 background:linear-gradient(105deg,transparent 42%,#ffffff2e 50%,transparent 58%);animation:phone-glare 7s ease-in-out infinite}
.phone-island{position:absolute;top:9px;left:50%;translate:-50% 0;width:72px;height:20px;border-radius:12px;background:#05090b;z-index:4}
.phone-shadow{position:absolute;left:12%;right:12%;bottom:-26px;height:22px;border-radius:50%;background:radial-gradient(#182c3640,transparent 70%);animation:phone-shadow 7s ease-in-out infinite}
@keyframes phone-float{
 0%,100%{transform:rotateY(-22deg) rotateX(9deg) rotateZ(2deg) translateY(0)}
 50%{transform:rotateY(-8deg) rotateX(4deg) rotateZ(-1deg) translateY(-14px)}
}
@keyframes phone-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.6}}
@keyframes phone-glare{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}
@media(prefers-reduced-motion:reduce){
 .phone,.phone-screen::after,.phone-shadow{animation:none}
}

/* Character inside the phone: thinks (?), finds the answer (bulb), then points at the cursor.
   faq-character.js switches data-phase and moves eyes, head and the pointing arm. */
.phone-character{position:absolute;inset:0;width:100%;height:100%;display:block}
.pc-q,.pc-bubble,.pc-bulb,.pc-brows path,.pc-finger,.pc-eyes{transform-box:fill-box}
.pc-q{font:800 38px/1 Manrope,"DM Sans",Arial,sans-serif;fill:#315c68;transform-origin:center;animation:pc-q 1.1s ease-in-out infinite}
.pc-bubble,.pc-bulb{opacity:0;transform:scale(.3);transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.4,.4,1)}
.pc-bubble{transform-origin:0% 100%}
.pc-bulb{transform-origin:50% 100%}
.phone-character[data-phase="think"] .pc-bubble{opacity:1;transform:none}
.phone-character[data-phase="aha"] .pc-bulb{opacity:1;transform:none}
.phone-character[data-phase="aha"] .pc-bulb circle:first-child{animation:pc-glow 1s ease-in-out infinite}
.pc-mouth{opacity:0;transition:opacity .2s}
.phone-character[data-phase="think"] .pc-mouth-o,
.phone-character[data-phase="aha"] .pc-mouth-smile,
.phone-character[data-phase="point"] .pc-mouth-smile{opacity:1}
.pc-brows path{transition:transform .35s ease}
.phone-character[data-phase="think"] .pc-brow-r{transform:translateY(-4px) rotate(-8deg)}
.phone-character[data-phase="think"] .pc-brow-l{transform:translateY(1px) rotate(4deg)}
.phone-character[data-phase="aha"] .pc-brows path{transform:translateY(-4px)}
.pc-arm-chin{opacity:0;transition:opacity .25s ease}
.phone-character[data-phase="think"] .pc-arm-chin{opacity:1}
.phone-character[data-phase="think"] .pc-arm-down{opacity:0}
.pc-arm-down{transition:opacity .25s ease}
.pc-finger{transform-origin:0% 50%;transform:scaleX(0);transition:transform .3s cubic-bezier(.2,1.3,.4,1)}
.phone-character[data-phase="point"] .pc-finger{transform:none}
.pc-eyes{transform-origin:center;animation:pc-blink 4.6s infinite}
@keyframes pc-q{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) translateY(-2px)}}
@keyframes pc-glow{0%,100%{opacity:.35}50%{opacity:.75}}
@keyframes pc-blink{0%,46%,50%,100%{transform:none}48%{transform:scaleY(.1)}}
@media(prefers-reduced-motion:reduce){.pc-q,.pc-eyes,.phone-character[data-phase] .pc-bulb circle:first-child{animation:none}}

/* Performance: the hero rings breathe forever; a backdrop blur under an animating layer
   is re-rendered every frame, and at 2px it is not visible. */
.glass-ring,.glass-core{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Production cards: gentle grow on hover (uses `scale`, so it never fights other transforms). */
.production-grid article{transition:scale .35s cubic-bezier(.2,.9,.25,1.1),box-shadow .35s ease}
.production-grid .production-mark{transition:translate .35s cubic-bezier(.2,.9,.25,1.2)}
@media(hover:hover) and (pointer:fine){
 .production-grid article:hover{scale:1.03;box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,0 2px 4px #182c3610,0 14px 32px #182c361f}
 .production-grid article:hover .production-mark{translate:0 -3px}
}
@media(prefers-reduced-motion:reduce){.production-grid article,.production-grid .production-mark{transition:none}}

/* "Projenizi anlatın": glass pill with a passing light sheen and a dark message badge.
   On hover the button lifts, the bubble pops and its dots "type". */
.contact-section .contact-primary{
 position:relative;isolation:isolate;overflow:hidden;width:fit-content;gap:22px;
 padding:9px 9px 9px 28px;border-radius:999px;border:1px solid #ffffffcc;font-size:17px;
 background:linear-gradient(135deg,#ffffff 0%,#f1f7f9 60%,#e3eef2 100%);
 box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px #315c6814,0 8px 22px #0b1a2233;
 transition:translate .35s cubic-bezier(.2,.9,.25,1.2),box-shadow .35s ease,background .35s ease;
}
.contact-section .contact-primary::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(105deg,transparent 35%,#ffffffd9 50%,transparent 65%);
 transform:translateX(-120%);animation:lg-sheen 5s ease-in-out infinite 1.5s;
}
.contact-section .contact-primary>span{
 position:relative;overflow:hidden;width:46px;height:46px;border-radius:50%;
 background:linear-gradient(145deg,#2b4c5a,#18232c);color:#fff;
 box-shadow:inset 0 1px 1px #ffffff40,0 4px 10px #18232c40;transition:background .35s ease,scale .35s cubic-bezier(.2,.9,.25,1.3)
}
.contact-section .contact-primary>span .ui-icon{width:20px;height:20px}
@media(hover:hover) and (pointer:fine){
 .contact-section .contact-primary:hover{translate:0 -3px;background:linear-gradient(135deg,#ffffff,#f6fbfc 60%,#e8f2f5);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px #315c6814,0 14px 30px #0b1a2240}
 .contact-section .contact-primary:hover>span{transform:none;scale:1.06;background:linear-gradient(145deg,#3d7180,#1f3b46)}
 .contact-section .contact-primary:hover>span .ui-icon{animation:lg-chat-pop .5s cubic-bezier(.2,.9,.25,1.4)}
 .contact-section .contact-primary:hover .lg-dot{animation:lg-typing 1s ease-in-out infinite}
 .contact-section .contact-primary:hover .lg-dot:nth-of-type(2){animation-delay:.15s}
 .contact-section .contact-primary:hover .lg-dot:nth-of-type(3){animation-delay:.3s}
}
.contact-section .contact-primary:active{translate:0 0;scale:.98}
@keyframes lg-sheen{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
@keyframes lg-chat-pop{0%{transform:none}40%{transform:translateY(-3px) scale(1.12) rotate(-6deg)}100%{transform:none}}
@keyframes lg-typing{0%,60%,100%{transform:none;opacity:1}30%{transform:translateY(-2px);opacity:.55}}
.lg-dot{transform-box:fill-box;transform-origin:center}
@media(max-width:600px){.contact-section .contact-primary{font-size:15px;padding-left:22px}.contact-section .contact-primary>span{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.contact-section .contact-primary::before{animation:none;display:none}.contact-section .contact-primary:hover>span .ui-icon,.contact-section .contact-primary:hover .lg-dot{animation:none}}

/* Hakkımda: small profile chip with the portrait, name and title. */
.about-profile{
 display:flex;align-items:center;gap:14px;width:fit-content;max-width:100%;margin:20px 0 4px;padding:7px 20px 7px 7px;border-radius:999px;
 background:linear-gradient(135deg,#ffffffd9,#f3f8fab3);border:1px solid #ffffffd9;
 box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,var(--lg-soft);
}
.about-profile img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;
 border:2px solid #fff;box-shadow:0 0 0 1px #315c6826,0 4px 12px #182c3626}
.about-profile div{display:grid;gap:2px;min-width:0}
.about-profile strong{font:700 16px/1.2 Manrope,"DM Sans",Arial,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.about-profile span{font-size:12.5px;line-height:1.35;color:var(--muted)}
.about-copy .about-profile+h2{margin-top:22px}
@media(max-width:600px){.about-profile{padding-right:16px;gap:12px}.about-profile img{width:48px;height:48px}.about-profile strong{font-size:15px}.about-profile span{font-size:12px}}

/* Hakkımda card: "Her kare bir hikâye" — a camera lens (iris breathes, focus ring turns,
   a landscape drifts behind the glass), viewfinder marks, REC + timecode and a moving filmstrip.
   The lens lives in .orb so the existing mouse parallax still moves it. */
.about-visual-stack .about-art .orb{
 width:230px;height:230px;bottom:118px;right:34px;border-radius:50%;animation:none;
 background:none;box-shadow:var(--orb-shadow-x,20px) var(--orb-shadow-y,30px) 34px #193b4b33;
}
.art-lens{display:block;width:100%;height:100%}
.art-lens *{transform-box:view-box;transform-origin:100px 100px}
.art-lens-ring{animation:al-turn 40s linear infinite}
.art-iris{animation:al-iris 7s ease-in-out infinite}
.art-lens-scene{animation:al-pan 14s linear infinite}
.art-lens-sun{animation:al-sun 7s ease-in-out infinite}
@keyframes al-turn{to{transform:rotate(360deg)}}
@keyframes al-iris{0%,100%{transform:rotate(0) scale(1)}45%,60%{transform:rotate(28deg) scale(1.75)}}
@keyframes al-pan{to{transform:translateX(-200px)}}
@keyframes al-sun{0%,100%{opacity:.6}50%{opacity:1}}

.art-frame{position:absolute;inset:18px;z-index:1;pointer-events:none;opacity:.55;
 --c:#315c68;background:
  linear-gradient(var(--c),var(--c)) 0 0/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/2px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 0/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/2px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) 0 100%/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/2px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 100%/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/2px 18px no-repeat}
.art-rec{position:absolute;top:30px;right:34px;z-index:2;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:6px;row-gap:3px;
 font:700 10px/1 "DM Sans",Arial,sans-serif;letter-spacing:1.6px;color:#18232c}
.art-rec i{width:8px;height:8px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 3px #e5484d26;animation:al-rec 1.2s steps(2,jump-none) infinite}
.art-timecode{grid-column:1 / -1;font:600 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.5px;color:#4c6b78}
@keyframes al-rec{50%{opacity:.25}}

.art-strip{position:absolute;left:0;right:0;bottom:22px;z-index:1;height:74px;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* Three identical sets of six frames; the track moves exactly one set (6 × frame + gap) so the loop is seamless.
   The sprocket pattern repeats every 18px, which divides the set width, so it never jumps either. */
.art-strip-track{--shot:76px;--set:calc(6 * (var(--shot) + 8px));display:flex;gap:8px;width:max-content;height:100%;padding:12px 8px;background:#18232c;border-radius:6px;position:relative;animation:al-strip 32s linear infinite}
.art-strip-track::before,.art-strip-track::after{content:"";position:absolute;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,transparent 0 6px,#e9f1f3cc 6px 12px,transparent 12px 18px)}
.art-strip-track::before{top:3px}.art-strip-track::after{bottom:3px}
.art-shot{width:var(--shot);height:100%;border-radius:4px;flex-shrink:0}
.art-shot-1{background:radial-gradient(circle at 70% 35%,#f7e1b5 0 9%,transparent 10%),linear-gradient(#9fc4d2,#e9f1f3 55%,#5f8593 56%,#2c4f5c)}
.art-shot-2{background:radial-gradient(circle at 30% 60%,#ffd9a0 0 12%,transparent 13%),linear-gradient(#f2b99a,#e48c7a 55%,#3a4b5c 56%)}
.art-shot-3{background:radial-gradient(circle at 20% 70%,#ffe9a3 0 3%,transparent 4%),radial-gradient(circle at 55% 62%,#ffe9a3 0 3%,transparent 4%),radial-gradient(circle at 80% 75%,#ffe9a3 0 3%,transparent 4%),linear-gradient(#142a33,#315c68)}
.art-shot-4{background:radial-gradient(circle at 50% 38%,#e3b48f 0 16%,transparent 17%),radial-gradient(ellipse at 50% 100%,#315c68 0 42%,transparent 43%),linear-gradient(#e9f1f3,#cfdfe5)}
.art-shot-5{background:repeating-linear-gradient(115deg,#8fae7d 0 8px,#a9c48f 8px 16px,#7c9c6b 16px 22px)}
.art-shot-6{background:radial-gradient(ellipse at 50% 80%,#3c5e4b 0 40%,transparent 41%),linear-gradient(#cfe0d6,#7fa38e)}
@keyframes al-strip{to{transform:translateX(calc(-1 * var(--set)))}}

@media(max-width:800px){
 .about-visual-stack .about-art .orb{width:180px;height:180px;bottom:104px;right:16px}
 .art-strip{height:64px;bottom:16px}
 .art-strip-track{--shot:64px}
 .art-rec{top:22px;right:24px}
}
@media(prefers-reduced-motion:reduce){
 .art-lens-ring,.art-iris,.art-lens-scene,.art-lens-sun,.art-rec i,.art-strip-track{animation:none}
}
@media(max-width:520px){.about-visual-stack .about-art .orb{width:156px;height:156px;bottom:96px}.art-rec{display:none}}
@media(max-width:520px){.about-visual-stack .about-art .art-label{font-size:27px;letter-spacing:-1.2px}}

/* Card title: a "3 2 1 AKSİYON!" slate countdown. Digits light up in turn, then the cue pops. */
.art-countdown .cd-n,.art-countdown .cd-go{display:inline-block;transform-origin:50% 70%}
.art-countdown .cd-n{font-variant-numeric:tabular-nums;opacity:.22;animation:cd-light 6s ease-out infinite}
.art-countdown .cd-n:nth-child(2){animation-delay:.8s}
.art-countdown .cd-n:nth-child(3){animation-delay:1.6s}
.art-countdown .cd-go{color:#315c68;opacity:.15;animation:cd-go 6s cubic-bezier(.2,.9,.25,1.3) infinite}
@keyframes cd-light{0%{opacity:.22;transform:none}6%{opacity:1;transform:scale(1.18)}12%{transform:none}66%{opacity:1}74%,100%{opacity:.22}}
@keyframes cd-go{0%,38%{opacity:.15;transform:translateY(6px)}44%{opacity:1;transform:scale(1.1)}50%{transform:none}70%{opacity:1}78%,100%{opacity:.15;transform:none}}
@media(prefers-reduced-motion:reduce){.art-countdown .cd-n,.art-countdown .cd-go{animation:none;opacity:1}}

/* Hero: the portrait becomes the stage. The block is turned slightly on its vertical axis and opens
   flat as you scroll (--open 0→1); it also tilts a hair with the cursor (--mx/--my). Set by portrait-motion.js. */
.hero.hero-photo{padding-top:36px}
.hero-photo .hero-glass{display:none}
.hero-scene{margin-top:8px}
.hero-stage{
 --tilt:5deg;position:relative;display:flex;align-items:center;box-sizing:content-box;aspect-ratio:2400 / 964;
 border:10px solid transparent;border-radius:36px;
 background:linear-gradient(140deg,#ffffffe6,#eef4f6b3 45%,#d7e5ea) border-box;
 box-shadow:0 0 0 1px #ffffffd9,inset 0 0 0 1px #ffffff80,0 1px 3px #182c3614,0 34px 70px #182c3626;
 transform-origin:50% 50%;
 transform:perspective(1800px) rotateY(calc((1 - var(--open,0)) * var(--tilt) + var(--mx,0) * 1.6deg)) rotateX(calc(var(--my,0) * -1.2deg)) scale(calc(.97 + var(--open,0) * .03));
}
.hero-media{position:absolute;inset:0;border-radius:26px;overflow:hidden;clip-path:inset(0 round 26px);background:#dadcdd}
.hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 30%}
.hero-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(90deg,#f3f5f6f5 0%,#f3f5f6d9 30%,#f3f5f680 46%,#f3f5f600 60%)}
/* The person starts at ~46% of the photo's width; the text stays inside the left 41%. */
.hero-content{position:relative;z-index:2;align-self:center;max-width:42%;padding:0 0 0 6%}
.hero.hero-photo .hero-content h1{font-size:clamp(28px,5.1cqi,96px);line-height:1.04;margin-top:0}
/* Text scales with the stage itself, so it always fits inside the photo's height. */
.hero-stage{container-type:inline-size}
.hero.hero-photo .hero-content>.eyebrow{font-size:clamp(9px,.85cqi,12px)}
.hero.hero-photo .hero-content .hero-bottom p{font-size:clamp(12px,1.5cqi,22px);line-height:1.5}
.hero.hero-photo .hero-content .hero-bottom p span{display:block;margin-top:.5cqi;font-size:clamp(10.5px,1.18cqi,17px)}
.hero.hero-photo .hero-content .round-link b{width:clamp(34px,3.9cqi,60px);height:clamp(34px,3.9cqi,60px);font-size:clamp(16px,1.6cqi,24px)}
.hero.hero-photo .hero-content .round-link{gap:1.3cqi;font-size:clamp(11px,1.12cqi,16px);font-weight:500}
.hero.hero-photo .hero-content .hero-bottom{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:2.2cqi;margin-top:2cqi}
.hero.hero-photo .hero-foot{margin-top:44px}

/* Intro (only when JS marks the stage): rounded window reveals the photo, photo settles, text rises. */
.hero-stage.is-pending .hero-content>*{opacity:0}
.hero-stage.is-pending .hero-media::after,.hero-stage.in .hero-media::after{content:"";position:absolute;z-index:2;inset:0 auto 0 0;width:0;border-radius:26px;box-shadow:0 0 0 200vmax #dadcdd;pointer-events:none}
.hero-stage.in .hero-media::after{animation:hero-reveal 1.3s cubic-bezier(.77,0,.18,1) forwards}
.hero-stage.in .hero-media img{animation:hero-settle 2s cubic-bezier(.22,.8,.2,1) both}
.hero-stage.in .hero-content>*{animation:hero-rise .9s cubic-bezier(.22,.8,.2,1) both}
.hero-stage.in .hero-content>:nth-child(1){animation-delay:.55s}
.hero-stage.in .hero-content>:nth-child(2){animation-delay:.7s}
.hero-stage.in .hero-content>:nth-child(3){animation-delay:.85s}
@keyframes hero-reveal{to{width:100%}}
@keyframes hero-settle{from{transform:scale(1.1)}to{transform:none}}
@keyframes hero-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media(max-width:980px){
 .hero.hero-photo{padding-top:22px}
 .hero-stage{--tilt:3deg;display:block;aspect-ratio:auto;border-width:8px;border-radius:28px}
 .hero-media{position:relative;inset:auto;height:auto;aspect-ratio:2400 / 964;border-radius:20px;clip-path:inset(0 round 20px)}
 .hero-media img{object-position:50% 50%}
 .hero-media::before{background:linear-gradient(0deg,#f3f5f699,#f3f5f600 30%)}
 .hero-stage.is-pending .hero-media::after,.hero-stage.in .hero-media::after{border-radius:20px}
 .hero-content{max-width:none;padding:24px 6% 26px}
 .hero.hero-photo .hero-content h1{font-size:clamp(42px,12vw,64px);margin-top:16px}
 .hero.hero-photo .hero-content .hero-bottom{margin-top:22px}
 .hero.hero-photo .hero-content>.eyebrow{font-size:10px}
 .hero.hero-photo .hero-content .hero-bottom p{font-size:15px}
 .hero.hero-photo .hero-content .hero-bottom p span{font-size:13px}
 .hero.hero-photo .hero-content .round-link b{width:44px;height:44px}
 .hero.hero-photo .hero-content .hero-bottom{gap:16px}
}
@media(prefers-reduced-motion:reduce){.hero-stage{transform:none}}

/* Contact: the portrait moved to the hero, so the section starts with its own spacing again. */
.contact-section{padding-top:72px}
@media(max-width:600px){.contact-section{padding-top:52px}}

/* Name super on the photo: a quiet liquid-glass tag at the bottom right, over the jacket,
   so it never competes with the headline. Slides in after the reveal. */
.hero-lower{position:absolute;z-index:3;right:2.6%;bottom:3.2cqi;max-width:34%;display:grid;gap:.2cqi;
 padding:.8cqi 1.3cqi;border-radius:1cqi;color:#18232c;text-align:right;
 background:linear-gradient(135deg,#ffffff8c,#ffffff40);border:1px solid #ffffffb3;
 box-shadow:inset 1px 1px 1px #ffffffd9,inset -1px -1px 2px #6e93a426,0 6px 18px #0b1a221f;
 -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.hero-lower strong{font:700 clamp(10.5px,1.08cqi,15px)/1.15 Manrope,"DM Sans",Arial,sans-serif;letter-spacing:-.01em}
.hero-lower span{font-size:clamp(8.5px,.78cqi,11.5px);line-height:1.35;color:#3f5d69}
.hero-stage.is-pending .hero-lower{opacity:0}
.hero-stage.in .hero-lower{animation:hero-lower .8s 1.15s cubic-bezier(.22,.8,.2,1) both}
@keyframes hero-lower{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes hero-lower-left{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
/* Small screens: the photo is short, so the tag sits on the empty left side, away from the face. */
@media(max-width:980px){.hero-lower{right:auto;left:8px;bottom:8px;max-width:40%;padding:6px 10px;border-radius:10px;text-align:left}.hero-stage.in .hero-lower{animation-name:hero-lower-left}.hero-lower strong{font-size:11.5px}.hero-lower span{font-size:9.5px}}
@media(prefers-reduced-motion:reduce){.hero-stage.in .hero-lower{animation:none}}

/* "Referansları incele": liquid-glass pill with a dark arrow badge, matching the contact button. */
.hero.hero-photo .hero-content .round-link{
 padding:clamp(5px,.5cqi,8px) clamp(5px,.5cqi,8px) clamp(5px,.5cqi,8px) clamp(16px,1.7cqi,26px);border-radius:999px;
 background:linear-gradient(135deg,#ffffffbf,#ffffff59);border:1px solid #ffffffd9;
 box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a426,var(--lg-soft);
 -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
 transition:translate .35s cubic-bezier(.2,.9,.25,1.2),box-shadow .35s ease,background .35s ease}
.hero.hero-photo .hero-content .round-link span{max-width:none;white-space:nowrap}
.hero.hero-photo .hero-content .round-link b{border:0;color:#fff;background:linear-gradient(145deg,#2b4c5a,#18232c);
 box-shadow:inset 0 1px 1px #ffffff40,0 4px 10px #18232c40;transition:background .35s ease,transform .2s ease}
@media(hover:hover) and (pointer:fine){
 .hero.hero-photo .hero-content .round-link:hover{translate:0 -2px;background:linear-gradient(135deg,#ffffffe6,#ffffff8c);box-shadow:inset 1px 1px 1px #fff,0 2px 4px #182c3612,0 12px 26px #182c361f}
 .hero.hero-photo .hero-content .round-link:hover b{transform:none;background:linear-gradient(145deg,#3d7180,#1f3b46);animation:lg-arrow-down .9s ease-in-out infinite}
}
@keyframes lg-arrow-down{0%,100%{translate:0 0}50%{translate:0 3px}}
@media(prefers-reduced-motion:reduce){.hero.hero-photo .hero-content .round-link:hover b{animation:none}}

/* Menu with five tabs: on narrow screens it may scroll sideways (no scrollbar) instead of wrapping. */
@media(max-width:760px){
 header nav{overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:clamp(10px,3.4vw,18px)}
 header nav::-webkit-scrollbar{display:none}
 header nav a{flex-shrink:0}
}
@media(max-width:420px){header nav{font-size:12.5px}}

/* Eski ✦ glifinin yerine gelen SVG simgeler (Yaratıcı sürecim) */
.process-spark svg{display:inline-block;width:15px;height:15px;vertical-align:-2px}
.process-center svg{display:block;width:13px;height:13px;margin-left:2px}

/* Referanslar: web sitesi kartları (Instagram kartlarının altında) */
.web-refs{margin-top:56px}
.web-refs-title{margin:0 0 18px;font-size:22px;font-weight:800;letter-spacing:-.5px;color:#18232c}
.web-refs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.web-ref{position:relative;display:flex;flex-direction:column;gap:14px;padding:14px 14px 16px;border-radius:24px;color:inherit;text-decoration:none;
 background:linear-gradient(145deg,#ffffffe6,#eef5f7b8);border:1px solid #ffffffd9;
 box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41a,var(--lg-soft);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.web-ref:hover{transform:translateY(-4px) scale(1.01);box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #6e93a41f,0 2px 6px #182c361a,0 14px 32px #182c3624}
.web-ref:focus-visible{outline:2px solid #315c68;outline-offset:3px}
.web-ref-shot{display:block;overflow:hidden;border-radius:16px;background:#18232c;box-shadow:0 1px 2px #182c361f}
.web-ref-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f4f8f9;border-bottom:1px solid #18232c14}
.web-ref-bar i{width:8px;height:8px;border-radius:50%;background:#c9d6db}
.web-ref-bar span{margin-left:8px;flex:1;min-width:0;padding:3px 10px;border-radius:999px;background:#fff;font-size:11px;color:#5b7480;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-ref-shot img{display:block;width:100%;height:auto;aspect-ratio:40/21;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.web-ref:hover .web-ref-shot img{transform:scale(1.04)}
.web-ref-copy{display:flex;flex-direction:column;gap:3px;padding:0 44px 0 4px}
.web-ref-copy strong{font-size:19px;font-weight:700;letter-spacing:-.4px;color:#18232c}
.web-ref-copy small{font-size:13px;color:#5b7480}
.web-ref-go{position:absolute;right:16px;bottom:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#18232c;color:#fff;font-size:15px;transition:transform .3s}
.web-ref:hover .web-ref-go{transform:translate(2px,-2px)}
@media(max-width:760px){.web-refs{margin-top:44px;max-width:540px;margin-left:auto;margin-right:auto}.web-refs-grid{grid-template-columns:1fr;gap:24px}}
@media(prefers-reduced-motion:reduce){.web-ref,.web-ref-shot img,.web-ref-go{transition:none}.web-ref:hover,.web-ref:hover .web-ref-shot img,.web-ref:hover .web-ref-go{transform:none}}

/* Referanslar: uygulama sunumu kartı (web sitesi kartlarının yanında) ve slayt görüntüleyici */
.web-refs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
button.web-ref{font:inherit;text-align:left;cursor:pointer;width:100%;-webkit-appearance:none;appearance:none}
.web-ref-go svg{width:16px;height:16px}
@media(max-width:1080px) and (min-width:761px){.web-refs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
dialog.deck-dialog{width:min(1180px,calc(100vw - 32px),calc((100dvh - 190px) * 16 / 9));max-width:none;max-height:none;margin:auto;padding:58px 0 0;border:0;background:transparent;color:#fff;overflow:visible}
dialog.deck-dialog::backdrop{background:#0a1218e6}
dialog.deck-dialog[open]{animation:deck-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes deck-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.deck-slide{margin:0;border-radius:18px;overflow:hidden;background:#070d18;box-shadow:0 30px 80px #0009;touch-action:pan-y}
.deck-slide img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;user-select:none;-webkit-user-drag:none}
.deck-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}
.deck-nav button,.deck-close{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff14;color:#fff;font:inherit;font-size:20px;cursor:pointer;transition:background .2s,opacity .2s}
.deck-nav button:hover:not(:disabled),.deck-close:hover{background:#ffffff2e}
.deck-nav button:disabled{opacity:.3;cursor:default}
.deck-nav button:focus-visible,.deck-close:focus-visible{outline:2px solid #9fd8ea;outline-offset:3px}
.deck-count{min-width:64px;text-align:center;font-size:15px;letter-spacing:.5px;color:#ffffffd9;font-variant-numeric:tabular-nums}
.deck-close{position:absolute;top:0;right:0;font-size:26px}
@media(max-width:760px){.web-refs-grid{grid-template-columns:1fr}.deck-slide{border-radius:12px}}
@media(prefers-reduced-motion:reduce){dialog.deck-dialog[open]{animation:none}}

/* Menüde altı sekme (Blog eklendi): dar telefonlarda es/de dahil tek satıra sığsın, kenarda yarım sekme kalmasın */
@media(max-width:420px){header nav{gap:clamp(6px,1.9vw,12px);font-size:12px;letter-spacing:-.1px}}
@media(max-width:370px){header nav{font-size:11.5px;letter-spacing:-.2px}}