/* ========================================================================== İSTANBUL GASTRONOMİ MERKEZİ — Premium Design System v2 Direction: "Cinematic kitchen, editorial calm" Display: Rokkitt (Eataly) · Body: Plus Jakarta Sans (USLA) ========================================================================== */ /* fontlar HTML icinde paralel yukleniyor (render-blocking zinciri kirildi) */ /* ---------- tokens ---------- */ :root{ --paper:#FFFFFF; /* beyaz — primary surface */ --paper2:#F4F3EF; /* off-white — secondary surface */ --paper3:#FDFDFC; /* lifted card surface */ --ink:#1A1207; /* espresso ink */ --ink2:rgba(26,18,7,.64); --ink3:rgba(26,18,7,.42); --line:rgba(26,18,7,.14); --esp:#0F0A05; /* inverse cinematic surface */ --esp2:#181006; --esp3:#231708; --cream:#F1E9d7; --cream2:rgba(241,233,215,.68); --cream3:rgba(241,233,215,.42); --lined:rgba(241,233,215,.15); --brass:#A0762F; /* accent on light (AA for large/UI) */ --brass2:#D8AC5C; /* accent on dark */ --ember:#AC4224; /* live / urgency */ --leaf:#5C6B48; /* success / fresh */ /* Başlık/vurgu: Fraunces — değişken opsz eksenli, sıcak eski-stil serif (editoryal, el işi hissi) Gövde/arayüz: Plus Jakarta Sans — hümanist geometrik, yüksek x-yüksekliği, tam Türkçe set */ --serif:"Fraunces","Iowan Old Style","Times New Roman",Georgia,serif; --sans:"Plus Jakarta Sans","Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif; --max:1440px; --gut:clamp(20px,4.4vw,72px); --r-s:9px; --r-m:16px; --r-pill:999px; --ease:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.16,1,.3,1); --sh-card:0 1px 2px rgba(26,18,7,.05),0 14px 40px rgba(26,18,7,.07); --sh-float:0 24px 70px rgba(15,10,5,.22); } /* ---------- reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400; color:var(--ink);background:var(--paper); -webkit-font-smoothing:antialiased;overflow-x:clip; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit} ::selection{background:var(--brass);color:#FFF8EA} /* ---------- layout ---------- */ .container{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:clamp(72px,9vw,150px)} .section-tight{padding-block:clamp(52px,6vw,96px)} .grain{position:relative} .grain::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } /* ---------- type roles ---------- */ .display{ font-family:var(--serif);font-weight:380;letter-spacing:-.015em;line-height:1.02; font-size:clamp(52px,7.4vw,118px);text-wrap:balance; font-variation-settings:"opsz" 120; } .h1{font-family:var(--serif);font-weight:420;letter-spacing:-.012em;line-height:1.06;font-size:clamp(40px,5vw,76px);text-wrap:balance;font-variation-settings:"opsz" 90} .h2{font-family:var(--serif);font-weight:440;letter-spacing:-.01em;line-height:1.1;font-size:clamp(31px,3.6vw,54px);text-wrap:balance;font-variation-settings:"opsz" 60} .h3{font-family:var(--serif);font-weight:480;line-height:1.22;font-size:clamp(21px,2vw,27px)} .h4{font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.35} em.tone{font-style:italic;color:var(--brass);font-variation-settings:"opsz" 120} .on-dark em.tone{color:var(--brass2)} .eyebrow{ display:inline-flex;align-items:center;gap:12px; font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass); } .eyebrow::before{content:"";width:30px;height:1px;background:currentColor;opacity:.7} .on-dark .eyebrow{color:var(--brass2)} .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink2);max-width:56ch;font-weight:400} .on-dark{color:var(--cream)} .on-dark .lead{color:var(--cream2)} .measure{max-width:68ch} /* ---------- buttons ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden; font-weight:600;font-size:15.5px;letter-spacing:.01em; min-height:52px;padding:14px 30px;border-radius:var(--r-pill); transition:color .28s var(--ease),border-color .28s var(--ease),transform .18s var(--ease); isolation:isolate;white-space:nowrap; } .btn .fill{ content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit; transform:translateY(101%);transition:transform .38s var(--ease-in); } .btn:hover .fill{transform:translateY(0)} .btn .arr{display:inline-flex;transition:transform .28s var(--ease)} .btn:hover .arr{transform:translateX(5px)} .btn:active{transform:scale(.985)} .btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px} .btn-solid{background:var(--ink);color:var(--paper3)} .btn-solid .fill{background:var(--brass)} .btn-solid:hover{color:#FFF8EA} .btn-brass{background:var(--brass);color:#FFF8EA} .btn-brass .fill{background:var(--ink)} .btn-line{border:1px solid var(--line);color:var(--ink);background:transparent} .btn-line .fill{background:var(--ink)} .btn-line:hover{color:var(--paper3);border-color:var(--ink)} .on-dark .btn-solid{background:var(--brass2);color:var(--esp)} .on-dark .btn-solid .fill{background:var(--cream)} .on-dark .btn-line{border-color:var(--lined);color:var(--cream)} .on-dark .btn-line .fill{background:var(--cream)} .on-dark .btn-line:hover{color:var(--esp);border-color:var(--cream)} .lnk{ position:relative;display:inline-flex;align-items:center;gap:9px; font-weight:600;font-size:15px;color:var(--brass);padding-bottom:3px; } .lnk::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:100%; background:currentColor;transform:scaleX(.3);transform-origin:left; transition:transform .32s var(--ease-in); } .lnk:hover::after{transform:scaleX(1)} .lnk .arr{transition:transform .28s var(--ease)} .lnk:hover .arr{transform:translateX(4px)} .on-dark .lnk{color:var(--brass2)} /* ---------- preloader ---------- */ .loader{ position:fixed;inset:0;z-index:200;background:var(--esp); display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px; transition:opacity .5s var(--ease),visibility .5s; } .loader.done{opacity:0;visibility:hidden} .loader .word{ font-family:var(--serif);font-style:italic;font-size:clamp(30px,4.4vw,52px);color:var(--cream); overflow:hidden;display:block; } .loader .word span{display:inline-block;transform:translateY(110%);animation:loadUp .9s var(--ease-in) forwards} .loader .bar{width:180px;height:1px;background:var(--lined);overflow:hidden} .loader .bar i{display:block;height:100%;background:var(--brass2);transform:scaleX(0);transform-origin:left;animation:loadBar 1.1s .15s var(--ease-in) forwards} @keyframes loadUp{to{transform:translateY(0)}} @keyframes loadBar{to{transform:scaleX(1)}} /* ---------- header: floating glass capsule ---------- */ .site-head{ position:fixed;inset:0 0 auto 0;z-index:130;padding-inline:var(--gut); transition:transform .42s var(--ease),color .3s; } body.menu-open .site-head{color:var(--cream)} body.menu-open .site-head .shell{background:transparent;box-shadow:none;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} body.menu-open .site-head .progress{opacity:0} .site-head.hide{transform:translateY(-130%)} .site-head .shell{ max-width:var(--max);margin-inline:auto;padding-inline:0; border:1px solid transparent;border-radius:var(--r-pill); transition:all .45s var(--ease); } .site-head.solid .shell{ margin-top:14px;padding-inline:clamp(16px,2vw,30px); background:rgba(245,239,228,.72); backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5); border-color:rgba(26,18,7,.1); box-shadow:0 18px 48px -18px rgba(15,10,5,.28),inset 0 1px 0 rgba(255,255,255,.5); } .site-head.solid .nav{height:66px} .site-head.on-hero{color:var(--cream)} .site-head.on-hero.solid{color:var(--ink)} .site-head.on-hero.solid .shell{background:rgba(245,239,228,.78)} /* thin brass scroll-progress filament along capsule bottom */ .site-head .progress{ position:absolute;left:clamp(24px,3vw,40px);right:clamp(24px,3vw,40px);bottom:-1px;height:2px; border-radius:2px;background:linear-gradient(90deg,var(--brass),var(--brass2)); transform:scaleX(var(--sp,0));transform-origin:left;opacity:0;transition:opacity .3s; } .site-head.solid .progress{opacity:.9} .site-head .shell{position:relative} .nav{display:flex;align-items:center;gap:34px;height:84px;transition:height .45s var(--ease)} .brand{display:flex;flex-direction:column;line-height:1;z-index:130} .brand .over{font-size:10px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;opacity:.6} .brand .word{font-family:var(--serif);font-size:22px;font-weight:480;margin-top:4px} .brand .word i{font-style:italic;color:var(--brass);font-weight:380} .site-head.on-hero:not(.solid) .brand .word i{color:var(--brass2)} .nav-links{display:flex;gap:4px;margin-left:auto} .nav-links a{ position:relative;font-size:14.5px;font-weight:550;padding:9px 14px;border-radius:var(--r-pill); opacity:.78;transition:opacity .2s,background .2s; } .nav-links a:hover{opacity:1;background:rgba(160,118,47,.1)} .nav-links a[aria-current]{opacity:1} .nav-links a[aria-current]::after{ content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:var(--brass); } .nav-actions{display:flex;align-items:center;gap:14px} .nav-actions .ghost{font-size:14.5px;font-weight:600;opacity:.78} .nav-actions .ghost:hover{opacity:1} .nav-actions .btn{min-height:44px;padding:10px 22px;font-size:14.5px} .menu-btn{ display:none;z-index:130;width:46px;height:46px;border:1px solid var(--line);border-radius:50%; align-items:center;justify-content:center;flex-direction:column;gap:5px; } .menu-btn i{width:18px;height:1.6px;background:currentColor;transition:transform .3s var(--ease),opacity .2s} .menu-btn.open i:nth-child(1){transform:translateY(3.3px) rotate(45deg)} .menu-btn.open i:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)} /* mobile overlay menu */ .menu-layer{ position:fixed;inset:0;z-index:120;background:var(--esp);color:var(--cream); /* flex DEĞİL: flex-column çocukları shrink-to-fit yapıp .container'ı eziyordu (şef kartları ve harita daralıyordu). Grid'de tek sütun çocukları tam genişlikte tutar, align-content dikeyde ortalar. */ display:grid;align-content:center;padding:100px var(--gut) 48px; clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease-in);visibility:hidden; } .menu-layer.open{clip-path:inset(0 0 0 0);visibility:visible} .menu-layer a.big{ font-family:var(--serif);font-size:clamp(34px,8vw,54px);font-weight:400;line-height:1.28; opacity:0;transform:translateY(24px);transition:opacity .4s var(--ease),transform .4s var(--ease); } .menu-layer.open a.big{opacity:1;transform:none} .menu-layer a.big:hover{color:var(--brass2);font-style:italic} .menu-layer .foot{margin-top:auto;display:flex;justify-content:space-between;font-size:13.5px;color:var(--cream3)} /* ---------- hero (homepage) ---------- */ .hero{ position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; color:var(--cream);overflow:hidden;background:var(--esp); } .hero .bg{ position:absolute;inset:0;background-size:cover;background-position:center; transform:scale(1.06);animation:heroSettle 1.8s .2s var(--ease-in) forwards; } .hero .veil{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,10,5,.42) 0%,rgba(15,10,5,.18) 42%,rgba(15,10,5,.86) 100%); } @keyframes heroSettle{to{transform:scale(1)}} .hero .container{position:relative;z-index:2;padding-bottom:clamp(90px,11vh,150px)} .hero .eyebrow{color:var(--brass2);margin-bottom:26px} .hero-line{overflow:hidden;display:block} .hero-line span{display:block;transform:translateY(112%);animation:lineUp .95s var(--ease-in) forwards} .hero-line:nth-child(2) span{animation-delay:.12s} .hero-line:nth-child(3) span{animation-delay:.24s} @keyframes lineUp{to{transform:translateY(0)}} .hero .lead{margin-top:26px;opacity:0;animation:fadeUp .8s .55s var(--ease-in) forwards} .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px;opacity:0;animation:fadeUp .8s .72s var(--ease-in) forwards} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .hero-meta{ position:relative;z-index:2;border-top:1px solid var(--lined); display:flex;gap:clamp(24px,4vw,64px);flex-wrap:wrap; padding:20px var(--gut) 26px;max-width:var(--max);margin-inline:auto;width:100%; opacity:0;animation:fadeUp .8s .9s var(--ease-in) forwards; } .hero-meta div{font-size:13px;color:var(--cream3);letter-spacing:.02em} .hero-meta b{display:block;font-family:var(--serif);font-weight:460;font-size:19px;color:var(--cream);font-variant-numeric:tabular-nums} /* ---------- marquee ---------- */ .marquee{overflow:hidden;white-space:nowrap;user-select:none;--speed:36s;padding-block:20px;margin-block:-20px} .marquee-track{display:inline-flex;align-items:baseline;gap:0;animation:marq var(--speed) linear infinite;will-change:transform} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marq{to{transform:translateX(-50%)}} .marquee .item{ font-family:var(--serif);font-weight:360;font-size:clamp(26px,3.2vw,44px); padding-inline:clamp(20px,2.4vw,36px);color:var(--ink3); } .marquee .item:nth-child(even){font-style:italic;color:var(--brass)} .marquee-band{border-block:1px solid var(--line);padding-block:22px;background:var(--paper)} .on-dark .marquee .item{color:var(--cream3)} .on-dark .marquee .item:nth-child(even){color:var(--brass2)} /* ---------- trust strip ---------- */ .trust{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)} .trust div{ padding:26px 26px 26px 0;font-size:14.5px;color:var(--ink2);border-right:1px solid var(--line); margin-right:26px;display:flex;flex-direction:column;gap:4px; } .trust div:last-child{border-right:none;margin-right:0} .trust b{font-family:var(--serif);font-weight:500;font-size:17.5px;color:var(--ink)} /* ---------- sticky story ---------- */ .story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:start} .story-media{position:sticky;top:110px;height:min(72vh,640px);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-card)} .story-media .frame{ position:absolute;inset:0;background-size:cover;background-position:center; opacity:0;transform:scale(1.05);transition:opacity .7s var(--ease),transform 1.2s var(--ease); } .story-media .frame.on{opacity:1;transform:scale(1)} .story-media .stamp{ position:absolute;left:22px;bottom:20px;z-index:2;font-size:12px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--cream); background:rgba(15,10,5,.55);backdrop-filter:blur(6px);padding:8px 14px;border-radius:var(--r-pill); } .story-steps{display:flex;flex-direction:column} .story-step{min-height:58vh;display:flex;flex-direction:column;justify-content:center;gap:16px;border-top:1px solid var(--line);padding-block:40px} .story-step:first-child{border-top:none} .story-step .no{ font-family:var(--serif);font-style:italic;font-weight:340;font-size:52px;color:var(--brass); line-height:1;font-variant-numeric:tabular-nums;opacity:.45;transition:opacity .4s; } .story-step.on .no{opacity:1} .story-step p{color:var(--ink2);max-width:44ch} /* ---------- editorial course grid (dark band) ---------- */ .band-dark{background:var(--esp);color:var(--cream);position:relative} .band-dark::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(52% 38% at 82% 8%,rgba(216,172,92,.09),transparent 65%); } .feature-grid{display:grid;grid-template-columns:1.3fr 1fr;grid-auto-rows:minmax(240px,auto);gap:24px} .fcard{ position:relative;border-radius:var(--r-m);overflow:hidden;display:flex;align-items:flex-end; min-height:320px;isolation:isolate;border:1px solid var(--lined); } .fcard.tall{grid-row:span 2;min-height:640px} .fcard .img{ position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2; transition:transform .9s var(--ease); } .fcard:hover .img{transform:scale(1.045)} .fcard::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(184deg,rgba(15,10,5,.06) 34%,rgba(15,10,5,.85) 92%); transition:opacity .4s; } .fcard .body{padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:8px;width:100%} .fcard .kicker{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass2)} .fcard .name{font-family:var(--serif);font-weight:440;font-size:clamp(23px,2.3vw,34px);line-height:1.12;color:var(--paper3)} .fcard .meta{font-size:13.5px;color:var(--cream3);font-variant-numeric:tabular-nums;display:flex;gap:14px;flex-wrap:wrap} .fcard .meta b{color:var(--cream2);font-weight:600} .fcard .pill{ position:absolute;top:18px;left:18px;font-size:11.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;padding:6px 13px;border-radius:var(--r-pill); background:rgba(15,10,5,.5);backdrop-filter:blur(8px);border:1px solid var(--lined);color:var(--cream2); } .fcard .pill.hot{background:var(--ember);border-color:transparent;color:#FFF2EA} /* ---------- karaoke manifesto ---------- */ .karaoke{display:flex;flex-direction:column;gap:.35em} .k-line{ font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.16; font-size:clamp(28px,4.4vw,62px); color:rgba(26,18,7,.15); background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/0% 100%; -webkit-background-clip:text;background-clip:text; } .k-line em{font-style:italic; background:linear-gradient(var(--brass),var(--brass)) no-repeat 0 0/inherit; -webkit-background-clip:text;background-clip:text; } .on-dark .k-line{color:rgba(241,233,215,.14);background-image:linear-gradient(var(--cream),var(--cream))} .on-dark .k-line em{background-image:linear-gradient(var(--brass2),var(--brass2))} /* ---------- chef index (hover preview) ---------- */ .chef-index{position:relative;border-top:1px solid var(--line)} .chef-row{ display:grid;grid-template-columns:64px 1fr auto auto;gap:clamp(16px,3vw,44px);align-items:center; padding:clamp(20px,2.6vw,32px) 6px;border-bottom:1px solid var(--line); transition:opacity .3s,padding-left .3s var(--ease);position:relative; } .chef-index:hover .chef-row{opacity:.38} .chef-index .chef-row:hover{opacity:1;padding-left:16px} .chef-row .idx{font-size:13px;color:var(--ink3);font-variant-numeric:tabular-nums} .chef-row .nm{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,52px);line-height:1.05;transition:font-style .1s} .chef-row:hover .nm{font-style:italic;color:var(--brass)} .chef-row .sp{font-size:14px;color:var(--ink2);text-align:right;max-width:230px} .chef-row .arr{ width:46px;height:46px;border:1px solid var(--line);border-radius:50%; display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .25s var(--ease); } .chef-row:hover .arr{background:var(--ink);color:var(--paper3);transform:rotate(-45deg)} .chef-peek{ position:absolute;z-index:5;width:270px;aspect-ratio:3/4;border-radius:var(--r-m);overflow:hidden; pointer-events:none;opacity:0;transform:scale(.92) rotate(2deg);box-shadow:var(--sh-float); transition:opacity .3s var(--ease),transform .4s var(--ease);right:22%;top:0; background-size:cover;background-position:center; } .chef-peek.on{opacity:1;transform:scale(1) rotate(0)} .chef-thumb{display:none;width:58px;height:74px;border-radius:8px;background-size:cover;background-position:center} /* ---------- event rows ---------- */ .event{ display:grid;grid-template-columns:104px 1fr auto auto;gap:clamp(18px,3vw,40px);align-items:center; padding:26px 10px;border-bottom:1px solid var(--line);transition:background .2s;position:relative; } .events{border-top:1px solid var(--line)} .event:hover{background:rgba(160,118,47,.06)} .event .date{text-align:center;border-right:1px solid var(--line);padding-right:22px} .event .date b{display:block;font-family:var(--serif);font-weight:420;font-size:36px;line-height:1;font-variant-numeric:tabular-nums} .event .date span{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)} .event h3{font-family:var(--serif);font-weight:460;font-size:clamp(19px,1.8vw,24px);margin-bottom:3px} .event .who{font-size:14px;color:var(--ink2)} .event .when{font-size:13.5px;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums} .event .when b{display:block;font-size:15.5px;color:var(--ink);font-weight:600} .event .cta{text-align:right;min-width:150px} .event .amt{font-family:var(--serif);font-size:21px;font-variant-numeric:tabular-nums} .badge-inc{ display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--leaf);border:1px solid var(--leaf);padding:5px 11px;border-radius:var(--r-pill); } .badge-live{ display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#FFF2EA;background:var(--ember);padding:5px 12px;border-radius:var(--r-pill); } .badge-live i{width:6px;height:6px;border-radius:50%;background:#FFD9CB;animation:blink 1.6s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} /* ---------- diploma ---------- */ .diploma{ background:var(--paper3);border:1px solid var(--line);border-radius:6px; padding:clamp(30px,3.6vw,52px) clamp(26px,3.2vw,46px);position:relative;box-shadow:var(--sh-card); } .diploma::before{content:"";position:absolute;inset:12px;border:1px solid var(--brass);opacity:.35;pointer-events:none} .diploma .crest{font-family:var(--serif);font-style:italic;text-align:center;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-bottom:24px} .diploma h3{font-family:var(--serif);font-weight:440;text-align:center;font-size:clamp(22px,2.2vw,30px);margin-bottom:6px} .diploma .sub{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:30px} .diploma .rule{border-top:1px solid var(--line);margin-block:20px} .diploma .row{display:flex;justify-content:space-between;gap:14px;font-size:13px;color:var(--ink2)} .diploma .seal{ position:absolute;right:26px;bottom:24px;width:66px;height:66px;border-radius:50%; border:1px solid var(--brass);display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-style:italic;font-size:13px;color:var(--brass); background:radial-gradient(circle at 32% 28%,rgba(160,118,47,.25),rgba(160,118,47,.06)); } /* ---------- logo spotlight ---------- */ .logos{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);align-items:center} .logos .lg{ font-family:var(--serif);font-size:clamp(17px,1.6vw,21px);color:var(--ink2);opacity:.4; transition:opacity .6s var(--ease);letter-spacing:.02em; } .logos .lg.uni{font-style:italic;color:var(--brass)} .logos .lg.lit{opacity:1} /* ---------- quotes ---------- */ .quotes{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start} .quote{background:var(--paper3);border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(28px,3vw,44px);box-shadow:var(--sh-card)} .quote.offset{margin-top:56px} .quote .mark{font-family:var(--serif);font-size:60px;line-height:.4;color:var(--brass);display:block;margin-bottom:26px} .quote p{font-family:var(--serif);font-style:italic;font-weight:380;font-size:clamp(18px,1.7vw,23px);line-height:1.55;margin-bottom:26px} .quote .who{display:flex;align-items:center;gap:14px;font-size:14px} .quote .who .av{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;flex:none} .quote .who b{display:block;font-weight:650} .quote .who span{color:var(--ink2);font-size:12.5px} /* ---------- cards: blog / generic media card ---------- */ .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,380px);gap:24px;overflow-x:auto;padding:4px 4px 26px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--brass) transparent} .rail>*{scroll-snap-align:start} .mcard{display:flex;flex-direction:column;gap:14px} .mcard .ph{ aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;position:relative; background-size:cover;background-position:center; } .mcard .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(15,10,5,.34));opacity:0;transition:opacity .3s} .mcard:hover .ph::after{opacity:1} .mcard .ph .zoom{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease)} .mcard:hover .ph .zoom{transform:scale(1.05)} .mcard .cat{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)} .mcard h3{font-family:var(--serif);font-weight:460;font-size:21px;line-height:1.28} .mcard:hover h3{color:var(--brass)} .mcard .sum{font-size:14.5px;color:var(--ink2)} .mcard .date{font-size:12.5px;color:var(--ink3)} /* ---------- final cta ---------- */ .final{ position:relative;min-height:76vh;display:flex;align-items:center;color:var(--cream); background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden; } .final .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,5,.68),rgba(15,10,5,.5))} .final .container{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px} /* ---------- footer: curtain reveal (content slides away, footer sharpens from blur) ---------- */ .site-foot{background:var(--esp);color:var(--cream2);overflow:hidden} .page-main{position:relative;z-index:2;background:var(--paper)} body.foot-reveal .page-main{ margin-bottom:var(--foot-h,0px); box-shadow:0 40px 80px -20px rgba(15,10,5,.5); } body.foot-reveal .site-foot{position:fixed;left:0;right:0;bottom:0;z-index:1} body.foot-reveal .site-foot .inner{ transform:translateY(calc((1 - var(--reveal,0)) * -90px)) scale(calc(.96 + var(--reveal,0)*.04)); filter:blur(calc((1 - var(--reveal,0)) * 14px)); opacity:calc(.35 + var(--reveal,0)*.65); will-change:transform,filter,opacity; } .foot-statement{ font-family:var(--serif);font-weight:360;letter-spacing:-.02em;line-height:.94; font-size:clamp(72px,13.4vw,210px);color:var(--esp3);text-align:center; padding-top:clamp(48px,7vw,110px);user-select:none; background:linear-gradient(180deg,rgba(216,172,92,.34),rgba(216,172,92,.05)); -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap; } .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,4vw,60px);padding-block:clamp(48px,6vw,84px)} .foot-grid .about{font-size:14.5px;max-width:36ch;margin-top:14px;color:var(--cream3)} .foot-grid h4{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brass2);margin-bottom:18px} .foot-grid ul{display:flex;flex-direction:column;gap:11px;font-size:14.5px} .foot-grid a{color:var(--cream3);transition:color .2s,padding-left .25s var(--ease)} .foot-grid a:hover{color:var(--cream);padding-left:6px} .foot-bottom{ border-top:1px solid var(--lined);padding-block:24px;display:flex;flex-wrap:wrap;gap:16px; justify-content:space-between;font-size:12.5px;color:var(--cream3); } .foot-bottom a:hover{color:var(--cream)} /* ---------- inner page hero ---------- */ .page-hero{padding-top:clamp(140px,18vh,210px);padding-bottom:clamp(40px,5vw,72px)} .page-hero .crumb{font-size:13px;color:var(--ink3);margin-bottom:22px;display:flex;gap:10px;align-items:center} .page-hero .crumb a:hover{color:var(--brass)} .page-hero .display{margin-bottom:22px} .page-hero .lead{margin-top:4px} .page-hero.on-dark .crumb{color:var(--cream3)} /* ---------- filters / chips ---------- */ .chipbar{display:flex;gap:10px;flex-wrap:wrap} .chip{ font-size:13.5px;font-weight:600;padding:10px 20px;border:1px solid var(--line);border-radius:var(--r-pill); color:var(--ink2);transition:all .22s var(--ease); } .chip:hover{border-color:var(--brass);color:var(--brass)} .chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper3)} .count-note{font-size:13.5px;color:var(--ink3)} /* ---------- catalog cards (light) ---------- */ .course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .ccard{ background:var(--paper3);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden; display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .ccard:hover{transform:translateY(-6px);box-shadow:var(--sh-card)} .ccard .ph{aspect-ratio:16/10;overflow:hidden;position:relative} .ccard .ph .zoom{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease)} .ccard:hover .ph .zoom{transform:scale(1.05)} .ccard .ph .tags{position:absolute;top:14px;left:14px;display:flex;gap:8px} .ccard .ph .tag{ font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; background:rgba(15,10,5,.55);backdrop-filter:blur(6px);color:var(--cream); padding:5px 11px;border-radius:var(--r-pill); } .ccard .body{padding:24px;display:flex;flex-direction:column;gap:9px;flex:1} .ccard .chef{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)} .ccard h3{font-family:var(--serif);font-weight:470;font-size:21px;line-height:1.25} .ccard .meta{font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums} .ccard .foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .ccard .price{font-family:var(--serif);font-size:20px;font-variant-numeric:tabular-nums} .ccard .price small{font-family:var(--sans);font-size:12px;color:var(--ink3);display:block} /* ---------- detail page ---------- */ .detail-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;color:var(--cream);background-size:cover;background-position:center;overflow:hidden} .detail-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,5,.35),rgba(15,10,5,.88))} .detail-hero .container{position:relative;z-index:2;padding-block:60px;width:100%} .keyfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden} .keyfacts div{background:var(--paper3);padding:24px 26px} .keyfacts span{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:6px} .keyfacts b{font-family:var(--serif);font-weight:480;font-size:19px;font-variant-numeric:tabular-nums} .detail-cols{display:grid;grid-template-columns:1fr 400px;gap:clamp(36px,5vw,80px);align-items:start} .buy-panel{ position:sticky;top:110px;background:var(--paper3);border:1px solid var(--line);border-radius:var(--r-m); padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--sh-card); } .buy-panel .amt{font-family:var(--serif);font-size:38px;font-variant-numeric:tabular-nums;line-height:1} .buy-panel .amt small{font-family:var(--sans);font-size:13px;color:var(--ink2);display:block;margin-top:8px} .buy-panel ul{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink2)} .buy-panel li{padding-left:22px;position:relative} .buy-panel li::before{content:"—";position:absolute;left:0;color:var(--brass)} .buy-panel .note{font-size:12.5px;color:var(--ink3);text-align:center} /* accordion */ .acc{border-top:1px solid var(--line)} .acc-item{border-bottom:1px solid var(--line)} .acc-head{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:22px 4px;text-align:left;font-family:var(--serif);font-weight:470;font-size:19px; } .acc-head .meta{font-family:var(--sans);font-size:13px;color:var(--ink3);font-weight:500;margin-left:auto;font-variant-numeric:tabular-nums} .acc-head .ic{ flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;position:relative; transition:transform .35s var(--ease),background .25s; } .acc-head .ic::before,.acc-head .ic::after{ content:"";position:absolute;inset:0;margin:auto;background:currentColor; } .acc-head .ic::before{width:12px;height:1.5px} .acc-head .ic::after{width:1.5px;height:12px;transition:transform .3s var(--ease)} .acc-item.open .acc-head .ic{transform:rotate(180deg);background:var(--ink);color:var(--paper3);border-color:var(--ink)} .acc-item.open .acc-head .ic::after{transform:scaleY(0)} .acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)} .acc-item.open .acc-body{grid-template-rows:1fr} .acc-body>div{overflow:hidden} .acc-body ul{padding:0 4px 24px;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink2)} .acc-body li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px dashed var(--line)} .acc-body li:last-child{border-bottom:none} .acc-body li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink3);font-size:13px;flex:none} .acc-body p{padding:0 4px 24px;color:var(--ink2);max-width:66ch} /* ---------- forms ---------- */ .field{display:flex;flex-direction:column;gap:8px} .field label{font-size:13px;font-weight:650;letter-spacing:.04em} .field input,.field select,.field textarea{ font:inherit;font-size:15.5px;color:var(--ink);background:var(--paper3); border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;width:100%; transition:border-color .2s,box-shadow .2s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(160,118,47,.15); } .field .hint{font-size:12.5px;color:var(--ink3)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .form-grid .full{grid-column:1/-1} /* tabs */ .tabs{display:flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px;gap:5px;width:fit-content} .tab{font-size:14.5px;font-weight:600;padding:10px 26px;border-radius:var(--r-pill);color:var(--ink2);transition:all .25s var(--ease)} .tab.on{background:var(--ink);color:var(--paper3)} .tabpane{display:none} .tabpane.on{display:block;animation:fadeUp .5s var(--ease-in)} /* ---------- stats ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)} .stat{background:var(--paper);padding:clamp(28px,3.4vw,48px) clamp(20px,2.4vw,40px)} .stat b{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5vw,72px);line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px} .stat b i{font-style:italic;color:var(--brass);font-size:.6em} .stat span{font-size:14px;color:var(--ink2);display:block;margin-top:10px} /* ---------- split editorial ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,100px);align-items:center} .split .media{border-radius:var(--r-m);overflow:hidden;aspect-ratio:4/5;position:relative;box-shadow:var(--sh-card)} .split .media .plx{position:absolute;inset:-12% 0;background-size:cover;background-position:center} .split .media.wide{aspect-ratio:3/2} .split .stack{display:flex;flex-direction:column;gap:22px;align-items:flex-start} /* ---------- reveal helpers ---------- */ .rv{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-in),transform .8s var(--ease-in);transition-delay:var(--d,0s)} .rv-l{opacity:0;transform:translateX(-40px);transition:opacity .8s var(--ease-in),transform .8s var(--ease-in);transition-delay:var(--d,0s)} .rv-r{opacity:0;transform:translateX(40px);transition:opacity .8s var(--ease-in),transform .8s var(--ease-in);transition-delay:var(--d,0s)} .rv-mask{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease-in);transition-delay:var(--d,0s)} .seen .rv,.seen.rv{opacity:1;transform:none} .seen .rv-l,.seen.rv-l,.seen .rv-r,.seen.rv-r{opacity:1;transform:none} .seen .rv-mask,.seen.rv-mask{clip-path:inset(0 0 0 0)} /* ---------- cursor label ---------- */ .cursor-dot{ position:fixed;z-index:150;top:0;left:0;pointer-events:none; width:82px;height:82px;border-radius:50%;background:var(--cream);color:var(--esp); display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700; letter-spacing:.06em;transform:translate(-50%,-50%) scale(0);transition:transform .3s var(--ease); mix-blend-mode:normal;box-shadow:var(--sh-float); } .cursor-dot.on{transform:translate(-50%,-50%) scale(1)} /* ---------- to-top / progress ---------- */ .fab{ position:fixed;right:26px;bottom:26px;z-index:90;width:54px;height:54px;border-radius:50%; background:var(--ink);color:var(--paper3);display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transform:translateY(14px);transition:all .35s var(--ease); } .fab.on{opacity:1;visibility:visible;transform:none} .fab svg.ring{position:absolute;inset:0;transform:rotate(-90deg)} .fab svg.ring circle{fill:none;stroke:var(--brass2);stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1180px){ .chef-peek{display:none} .chef-thumb{display:block} .chef-row{grid-template-columns:58px 64px 1fr auto} .chef-row .sp{display:none} } @media (max-width:1020px){ .feature-grid{grid-template-columns:1fr 1fr} .fcard.tall{grid-row:auto;min-height:380px} .story{grid-template-columns:1fr} .story-media{position:relative;top:0;height:52vh} .story-step{min-height:0;padding-block:34px} .detail-cols{grid-template-columns:1fr} .buy-panel{position:relative;top:0} .quotes{grid-template-columns:1fr} .quote.offset{margin-top:0} .course-grid{grid-template-columns:1fr 1fr} .keyfacts{grid-template-columns:1fr 1fr} .split{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .trust{grid-template-columns:1fr 1fr} .trust div:nth-child(2){border-right:none} } @media (max-width:760px){ body{font-size:16px} .nav{height:72px} .nav-links,.nav-actions .ghost,.nav-actions .btn{display:none} .menu-btn{display:flex} .hero-meta{gap:18px} .course-grid{grid-template-columns:1fr} .feature-grid{grid-template-columns:1fr} .event{grid-template-columns:78px 1fr;grid-template-areas:"d i" "d c";row-gap:12px} .event .date{grid-area:d} .event .when{display:none} .event .cta{grid-area:c;text-align:left;min-width:0} .stats{grid-template-columns:1fr} .keyfacts{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .trust{grid-template-columns:1fr} .trust div{border-right:none;margin-right:0;border-bottom:1px solid var(--line);padding:18px 0} .trust div:last-child{border-bottom:none} .foot-grid{grid-template-columns:1fr} .final{background-attachment:scroll} .fab{right:16px;bottom:16px} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .marquee-track{animation:none;transform:none} .rv,.rv-l,.rv-r,.rv-mask{opacity:1;transform:none;clip-path:none} .final{background-attachment:scroll} .k-line{color:var(--ink);background:none;-webkit-background-clip:border-box} .on-dark .k-line{color:var(--cream)} } /* ========================================================================== V3 LAYER — real layout discipline + living backgrounds + theme-grade motion (appended layer: later rules override the base above) ========================================================================== */ /* house easing kit (from top Shopify theme demos) */ :root{ --eo-quart:cubic-bezier(.165,.84,.44,1); --e-text:cubic-bezier(.22,1,.36,1); --e-lux:cubic-bezier(.25,.46,.45,.94); --e-settle:cubic-bezier(.26,.54,.32,1); } /* ---------- announcement bar: its own framed band ---------- */ .announce{ position:relative;z-index:95;background:var(--esp);color:var(--cream2); font-size:13px;border-bottom:1px solid rgba(216,172,92,.28); } .announce .row{ max-width:var(--max);margin-inline:auto;padding-inline:var(--gut); height:42px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; } .announce .msg{ position:absolute;display:flex;gap:8px;align-items:center;letter-spacing:.03em;white-space:nowrap; opacity:0;transform:translateY(10px);transition:opacity .5s var(--eo-quart),transform .5s var(--eo-quart); } .announce .msg.on{opacity:1;transform:none} .announce .msg b{color:var(--brass2);font-weight:600} .announce .dots{position:absolute;right:var(--gut);display:flex;gap:6px} .announce .dots i{width:5px;height:5px;border-radius:50%;background:var(--cream3);transition:background .3s,transform .3s} .announce .dots i.on{background:var(--brass2);transform:scale(1.3)} /* ---------- header: sticky, own frame at top, glass capsule on scroll ---------- */ .site-head{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line); transition:transform .42s var(--ease),background .35s,border-color .35s} .site-head.solid{background:transparent;border-bottom-color:transparent} .site-head.on-hero{color:var(--ink)} .site-head.on-hero .brand .word i{color:var(--brass)} .site-head .nav{height:76px} /* masked nav label swap (hover: label rolls up, italic twin rolls in) */ .nav-links a{overflow:hidden;padding-block:10px} .nav-links .sw{display:block;position:relative;height:1.45em;overflow:hidden} .nav-links .sw span{display:block;height:1.45em;line-height:1.45em;transition:transform .38s var(--e-text)} .nav-links .sw span:last-child{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:1.02em} .nav-links a:hover .sw span{transform:translateY(-1.45em)} /* ---------- hero v3: video + sticky deck overlap ---------- */ .hero{position:sticky;top:0;z-index:1} .hero .bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .deck{ position:relative;z-index:5;background:var(--deck-bg,var(--paper)); border-radius:clamp(20px,3vw,34px) clamp(20px,3vw,34px) 0 0; margin-top:-5vh;box-shadow:0 -28px 70px rgba(15,10,5,.4); transition:background-color .9s var(--ease);overflow:clip; } /* line reveal headings */ .lr-l{display:block;overflow:hidden} .lr-l>span{display:block;transform:translateY(112%);transition:transform .75s var(--e-text) calc(var(--l,0)*.14s)} .seen .lr-l>span{transform:none} .hero .lr-l>span{animation:lineUp .95s var(--e-text) calc(var(--l,0)*.14s) forwards;transform:translateY(112%)} /* ---------- living background layer (radial glows, no blur filters) ---------- */ .living{position:relative;overflow:clip} .living::before,.living::after{ content:"";position:absolute;pointer-events:none;z-index:0;border-radius:50%; } .living::before{ width:52vw;height:52vw;top:-14%;left:-14%; background:radial-gradient(closest-side,rgba(160,118,47,.13),transparent 72%); animation:drift1 28s ease-in-out infinite alternate; } .living::after{ width:44vw;height:44vw;bottom:-16%;right:-12%; background:radial-gradient(closest-side,rgba(172,66,36,.09),transparent 72%); animation:drift2 34s ease-in-out infinite alternate; } .band-dark.living::before{background:radial-gradient(closest-side,rgba(216,172,92,.1),transparent 72%)} .band-dark.living::after{background:radial-gradient(closest-side,rgba(172,66,36,.12),transparent 72%)} .living>.container{position:relative;z-index:2} @keyframes drift1{to{transform:translate(9vw,7vh) scale(1.18)}} @keyframes drift2{to{transform:translate(-7vw,-9vh) scale(1.12)}} /* ---------- journey line (scroll-drawn spine + milestone dots) ---------- */ .story-steps{position:relative;padding-left:38px} .story-steps::before{content:"";position:absolute;left:9px;top:24px;bottom:24px;width:2px;background:var(--line)} .story-steps .jline{ position:absolute;left:9px;top:24px;bottom:24px;width:2px; background:linear-gradient(var(--brass),var(--brass2)); transform:scaleY(var(--jp,0));transform-origin:top; } .story-step{position:relative} .story-step::after{ content:"";position:absolute;left:-36px;top:56px;width:14px;height:14px;border-radius:50%; border:2px solid var(--line);background:var(--paper);transition:.35s var(--eo-quart); } .story-step.on::after{border-color:var(--brass);background:var(--brass);box-shadow:0 0 0 6px rgba(160,118,47,.16)} /* ---------- card upgrades: image swap + quick-enroll + slow simmer ---------- */ .fcard .img-b,.ccard .ph .img-b{ position:absolute;inset:0;background-size:cover;background-position:center; opacity:0;transition:opacity .35s var(--eo-quart); } .fcard .img-b{z-index:-2} .fcard:hover .img-b,.ccard:hover .img-b{opacity:1} .fcard .qe{ align-self:flex-start;margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.04em; color:var(--esp);background:var(--brass2);padding:9px 18px;border-radius:var(--r-pill); opacity:0;transform:translateY(10px);transition:.28s var(--eo-quart); } .fcard:hover .qe{opacity:1;transform:none} .simmer .zoom,.simmer img{transition:transform .45s var(--eo-quart)} .simmer:hover .zoom,.simmer:hover img{transform:scale(1.16);transition:transform 8s var(--e-lux)} /* zoom-settle for detail heroes */ .zoomset{animation:zoomset 2.2s var(--e-settle) both} @keyframes zoomset{from{transform:scale(1.12)}to{transform:scale(1)}} /* ---------- spotlight surface (cursor-tracked warm light) ---------- */ .spot{position:relative} .spot::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1; background:radial-gradient(260px at var(--mx,50%) var(--my,50%),rgba(216,172,92,.18),transparent 72%); opacity:0;transition:opacity .35s; } .spot:hover::before{opacity:1} /* ---------- workshop soon state (honest, no fake dates) ---------- */ .badge-soon{ display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--brass);border:1px solid var(--brass);padding:4px 11px;border-radius:var(--r-pill);background:rgba(160,118,47,.07); } /* logo image handling (dark logo becomes white on dark surfaces) */ .brand img{height:44px;width:auto;display:block} .on-dark .brand img,.menu-layer .brand img,.site-foot .brand img{filter:brightness(0) invert(1)} /* service cards (about page) */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .svc{ background:var(--paper3);border:1px solid var(--line);border-radius:var(--r-m);padding:28px; display:flex;flex-direction:column;gap:8px;transition:transform .3s var(--eo-quart),box-shadow .3s; } .svc:hover{transform:translateY(-5px);box-shadow:var(--sh-card)} .svc b{font-family:var(--serif);font-weight:480;font-size:19px} .svc p{font-size:14px;color:var(--ink2)} .svc .no{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:26px} /* page hero paddings for sticky header layout */ .page-hero{padding-top:clamp(56px,8vw,110px)} /* section rhythm: denser, seams connected */ .section{padding-block:clamp(64px,7.6vw,124px)} @media (max-width:1020px){ .svc-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .announce .dots{display:none} .announce .msg{font-size:12px} .svc-grid{grid-template-columns:1fr} .site-head .nav{height:66px} .brand img{height:36px} .living::before,.living::after{width:90vw;height:90vw} } @media (prefers-reduced-motion:reduce){ .living::before,.living::after{animation:none} .zoomset{animation:none} .hero .lr-l>span{animation:none;transform:none} .lr-l>span{transform:none} .fcard .qe{opacity:1;transform:none} } /* ========================================================================== V4 LAYER — competitor type stack + food color psychology Type: Rokkitt (Eataly headings) + Plus Jakarta Sans (USLA body) Color psychology (gıda): paprika kırmızı-turuncu = iştah + aksiyon (CTA), altın = premium/güven (etiketler), espresso = sıcaklık/zanaat (koyu bantlar), yaprak yeşili = tazelik/onay. Mavi-mor yok: iştah kapatıcıdır. ========================================================================== */ :root{ --appetite:#A0762F; /* altın sarısı — aksiyon rengi (eski paprika turuncusu yerine) */ --appetite-2:#D8AC5C; /* koyu zeminde parlak altın */ } /* Rokkitt slab: biraz daha dolgun ağırlıklarla oturur */ .display{font-weight:480;letter-spacing:-.01em} .h1{font-weight:500} .h2{font-weight:520} .h3,.diploma h3{font-weight:560} .fcard .name,.ccard h3,.mcard h3,.event h3{font-weight:560} .chef-row .nm{font-weight:460} /* primary CTA = appetite red-orange; gold stays as the premium label color */ .btn-brass{background:var(--appetite);color:#FFF6EE} .btn-brass .fill{background:var(--ink)} .on-dark .btn-solid{background:var(--appetite-2);color:#221008} .on-dark .btn-solid .fill{background:var(--cream)} .fcard .qe{background:var(--appetite-2);color:#221008} .announce{border-bottom-color:rgba(216,172,92,.3)} .plan.hot::before{background:var(--appetite)} /* price = appetite tone (fiyat gözü sıcak renkte daha hızlı yakalar) */ .ccard .price,.event .amt,.buy-panel .amt{color:var(--appetite)} .buy-panel .amt small{color:var(--ink2)} /* selection + focus follow the appetite accent */ ::selection{background:var(--appetite);color:#FFF6EE} .btn:focus-visible{outline-color:var(--appetite)} /* menu overlay: dark logo must invert to stay visible */ body.menu-open .site-head .brand img{filter:brightness(0) invert(1)} /* ========================================================================== V5 LAYER — DEDICATED MOBILE DESIGN (app logic, not shrunk desktop) Bottom tab bar · framed card sections · snap carousels · tap states ========================================================================== */ /* ---------- app tab bar (mobile only) ---------- */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:110;display:none; background:rgba(251,247,238,.92);backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); } .tabbar .ti{ flex:1;display:flex;flex-direction:column;align-items:center;gap:4px; font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--ink3); padding:4px 2px;border-radius:12px;transition:color .2s;position:relative; } .tabbar .ti svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .tabbar .ti.on{color:var(--appetite)} .tabbar .ti.on::after{content:"";position:absolute;top:-9px;width:18px;height:3px;border-radius:3px;background:var(--appetite)} .tabbar .ti:active{transform:scale(.94)} /* ---------- sticky product CTA (mobile, above tab bar) ---------- */ .m-cta{ position:fixed;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:105;display:none; align-items:center;justify-content:space-between;gap:14px; background:rgba(15,10,5,.92);backdrop-filter:blur(14px);color:var(--cream); border:1px solid rgba(216,172,92,.3);border-radius:18px;padding:12px 12px 12px 18px; box-shadow:0 18px 44px rgba(15,10,5,.45); } .m-cta b{font-family:var(--serif);font-size:20px;color:var(--appetite-2);display:block;line-height:1.1} .m-cta span{font-size:11px;color:var(--cream3)} .m-cta .btn{min-height:46px;padding:10px 20px;font-size:14px} /* ========================================================================== MOBILE ≤760px — the separate design ========================================================================== */ @media (max-width:760px){ /* app chrome */ .tabbar{display:flex} .m-cta{display:flex} body{padding-bottom:calc(78px + env(safe-area-inset-bottom))} .fab{display:none} /* tab bar replaces it; less chrome */ .announce .row{height:36px} .announce .msg{font-size:11.5px} /* type scale: tighter, app-like */ body{font-size:15.5px;line-height:1.6} .display{font-size:clamp(36px,10.5vw,46px);line-height:1.04} .h1{font-size:clamp(30px,8.6vw,40px)} .h2{font-size:clamp(25px,7vw,30px)} .h3{font-size:18.5px} .lead{font-size:15.5px} .eyebrow{font-size:11px;letter-spacing:.18em} .k-line{font-size:clamp(22px,6.6vw,27px)} .section{padding-block:48px} .section-tight{padding-block:36px} .page-hero{padding-top:36px;padding-bottom:28px} .page-hero .crumb{margin-bottom:14px} /* entrances: mobile uses soft rise+settle, shorter travel, faster */ .rv,.rv-l,.rv-r{transform:translateY(14px) scale(.992);transition-duration:.5s} .lr-l>span{transition-duration:.55s} /* tap states replace hover everywhere */ .ccard:active,.mcard:active,.fcard:active,.chef-row:active,.event:active,.svc:active{transform:scale(.977);transition:transform .12s var(--ease)} .btn:active{transform:scale(.96)} .fcard .qe{opacity:1;transform:none} /* quick action always visible on touch */ .simmer:hover .zoom,.simmer:hover img{transform:none;transition:none} /* HERO: shorter, poster-first, stacked full-width CTAs, framed meta chips */ .hero{min-height:86svh} .hero .container{padding-bottom:34px} .hero-ctas{margin-top:26px;gap:10px} .hero-ctas .btn{flex:1 1 100%;justify-content:center} .hero-meta{ display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:none; padding:0 var(--gut) 22px; } .hero-meta div{ border:1px solid rgba(241,233,215,.2);border-radius:14px;padding:10px 12px; background:rgba(15,10,5,.35);backdrop-filter:blur(6px);font-size:11px; } .hero-meta b{font-size:16px} /* deck overlap: tighter radius, closer */ .deck{border-radius:22px 22px 0 0;margin-top:-3.5vh} /* dark bands & final become framed app cards */ .band-dark,.final{margin-inline:10px;border-radius:24px} .final{min-height:0;padding-block:56px;background-attachment:scroll} /* trust: 2x2 framed chips */ .trust{grid-template-columns:1fr 1fr;gap:8px;border:none} .trust div{ border:1px solid var(--line);border-radius:14px;background:var(--paper3); padding:14px;margin:0;font-size:12px; } .trust b{font-size:14px} .trust div:nth-child(2){border-right:1px solid var(--line)} .trust div:last-child{border-bottom:1px solid var(--line)} /* journey: steps become numbered framed cards; spine hidden */ .story-media{height:38svh;position:relative;top:0;border-radius:18px} .story-steps{padding-left:0;gap:12px;display:flex;flex-direction:column;margin-top:14px} .story-steps::before,.story-steps .jline{display:none} .story-step{ min-height:0;padding:20px;border:1px solid var(--line);border-radius:18px; background:var(--paper3);border-top:1px solid var(--line);gap:8px; } .story-step::after{display:none} .story-step .no{font-size:30px} .story-step.on{border-color:var(--brass);box-shadow:0 8px 26px rgba(160,118,47,.12)} /* feature grid → swipe deck with peek */ .feature-grid{ display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:12px; overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px; scrollbar-width:none; } .feature-grid::-webkit-scrollbar{display:none} .feature-grid>*{scroll-snap-align:center} .fcard,.fcard.tall{grid-row:auto;min-height:330px} .fcard .name{font-size:21px} .fcard .meta{font-size:12px} /* rails: bigger peek, hidden scrollbar */ .rail{grid-auto-columns:78%;gap:12px;scrollbar-width:none;padding-bottom:14px} .rail::-webkit-scrollbar{display:none} /* catalog cards → app list rows (image left) */ .course-grid{grid-template-columns:1fr;gap:12px} .course-grid .ccard{display:grid;grid-template-columns:116px 1fr;align-items:stretch} .course-grid .ccard .ph{aspect-ratio:auto;height:100%;min-height:128px} .course-grid .ccard .ph .tags{top:8px;left:8px} .course-grid .ccard .ph .tag{font-size:9px;padding:3px 7px} .course-grid .ccard .ph .tag:nth-child(2){display:none} .course-grid .ccard .body{padding:13px 14px;gap:5px} .course-grid .ccard h3{font-size:16px;line-height:1.25} .course-grid .ccard .chef{font-size:10px} .course-grid .ccard .meta{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .course-grid .ccard .foot{padding-top:8px} .course-grid .ccard .price{font-size:16px} .course-grid .ccard .price small{font-size:10px} .course-grid .ccard .foot .lnk{display:none} /* blog/takvim mcards inside course-grid stay stacked cards */ .course-grid .mcard .ph{aspect-ratio:16/9} .course-grid .mcard h3{font-size:17.5px} /* chef index → compact tappable rows */ .chef-row{grid-template-columns:52px 1fr auto;gap:12px;padding:14px 4px} .chef-row .idx{display:none} .chef-thumb{width:52px;height:64px;border-radius:10px} .chef-row .nm{font-size:20px} .chef-row .arr{width:38px;height:38px;flex:none} .chef-index:hover .chef-row{opacity:1} .chef-index .chef-row:hover{padding-left:4px} /* events */ .event{padding:18px 4px} .event .date b{font-size:26px} .event h3{font-size:16.5px} /* quotes → swipe carousel */ .quotes{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:12px} .quotes::-webkit-scrollbar{display:none} .quotes>*{scroll-snap-align:center} .quote{padding:22px} .quote.offset{margin-top:0} .quote p{font-size:15.5px} /* detail pages */ .detail-hero{min-height:64svh} .keyfacts{grid-template-columns:1fr 1fr;gap:8px;background:transparent;border:none;border-radius:0} .keyfacts div{border:1px solid var(--line);border-radius:14px;padding:13px 14px} .keyfacts b{font-size:14px} .keyfacts span{font-size:10px;margin-bottom:3px} .buy-panel{padding:22px;gap:14px} .acc-head{font-size:16px;padding:16px 2px;gap:10px} .acc-head .meta{font-size:11px} .acc-head .ic{width:28px;height:28px} /* forms & misc */ .diploma{padding:24px 20px} .svc{padding:18px} .stats{grid-template-columns:1fr;gap:0} .stat{padding:20px 4px;display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line)} .stat b{font-size:34px} .stat span{margin-top:0;font-size:12.5px} .marquee .item{font-size:20px;padding-inline:14px} .marquee-band{padding-block:14px} .karaoke{gap:.3em} /* footer: compact statement, stacked columns, roomy tap targets */ .foot-statement{font-size:clamp(52px,17vw,84px);padding-top:36px} .foot-grid{padding-block:34px;gap:24px} .foot-grid ul{gap:4px} .foot-grid a{display:block;padding:7px 0} .foot-bottom{padding-block:18px;font-size:11.5px;padding-bottom:calc(18px + env(safe-area-inset-bottom))} /* menu overlay leaves room for tab bar */ .menu-layer{padding-bottom:calc(96px + env(safe-area-inset-bottom))} .menu-layer a.big{font-size:clamp(28px,7.6vw,38px);line-height:1.5} } /* tablet: keep desktop logic but relax densities */ @media (min-width:761px) and (max-width:1020px){ .feature-grid{grid-template-columns:1fr 1fr} .fcard.tall{grid-row:auto;min-height:360px} } @media (prefers-reduced-motion:reduce){ .tabbar .ti:active,.ccard:active,.mcard:active,.fcard:active{transform:none} } /* ========================================================================== V6 LAYER — Penta esprileri, gastronomiye uyarlandı 1) Pulsing brand cloud behind centered statement 2) Side "wings" entering with perspective from left/right 3) Book-spread panels sliding open on scroll ========================================================================== */ /* ---------- 1. brand cloud (arka planda nefes alan logolar) ---------- */ .cloud{text-align:center} .cloud .cc{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px} .cloud-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .cloud-bg span{ position:absolute;font-family:var(--serif);font-weight:500;letter-spacing:.02em; font-size:clamp(15px,1.9vw,27px);color:var(--cream);opacity:.06;white-space:nowrap; animation:cloudPulse var(--cd,7s) ease-in-out var(--cdel,0s) infinite; } .cloud-bg span:nth-child(even){font-style:italic;color:var(--brass2)} @keyframes cloudPulse{0%,100%{opacity:.05}50%{opacity:.32}} /* ---------- 2. wings (sağlı sollu perspektifli giriş + süzülme) ---------- */ .wings-grid{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.7fr) minmax(0,.85fr); gap:clamp(20px,3.4vw,56px);align-items:center; } .wcenter{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px} .wcenter .lead{text-align:center;margin-inline:auto} .wcenter blockquote{ font-family:var(--serif);font-style:italic;font-weight:460;font-size:clamp(17px,1.6vw,21px); line-height:1.6;color:var(--ink2);max-width:46ch;margin-top:8px;position:relative;padding-inline:26px; } .wcenter blockquote::before,.wcenter blockquote::after{ font-size:34px;color:var(--brass);position:absolute;line-height:1; } .wcenter blockquote::before{content:"\201C";left:0;top:-4px} .wcenter blockquote::after{content:"\201D";right:0;bottom:-14px} .wcenter cite{font-style:normal;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)} .wing{ aspect-ratio:3/4;border-radius:18px;position:relative; opacity:0;transition:transform 1.1s var(--e-text),opacity .9s var(--eo-quart); will-change:transform; } .wing-l{transform:perspective(1100px) rotateY(32deg) translateX(-90px) scale(.94)} .wing-r{transform:perspective(1100px) rotateY(-32deg) translateX(90px) scale(.94);transition-delay:.12s} .seen .wing-l{opacity:1;transform:perspective(1100px) rotateY(16deg) translateX(0) scale(1)} .seen .wing-r{opacity:1;transform:perspective(1100px) rotateY(-16deg) translateX(0) scale(1)} .wing .wfloat{ position:absolute;inset:0;border-radius:inherit;overflow:hidden; background-size:cover;background-position:center; border:1px solid var(--line);box-shadow:var(--sh-float); animation:wingFloat 7s ease-in-out infinite alternate; } .wing-r .wfloat{animation-duration:8.5s;animation-delay:1s} @keyframes wingFloat{to{transform:translateY(-14px)}} /* ---------- 3. book spread (scroll ile açılan çift panel) ---------- */ .book{ display:grid;grid-template-columns:1fr 1fr;gap:12px; padding:0 12px;overflow:clip; } .book .pg{ height:clamp(280px,54vh,520px);border-radius:22px; background-size:cover;background-position:center;display:block;position:relative;overflow:hidden; will-change:transform; } .book .pg::after{ content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,10,5,.45)); opacity:0;transition:opacity .3s; } .book .pg:hover::after{opacity:1} .book .pg .cap{ position:absolute;left:20px;bottom:16px;z-index:2;color:var(--cream); font-family:var(--serif);font-size:19px;opacity:0;transform:translateY(10px);transition:.3s var(--eo-quart); } .book .pg:hover .cap{opacity:1;transform:none} .book .pg-l{transform:translateX(calc(var(--bp,0)*14%))} .book .pg-r{transform:translateX(calc(var(--bp,0)*-14%))} /* responsive: wings & cloud & book on mobile */ @media (max-width:1020px){ .wings-grid{grid-template-columns:1fr 1fr} .wcenter{grid-column:1/-1;order:-1;margin-bottom:10px} .wing{max-width:300px;margin-inline:auto;width:100%} } @media (max-width:760px){ .cloud-bg span{font-size:13px} .cloud-bg span:nth-child(n+7){display:none} .wing-l{transform:perspective(900px) rotateY(20deg) translateX(-40px) scale(.96)} .wing-r{transform:perspective(900px) rotateY(-20deg) translateX(40px) scale(.96)} .seen .wing-l{transform:perspective(900px) rotateY(10deg) translateX(0)} .seen .wing-r{transform:perspective(900px) rotateY(-10deg) translateX(0)} .book{gap:8px;padding:0 8px} .book .pg{height:220px;border-radius:16px} .book .pg .cap{opacity:1;transform:none;font-size:15px} .book .pg::after{opacity:1} } @media (prefers-reduced-motion:reduce){ .cloud-bg span{animation:none;opacity:.14} .wing,.seen .wing-l,.seen .wing-r{opacity:1;transform:none;transition:none} .wing .wfloat{animation:none} .book .pg-l,.book .pg-r{transform:none} } /* ========================================================================== V7 LAYER — showcase menu, signature nuances, category nav, coherence fixes Kural: sürekli animasyonlar fısıltı (göz yormaz), scroll animasyonları gösterişli ========================================================================== */ /* ---------- fantastic fullscreen menu (artık masaüstünde de) ---------- */ .menu-btn{display:flex;margin-left:0} @media (min-width:761px){.menu-btn{margin-left:6px}} /* two-stage curtain: paprika sweep leads, espresso settles */ .menu-layer::before{ content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--appetite),#7A2E17); clip-path:inset(0 0 100% 0);pointer-events:none; } .menu-layer.open::before{animation:menuSweep .95s var(--e-text) forwards} @keyframes menuSweep{ 0%{clip-path:inset(0 0 100% 0)} 45%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(100% 0 0 0)} } .menu-layer a.big{position:relative;z-index:2;display:flex;align-items:baseline;gap:0;width:fit-content; transition:opacity .4s var(--ease),transform .4s var(--ease),padding-left .35s var(--e-text)} .menu-layer a.big .no{ font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em; color:var(--brass2);opacity:.65;margin-right:16px;transform:translateY(-1em);display:none; } .menu-layer a.big:hover{padding-left:14px} .menu-layer a.big::after{ content:"→";font-size:.5em;color:var(--appetite-2);opacity:0;margin-left:18px; transform:translateX(-12px);transition:.3s var(--e-text); } .menu-layer a.big:hover::after{opacity:1;transform:none} .menu-visual{ position:absolute;right:6vw;top:50%;z-index:1;width:min(28vw,340px);aspect-ratio:3/4; border-radius:20px;background-size:cover;background-position:center;pointer-events:none; opacity:0;transform:translateY(-50%) scale(.92) rotate(2.5deg); transition:opacity .35s var(--ease),transform .5s var(--e-text),background-image .1s; box-shadow:var(--sh-float);border:1px solid var(--lined); } .menu-visual.on{opacity:.9;transform:translateY(-50%) scale(1) rotate(0)} @media (max-width:1020px){.menu-visual{display:none}} /* ---------- hero: rising steam (sürekli ama fısıltı) + scroll exit scrub ---------- */ .steam{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .steam i{ position:absolute;bottom:-12%;width:240px;height:240px;border-radius:50%; background:radial-gradient(closest-side,rgba(241,233,215,.13),transparent 70%); animation:steamUp var(--sd,16s) linear var(--sdel,0s) infinite;opacity:0; } @keyframes steamUp{ 0%{transform:translateY(0) translateX(0) scale(.7);opacity:0} 14%{opacity:.55} 60%{opacity:.3} 100%{transform:translateY(-115vh) translateX(6vw) scale(1.6);opacity:0} } /* ---------- eyebrow line draws when revealed (scroll = gösterişli) ---------- */ .eyebrow.rv::before{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-text) .15s} .eyebrow.rv.seen::before{transform:scaleX(1)} /* ---------- trust icons: drawn strokes, asla çıplak ikon ---------- */ .trust .tico{ width:34px;height:34px;flex:none;margin-bottom:8px; } .trust .tico svg{width:100%;height:100%;fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .trust .tico path,.trust .tico rect,.trust .tico circle{ stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.2s var(--e-text) .25s; } .trust.seen .tico path,.trust.seen .tico rect,.trust.seen .tico circle{stroke-dashoffset:0} /* ---------- diploma seal: slow rotating dashed halo (sürekli, fısıltı) ---------- */ .diploma .seal::after{ content:"";position:absolute;inset:-7px;border:1px dashed var(--brass);border-radius:50%; opacity:.45;animation:sealSpin 42s linear infinite; } @keyframes sealSpin{to{transform:rotate(360deg)}} /* ---------- category visual nav (kategori bannerı: ikon değil görsel) ---------- */ .catnav{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:12px; overflow-x:auto;scrollbar-width:none;padding-bottom:6px; } .catnav::-webkit-scrollbar{display:none} .catnav button{ position:relative;height:96px;border-radius:16px;overflow:hidden;isolation:isolate; color:var(--cream);font-weight:700;font-size:14px;letter-spacing:.03em;text-align:left; display:flex;align-items:flex-end;padding:14px 16px; transition:transform .25s var(--eo-quart); } .catnav button:hover{transform:translateY(-4px)} .catnav button:active{transform:scale(.97)} .catnav .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .7s var(--eo-quart)} .catnav button:hover .bg{transform:scale(1.07)} .catnav button::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(185deg,rgba(15,10,5,.05) 30%,rgba(15,10,5,.72)); transition:background .3s; } .catnav button.on{outline:2px solid var(--appetite);outline-offset:2px} .catnav button .cnt{display:block;font-weight:500;font-size:11px;color:var(--cream3);letter-spacing:.06em} /* ---------- coherence fixes ---------- */ .announce .msg{max-width:calc(100% - 90px);overflow:hidden;text-overflow:ellipsis} @media (max-width:760px){.announce .msg{max-width:calc(100% - 24px)}} .wcenter cite{margin-top:6px} .book{margin-block:8px} @media (max-width:760px){ .steam{display:none} .menu-layer a.big .no{margin-right:10px} } @media (prefers-reduced-motion:reduce){ .steam i{animation:none;opacity:0} .diploma .seal::after{animation:none} .menu-layer.open::before{animation:none;clip-path:inset(0 0 100% 0)} .eyebrow.rv::before,.eyebrow.rv.seen::before{transform:scaleX(1);transition:none} .trust .tico path,.trust .tico rect,.trust .tico circle{stroke-dashoffset:0;transition:none} } /* ========================================================================== V7B — okunabilirlik ve üst üste binme düzeltmeleri Kaide: görseli karartma; yazıyı arkası blur'lu cam çerçeveye al ========================================================================== */ /* glass plaque: image üstünde okunur metin çerçevesi */ .glass{ background:rgba(15,10,5,.4); backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25); border:1px solid rgba(241,233,215,.16); border-radius:24px; padding:clamp(22px,3vw,42px); max-width:860px; box-shadow:0 28px 70px -28px rgba(15,10,5,.6); } .final .glass{margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;max-width:760px} @media (max-width:760px){.glass{padding:20px 18px;border-radius:18px}} /* veils lightened: image artık görünüyor, okunurluk glass'ta */ .hero .veil{background:linear-gradient(180deg,rgba(15,10,5,.3) 0%,rgba(15,10,5,.1) 42%,rgba(15,10,5,.55) 100%)} .detail-hero .veil{background:linear-gradient(180deg,rgba(15,10,5,.22),rgba(15,10,5,.5))} .final .veil{background:linear-gradient(180deg,rgba(15,10,5,.34),rgba(15,10,5,.3))} .auth-visual .veil{background:linear-gradient(200deg,rgba(15,10,5,.16),rgba(15,10,5,.6))} /* hero meta band: kendi cam şeridi */ .hero-meta{ background:rgba(15,10,5,.34);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(241,233,215,.13);border-radius:18px; margin:0 var(--gut) 18px;max-width:calc(var(--max) - 2*var(--gut)); padding:18px clamp(18px,2.4vw,30px) 22px; } @media (min-width:1441px){.hero-meta{margin-inline:auto}} @media (max-width:760px){ .hero-meta{background:transparent;border:none;backdrop-filter:none;padding:0 var(--gut) 20px;margin:0} } /* diploma: mühür için alan rezervi — yazılar asla altına girmez */ .diploma .row{flex-wrap:wrap;row-gap:4px;padding-right:84px} .diploma .seal{width:60px;height:60px;right:22px;bottom:22px} .diploma h3{padding-inline:8px} @media (max-width:760px){ .diploma .row{padding-right:0;font-size:12px} .diploma .seal{position:relative;right:auto;bottom:auto;margin:18px auto 0} } /* kurs detay: mobil yapışkan çubuk içeriği ezmesin */ @media (max-width:760px){ body:has(.m-cta){padding-bottom:calc(158px + env(safe-area-inset-bottom))} } /* wings sertifika kanadı: parşömen zemin, taşma yok */ .wing .wfloat{background-color:#1c130b} /* fix: detail-hero children stack vertically (meta strip was being pushed aside) */ .detail-hero{flex-direction:column;justify-content:flex-end;align-items:stretch} .detail-hero .container{width:100%} /* ========================================================================== V8 LAYER — menu fitting fixes + click choreography (page transitions, hover-reactive section backgrounds) ========================================================================== */ /* --- menü açıkken header tamamen şeffaflaşır, eski nav kaybolur --- */ .nav-links,.nav-actions .ghost,.nav-actions .btn{transition:opacity .25s var(--ease),visibility .25s} body.menu-open .site-head{background:transparent;border-bottom-color:transparent;box-shadow:none} body.menu-open .nav-links, body.menu-open .nav-actions .ghost, body.menu-open .nav-actions .btn{opacity:0;visibility:hidden;pointer-events:none} body.menu-open .announce{visibility:hidden} /* --- menü yerleşimi: ilk madde ezilmez, kısa ekranlarda kayar --- */ .menu-layer{ padding:clamp(118px,15vh,168px) var(--gut) 44px; justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain; } .menu-layer a.big{font-size:clamp(27px,4.3vw,45px);line-height:1.55} .menu-layer .foot{margin-top:36px;padding-top:20px;border-top:1px solid var(--lined);flex:none} @media (max-width:760px){ .menu-layer{padding-top:104px} .menu-layer a.big{font-size:clamp(25px,6.6vw,34px);line-height:1.6} } /* --- sayfa geçiş perdesi: basınca perde iner, yeni sayfada kalkar --- */ .page-veil{ position:fixed;inset:0;z-index:240;pointer-events:none; background:linear-gradient(165deg,var(--esp2),var(--esp)); clip-path:inset(0 0 100% 0); display:flex;align-items:center;justify-content:center; } .page-veil .mark{ font-family:var(--serif);font-style:italic;color:var(--brass2); font-size:clamp(18px,2vw,24px);opacity:0;transition:opacity .2s .15s; } .page-veil.out{clip-path:inset(0 0 0 0);transition:clip-path .42s var(--e-text);pointer-events:all} .page-veil.out .mark{opacity:.9} .page-veil.in{clip-path:inset(0 0 0 0);animation:veilLift .6s var(--e-text) .08s forwards} .page-veil.in .mark{opacity:.9;transition:opacity .3s .3s} @keyframes veilLift{to{clip-path:inset(0 0 100% 0)}} /* --- section üzerinde gezinince zemine eşlik eden ışık --- */ .hoverglow{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; transition:opacity .5s var(--ease); background:radial-gradient(340px at var(--gx,50%) var(--gy,50%),rgba(160,118,47,.09),transparent 72%); } .band-dark .hoverglow{background:radial-gradient(380px at var(--gx,50%) var(--gy,50%),rgba(216,172,92,.11),transparent 72%)} .living:hover .hoverglow{opacity:1} @media (prefers-reduced-motion:reduce){ .page-veil{display:none} .hoverglow{display:none} } /* menu open: close button stays visible on dark layer */ body.menu-open .menu-btn{border-color:rgba(241,233,215,.32);background:rgba(241,233,215,.06)} /* ========================================================================== V9 LAYER — boşluk sıfırlama: kompakt adımlar, dolu anons barı, ayraçlı simetrik nav, iki kolonlu hero (sol metin + sağ hızlı kayıt) ========================================================================== */ /* ---------- announce: sol sosyal ikonlar, ortada blur ile kaybolan mesaj ---------- */ .announce .row{justify-content:center} .ann-social{position:absolute;left:var(--gut);display:flex;gap:16px;align-items:center} .ann-social a{display:flex;color:var(--cream3);transition:color .25s,transform .25s var(--ease)} .ann-social a:hover{color:var(--brass2);transform:translateY(-2px)} .ann-social svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .announce .msg{ opacity:0;filter:blur(7px);transform:translateX(30px); transition:opacity .55s var(--eo-quart),filter .55s var(--eo-quart),transform .55s var(--eo-quart); } .announce .msg.on{opacity:1;filter:blur(0);transform:none} @media (max-width:760px){ .ann-social{display:none} .announce .msg{max-width:calc(100% - 28px)} } /* ---------- nav: ayraçlar + simetri ---------- */ .nav-links{margin-inline:auto;padding-inline:clamp(14px,2vw,30px);border-inline:1px solid var(--line)} .nav-actions .ghost{padding-right:18px;border-right:1px solid var(--line);margin-right:2px} body.menu-open .nav-links{border-color:transparent} @media (max-width:1180px){.nav-links{padding-inline:10px}} /* ---------- hero: iki kolon — sol kompakt metin, sağ hızlı kayıt ---------- */ .hero-grid{ display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(20px,3vw,44px);align-items:end; } .hero-copy{max-width:none;background:rgba(15,10,5,.34)} .hero-title{font-size:clamp(36px,4.5vw,60px)} .hero-copy .lead{font-size:clamp(15.5px,1.2vw,17.5px);margin-top:16px} .hero-copy .hero-ctas{margin-top:24px} .hero-copy .btn{min-height:46px;padding:11px 22px;font-size:14px} .hero-quick{max-width:none;display:flex;flex-direction:column;gap:12px} .hero-quick .qtitle{font-family:var(--serif);font-weight:520;font-size:clamp(19px,1.7vw,24px);color:var(--cream)} .hero-quick .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .hero-quick input,.hero-quick select{ font:inherit;font-size:14px;width:100%;color:var(--cream); background:rgba(241,233,215,.08);border:1px solid rgba(241,233,215,.2); border-radius:12px;padding:12px 14px;transition:border-color .2s,background .2s; } .hero-quick input::placeholder{color:var(--cream3)} .hero-quick select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23D8AC5C' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center} .hero-quick select option{color:var(--ink);background:var(--paper3)} .hero-quick input:focus,.hero-quick select:focus{outline:none;border-color:var(--brass2);background:rgba(241,233,215,.12)} .hero-quick .btn{width:100%;justify-content:center;min-height:48px} .hero-quick .qnote{font-size:11.5px;color:var(--cream3);text-align:center} @media (max-width:1020px){ .hero-grid{grid-template-columns:1fr;align-items:stretch;gap:14px} .hero{min-height:0} .hero .container{padding-top:120px} } @media (max-width:760px){ .hero-quick .qgrid{grid-template-columns:1fr} .hero-copy .hero-ctas .btn{flex:1 1 auto} } /* ---------- steps4: kompakt görselli yolculuk (boşluk yok) ---------- */ .steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .step4{display:flex;flex-direction:column;gap:10px} .step4 .ph{ aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;position:relative; border:1px solid var(--line); } .step4 .ph .zoom{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s var(--eo-quart)} .step4:hover .ph .zoom{transform:scale(1.06)} .step4 .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,transparent 55%,rgba(15,10,5,.4))} .step4 .stno{ position:absolute;top:10px;left:10px;z-index:2; font-family:var(--serif);font-style:italic;font-size:14px;color:var(--brass2); background:rgba(15,10,5,.6);backdrop-filter:blur(6px);padding:4px 12px;border-radius:var(--r-pill); } .step4 .arrow{ position:absolute;right:12px;bottom:10px;z-index:2;color:var(--cream);font-size:18px; opacity:0;transform:translateX(-8px);transition:.3s var(--eo-quart); } .step4:hover .arrow{opacity:1;transform:none} .step4 h3{font-family:var(--serif);font-weight:540;font-size:18.5px} .step4 p{font-size:13.5px;color:var(--ink2);line-height:1.55} @media (max-width:1020px){.steps4{grid-template-columns:1fr 1fr}} @media (max-width:760px){ .steps4{grid-auto-flow:column;grid-auto-columns:72%;grid-template-columns:none; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:12px} .steps4::-webkit-scrollbar{display:none} .steps4>*{scroll-snap-align:center} } /* ========================================================================== V10 LAYER — her section'a KENDİNE ÖZGÜ hover/ambiyans kimliği (hiçbiri diğerinin aynısı değil) ========================================================================== */ /* marquee: kelime üzerine gelince paprika boyanır, hafif yükselir */ .marquee .item{transition:color .3s,transform .3s var(--ease)} .marquee .item:hover{color:var(--appetite);transform:translateY(-3px)} /* trust: üst kenardan altın→paprika süpürme + kalkış (ikon zaten çiziliyor) */ .trust div{position:relative;transition:transform .3s var(--eo-quart),box-shadow .3s;overflow:hidden} .trust div::after{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--brass),var(--appetite)); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-text); } .trust div:hover{transform:translateY(-4px);box-shadow:var(--sh-card)} .trust div:hover::after{transform:scaleX(1)} /* wings: kanadın üzerine gelince perspektif düzleşir (öne döner) */ .seen .wing-l:hover{transform:perspective(1100px) rotateY(4deg) translateX(6px) scale(1.02)} .seen .wing-r:hover{transform:perspective(1100px) rotateY(-4deg) translateX(-6px) scale(1.02)} /* karaoke satırı: üzerine gelince içeri kayar, vurgu kelime parlar */ .k-line{transition:padding-left .35s var(--e-text)} .k-line:hover{padding-left:16px} .k-line:hover em{text-shadow:0 0 26px rgba(160,118,47,.5)} /* book: sayfa aydınlanır (cap zaten beliriyor) */ .book .pg{transition:filter .35s} .book .pg:hover{filter:brightness(1.07) saturate(1.05)} /* workshops: "Yakında" rozeti canlanıp dolar */ .badge-soon{transition:.25s var(--eo-quart)} .mcard:hover .badge-soon{transform:scale(1.08);background:var(--brass);color:#FFF6EE;border-color:var(--brass)} /* split medyaları: soluk başlar, üzerine gelince renklenir */ .split .media .plx{filter:saturate(.78);transition:filter .6s var(--ease),transform .3s} .split .media:hover .plx{filter:saturate(1.08)} /* diploma: kart hafif eğilir, mühür halosu hızlanır */ .diploma{transition:transform .4s var(--eo-quart)} .diploma:hover{transform:rotate(-.6deg) translateY(-4px)} .diploma:hover .seal::after{animation-duration:6s} /* quotes: tırnak işareti döner, çerçeve altına ısınır */ .quote{transition:transform .3s var(--eo-quart),border-color .3s,box-shadow .3s} .quote:hover{transform:translateY(-5px);border-color:var(--brass)} .quote .mark{display:inline-block;transition:transform .45s var(--e-text)} .quote:hover .mark{transform:rotate(-10deg) scale(1.18)} /* events: tarih bloğu paprikaya boyanır */ .event .date,.event .date b{transition:color .3s,border-color .3s} .event:hover .date b{color:var(--appetite)} .event:hover .date{border-right-color:var(--appetite)} /* katalog kartı: alttan degrade çizgi süpürmesi */ .ccard::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2; background:linear-gradient(90deg,var(--appetite),var(--brass2)); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e-text); } .ccard{position:relative} .ccard:hover::after{transform:scaleX(1)} /* final cam plaket: nefes alır */ .final .glass{transition:transform .5s var(--eo-quart),box-shadow .5s} .final .glass:hover{transform:scale(1.015);box-shadow:0 34px 90px -30px rgba(15,10,5,.7)} /* footer dev yazı: hover ile harf araları açılır */ .foot-statement{transition:letter-spacing 1.2s var(--ease)} .site-foot:hover .foot-statement{letter-spacing:.025em} /* ---------- ambient words: açık zeminde nefes alan teknik terimler ---------- */ .amb-words{position:absolute;inset:0;z-index:0;pointer-events:none} .amb-words span{ position:absolute;font-family:var(--serif);font-style:italic;white-space:nowrap; font-size:clamp(14px,1.7vw,23px);color:var(--ink);opacity:.045; animation:cloudPulse var(--cd,8s) ease-in-out var(--cdel,0s) infinite; } @media (max-width:760px){.amb-words span:nth-child(n+4){display:none}} @media (prefers-reduced-motion:reduce){ .amb-words span{animation:none;opacity:.07} .trust div::after,.ccard::after{transform:scaleX(1)} } /* ========================================================================== V11 — NAV BAŞTAN: ayrık başlıklar, dikey ayraçlar, güvenilir hover (maskeli etiket animasyonu kaldırıldı — bitişme ve zıplama yapıyordu) ========================================================================== */ .nav-links{gap:0;align-items:center} .nav-links li{display:flex;align-items:center} .nav-links li+li::before{ content:"";width:1px;height:15px;background:var(--line); margin-inline:clamp(10px,1.1vw,18px);flex:none; } .nav-links a{ padding:10px clamp(6px,.6vw,10px);overflow:visible;opacity:.85; transition:opacity .2s,color .25s;letter-spacing:.01em; } .nav-links a:hover{background:none;opacity:1;color:var(--brass)} .nav-links .sw{height:auto;overflow:visible} .nav-links .sw span{transition:none;height:auto;line-height:1.4;transform:none} .nav-links .sw span:last-child{display:none} .nav-links a:hover .sw span{transform:none} .nav-links a::after{ content:"";position:absolute;left:12%;right:12%;bottom:2px;height:2px;border-radius:2px; background:var(--brass);transform:scaleX(0);transform-origin:center; transition:transform .32s var(--e-text); } .nav-links a:hover::after{transform:scaleX(1)} .nav-links a[aria-current]{opacity:1;color:var(--brass)} .nav-links a[aria-current]::after{transform:scaleX(1);left:12%;right:12%;bottom:2px;height:2px;background:var(--brass)} @media (max-width:1280px){ .nav-links li+li::before{margin-inline:8px} .nav-links a{font-size:13.5px} } /* ========================================================================== V12 — anons barı: noktalar kalktı; ortada yavaş akan, kenarlarda flulaşarak kaybolan mesaj şeridi ========================================================================== */ .announce .dots{display:none} .ann-marquee{ position:relative;max-width:min(680px,72%);margin-inline:auto;height:100%; display:flex;align-items:center;overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .ann-marquee::before,.ann-marquee::after{ content:"";position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none; backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px); } .ann-marquee::before{left:0} .ann-marquee::after{right:0} .ann-track{ display:inline-flex;align-items:center;gap:36px;white-space:nowrap; animation:annSlide var(--annd,38s) linear infinite;will-change:transform; } .announce:hover .ann-track{animation-play-state:paused} @keyframes annSlide{to{transform:translateX(-50%)}} .ann-item{display:inline-flex;gap:7px;letter-spacing:.03em} .ann-item b{color:var(--brass2);font-weight:600} .ann-sep{color:var(--brass2);opacity:.55;font-size:9px} @media (max-width:760px){ .ann-marquee{max-width:calc(100% - 16px)} } @media (prefers-reduced-motion:reduce){ .ann-track{animation:none} .ann-marquee::before,.ann-marquee::after{display:none} } /* ========================================================================== V13 — hero oran düzeltmesi (video görünür), istatistik çipleri, animasyonlu transparan section ayraçları ========================================================================== */ /* cam paneller: küçük, hafif, videoyu göstermeyen değil gösteren */ .glass{backdrop-filter:blur(9px) saturate(1.15);-webkit-backdrop-filter:blur(9px) saturate(1.15);background:rgba(15,10,5,.3)} .hero-grid{grid-template-columns:auto auto;justify-content:space-between;align-items:end} .hero-copy{max-width:560px;padding:clamp(20px,2.2vw,30px);background:rgba(15,10,5,.3)} .hero-quick{max-width:390px;justify-self:end;padding:clamp(18px,2vw,26px)} .hero-title{font-size:clamp(31px,3.8vw,50px)} .hero-copy .lead{font-size:15px;max-width:44ch;margin-top:14px} .hero-copy .hero-ctas{margin-top:20px} .hero-quick .qtitle{font-size:18px} .hero-quick input,.hero-quick select{padding:10px 13px;font-size:13.5px;border-radius:10px} .hero-quick .btn{min-height:44px;font-size:13.5px} .hero-quick .qnote{font-size:10.5px} .hero .container{padding-bottom:clamp(52px,8vh,88px)} /* istatistikler: hero-copy içinde kompakt çipler (deste artık üstüne binemez) */ .hero-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .hero-stats span{ display:inline-flex;align-items:baseline;gap:6px; font-size:11px;color:var(--cream3);letter-spacing:.03em; border:1px solid rgba(241,233,215,.16);border-radius:999px;padding:6px 12px; background:rgba(15,10,5,.25); } .hero-stats b{font-family:var(--serif);font-size:14.5px;color:var(--cream);font-variant-numeric:tabular-nums} @media (max-width:1020px){ .hero-grid{grid-template-columns:1fr;justify-content:stretch} .hero-copy,.hero-quick{max-width:none;justify-self:stretch} } @media (max-width:760px){ .hero-copy{padding:18px 16px} .hero-quick{padding:16px} .hero-stats span{padding:5px 10px} } /* tatlı transparan ayraçlar: görünürken ortadan çizilir, elmas döner */ .sec-div{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);position:relative;height:1px} .sec-div i{ display:block;height:1px; background:linear-gradient(90deg,transparent,var(--line) 16%,var(--brass) 50%,var(--line) 84%,transparent); transform:scaleX(0);transform-origin:center;transition:transform 1.1s var(--e-text); } .sec-div::after{ content:"";position:absolute;left:50%;top:50%;width:7px;height:7px; background:var(--brass);transform:translate(-50%,-50%) rotate(45deg) scale(0); transition:transform .6s var(--e-text) .4s; } .sec-div.seen i{transform:scaleX(1)} .sec-div.seen::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)} .band-dark+.sec-div i,.final+.sec-div i{background:linear-gradient(90deg,transparent,var(--line) 16%,var(--brass) 50%,var(--line) 84%,transparent)} @media (prefers-reduced-motion:reduce){ .sec-div i{transform:scaleX(1)} .sec-div::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)} } /* ========================================================================== V14 — çerçeveli plaket kartlar (bilgi paneli görselin üstüne kayar), ray ilerleme çizgisi + sürükle-kaydır, en küçük alana kadar mikro dokunuşlar ========================================================================== */ /* mcard → çerçeveli plaket; gövde görselin üstüne "biner", hover'da kayar */ .mcard{ background:var(--paper3);border:1px solid var(--line);border-radius:var(--r-m); overflow:hidden;gap:0;transition:transform .35s var(--eo-quart),box-shadow .35s,border-color .35s; } .mcard:hover{transform:translateY(-5px);box-shadow:var(--sh-card);border-color:rgba(160,118,47,.4)} .mcard .ph{border-radius:0} .mcard .mbody{ position:relative;background:var(--paper3);padding:20px 18px 18px; display:flex;flex-direction:column;gap:8px; border-radius:16px 16px 0 0;margin-top:-14px; transition:transform .5s var(--e-text); } .mcard .mbody::before{ content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%); width:44px;height:3px;border-radius:3px;background:var(--line); transition:width .45s var(--e-text),background .45s; } .mcard:hover .mbody{transform:translateY(-22px)} .mcard:hover .mbody::before{width:76px;background:var(--brass)} .mcard .mbody .cat{padding-top:6px} .mcard .mbody .date{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* ccard gövdesi de hafifçe görsele biner */ .ccard .body{position:relative;background:var(--paper3);transition:transform .45s var(--e-text)} .ccard:hover .body{transform:translateY(-10px)} /* raylar: çirkin çubuk yok — altta zarif ilerleme çizgisi */ .rail{scrollbar-width:none;cursor:grab} .rail::-webkit-scrollbar{display:none} .rail.dragging{cursor:grabbing;scroll-snap-type:none} .rail.dragging *{pointer-events:none} .rail-progress{ max-width:220px;height:2px;background:var(--line);border-radius:2px; margin:2px auto 0;overflow:hidden; } .rail-progress i{ display:block;height:100%;width:100%;border-radius:2px; background:linear-gradient(90deg,var(--brass),var(--appetite)); transform:scaleX(var(--rp,0));transform-origin:left;transition:transform .15s linear; } /* mikro dokunuşlar: tablo hücresinden akordeona kadar */ .keyfacts div{position:relative;transition:background .3s;overflow:hidden} .keyfacts div::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brass); transform:scaleY(0);transform-origin:top;transition:transform .4s var(--e-text); } .keyfacts div:hover{background:#FFFDF6} .keyfacts div:hover::before{transform:scaleY(1)} .acc-item{transition:background .3s} .acc-item:hover{background:rgba(160,118,47,.05)} .acc-head:hover{color:var(--brass)} .stat b{transition:color .3s} .stat:hover b{color:var(--appetite)} .logos .lg{cursor:default} .logos .lg:hover{opacity:1} .buy-panel li,.hero-quick input,.hero-quick select{transition:transform .25s var(--ease),border-color .2s,background .2s} .buy-panel li:hover{transform:translateX(4px)} .field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(160,118,47,.45)} .crumb a{transition:color .2s,padding-left .25s var(--ease)} .crumb a:hover{padding-left:3px} @media (max-width:760px){ .mcard:hover .mbody{transform:none} .mcard .mbody{margin-top:-10px} .rail-progress{max-width:140px} } @media (prefers-reduced-motion:reduce){ .mcard:hover .mbody{transform:none} .ccard:hover .body{transform:none} } /* ========================================================================== V15 — hover fitting düzeltmeleri, görsel açılma animasyonu, 3 ayraç varyantı, ÇEKMECE MENÜ, yıldız-logolar, hero istatistik şeridi ========================================================================== */ /* trust hover: kayma yok — zemin ısınır, ikon canlanır, süpürme kalır */ .trust div:hover{transform:none;box-shadow:none;background:#FFFDF6} .trust .tico svg{transition:transform .35s var(--e-text)} .trust div:hover .tico svg{transform:rotate(-7deg) scale(1.1)} /* görseller: scroll'da maskeden sıyrılarak açılır */ .imgpre{clip-path:inset(0 0 100% 0)} .imgpre.imgseen{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--e-text)} /* ayraç varyantları — hiçbiri diğerinin aynısı değil */ .sec-div.v2 i{ background:repeating-linear-gradient(90deg,rgba(160,118,47,.55) 0 6px,transparent 6px 15px); opacity:.6;transform-origin:left; } .sec-div.v2::after{ content:"✦";background:none;width:auto;height:auto;color:var(--brass);font-size:12px; background-color:var(--deck-bg,var(--paper));padding:0 8px; } .sec-div.v3 i{ height:5px;background:linear-gradient(90deg,transparent,rgba(160,118,47,.22),transparent); border-block:1px solid var(--line);transform-origin:right; } .sec-div.v3::after{display:none} /* ---------- MENÜ: tam ekran değil, sağdan süzülen çekmece ---------- */ .menu-layer{ left:auto;right:0;top:0;bottom:0;width:min(430px,94vw); clip-path:none;transform:translateX(106%); transition:transform .55s var(--e-text),visibility .55s; padding:96px 30px 24px;justify-content:flex-start; border-left:1px solid rgba(216,172,92,.25); box-shadow:-30px 0 90px rgba(15,10,5,.55); } .menu-layer.open{clip-path:none;transform:translateX(0)} .menu-layer::before{display:none} .menu-layer a.big{ font-size:clamp(21px,2vw,26px);line-height:1.5;padding:7px 0; transform:translateX(28px); } .menu-layer.open a.big{transform:none} .menu-layer a.big .no{transform:translateY(-.6em)} .menu-visual{ position:relative;right:auto;top:auto;left:auto;width:100%;aspect-ratio:16/9; margin-top:16px;opacity:1;transform:none;border-radius:14px;display:block; animation:menuKen 16s ease-in-out infinite alternate;pointer-events:none; } .menu-visual.on{transform:none;opacity:1} @keyframes menuKen{from{background-position:42% 48%}to{background-position:58% 52%}} .menu-layer .foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--lined);font-size:11.5px;gap:10px} @media (max-width:1020px){.menu-visual{display:block}} @media (max-width:760px){.menu-layer{width:min(400px,100vw);padding:88px 22px 20px}} /* çekmece arkası: sayfa kararır ve flulaşır */ .menu-backdrop{ position:fixed;inset:0;z-index:118;background:rgba(15,10,5,.5); backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s; } body.menu-open .menu-backdrop{opacity:1;visibility:visible} /* çekmece modunda header normal kalır (eski tam-ekran kuralları iptal) */ body.menu-open .site-head{background:var(--paper);border-bottom-color:var(--line);color:var(--ink);box-shadow:none} body.menu-open .site-head .brand img{filter:none} body.menu-open .nav-links,body.menu-open .nav-actions .ghost,body.menu-open .nav-actions .btn{opacity:1;visibility:visible;pointer-events:auto} body.menu-open .announce{visibility:visible} body.menu-open .nav-links{border-color:var(--line)} body.menu-open .menu-btn{border-color:var(--line);background:transparent} /* ---------- referans bulutu: gerçek logolar, yıldız gibi yanıp söner ---------- */ .cloud-bg span{animation-name:twinkle} .cloud-bg img{height:clamp(24px,3.2vw,44px);width:auto;filter:brightness(0) invert(1);display:block} @keyframes twinkle{ 0%,100%{opacity:.05;transform:scale(.97)} 50%{opacity:.6;transform:scale(1.05)} } /* ---------- hero istatistik şeridi: iki panelin altında tam genişlik ---------- */ .hero-statsbar{ grid-column:1/-1;max-width:none;width:100%; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:12px;padding:13px clamp(16px,2.2vw,28px); } .hero-statsbar span{ display:inline-flex;align-items:baseline;gap:8px; font-size:12px;color:var(--cream3);letter-spacing:.04em; } .hero-statsbar span+span{border-left:1px solid rgba(241,233,215,.16);padding-left:clamp(12px,2vw,26px)} .hero-statsbar b{font-family:var(--serif);font-size:19px;color:var(--cream);font-variant-numeric:tabular-nums} @media (max-width:760px){ .hero-statsbar{justify-content:flex-start;gap:8px 0} .hero-statsbar span{width:50%;padding-left:0!important;border-left:none!important} } /* açılış karşılama ekranı kaldırıldı — kalıntı varsa gizle */ .loader{display:none!important} @media (prefers-reduced-motion:reduce){ .imgpre{clip-path:inset(0 0 0 0)} .menu-visual{animation:none} .cloud-bg span{animation:none;opacity:.2} } /* ========================================================================== V16 — geçiş perdesi kaldırıldı; nav "kayan vurgu hapı"; yeni banner tarzları: scroll-yığın kartlar + hover-açılan panel galerisi ========================================================================== */ /* geçiş perdesi tamamen devre dışı */ .page-veil{display:none!important} /* ---------- nav: kayan yarı saydam vurgu hapı (magic indicator) ---------- */ .nav-links{position:relative} .nav-links a{position:relative;z-index:1} .nav-links a::after,.nav-links a[aria-current]::after{display:none} .nav-links a[aria-current]{color:var(--brass)} .nav-pill{ position:absolute;left:0;top:50%;height:36px;border-radius:999px; background:rgba(160,118,47,.13);border:1px solid rgba(160,118,47,.22); transform:translateX(0) translateY(-50%);opacity:0;pointer-events:none; transition:transform .38s var(--e-text),width .38s var(--e-text),opacity .25s; will-change:transform,width; } /* ---------- hover-açılan panel galerisi (expanding gallery) ---------- */ .xgal{ display:flex;gap:10px;padding:0 12px;margin-block:8px; height:clamp(300px,54vh,500px); } .xgal a{ position:relative;flex:1;border-radius:20px;overflow:hidden; background-size:cover;background-position:center; transition:flex .85s var(--e-text); } .xgal a::after{ content:"";position:absolute;inset:0; background:linear-gradient(185deg,rgba(15,10,5,.02) 45%,rgba(15,10,5,.62)); transition:opacity .4s; } .xgal a .lbl{ position:absolute;left:16px;bottom:14px;z-index:2;color:var(--cream); font-family:var(--serif);font-size:17px;letter-spacing:.02em; display:flex;align-items:center;gap:10px;white-space:nowrap; } .xgal a .lbl i{ font-style:normal;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--brass2);opacity:0;transform:translateX(-8px); transition:.35s var(--e-text) .15s; } .xgal a:hover{flex:2.8} .xgal a:hover .lbl i{opacity:1;transform:none} .xgal a .prc{ position:absolute;top:12px;right:12px;z-index:2; font-family:var(--serif);font-size:15px;color:var(--cream); background:rgba(15,10,5,.55);backdrop-filter:blur(6px); padding:5px 13px;border-radius:999px;border:1px solid rgba(216,172,92,.3); opacity:0;transform:translateY(-6px);transition:.35s var(--e-text) .1s; } .xgal a:hover .prc{opacity:1;transform:none} @media (max-width:760px){ .xgal{ flex-direction:column;height:auto;gap:12px;padding:0 8px; opacity:1!important;transform:none!important; -webkit-mask-image:none!important;mask-image:none!important; } .xgal a{display:block;flex:none!important;width:100%;height:185px;min-height:185px} .xgal a .prc{opacity:1;transform:none} .xgal a .lbl i{opacity:1;transform:none} } /* ---------- scroll-yığın kartlar (kitap gibi üst üste biner) ---------- */ .stack{display:flex;flex-direction:column} .scard{ position:sticky;top:calc(118px + var(--si,0)*18px); display:grid;grid-template-columns:1fr 1fr;min-height:min(56vh,440px); background:var(--paper3);border:1px solid var(--line);border-radius:22px; overflow:hidden;box-shadow:0 -14px 40px rgba(26,18,7,.08),var(--sh-card); } .scard+.scard{margin-top:30px} .scard .simg{background-size:cover;background-position:center;min-height:200px} .scard .stx{ padding:clamp(24px,3.2vw,48px);display:flex;flex-direction:column; justify-content:center;gap:13px;align-items:flex-start; } .scard .sno{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--brass);letter-spacing:.2em} .scard h3{font-family:var(--serif);font-weight:540;font-size:clamp(21px,2.2vw,30px);line-height:1.2} .scard p{font-size:15px;color:var(--ink2);max-width:44ch} .scard.dark{background:var(--esp2);border-color:var(--lined);color:var(--cream)} .scard.dark p{color:var(--cream2)} .scard.dark .sno{color:var(--brass2)} .scard.warm{background:#F3E9DA} @media (max-width:1020px){ .scard{grid-template-columns:1fr;min-height:0} .scard .simg{aspect-ratio:16/8} .scard{top:calc(96px + var(--si,0)*12px)} } @media (max-width:760px){ .scard{top:calc(70px + var(--si,0)*10px);border-radius:18px} .scard+.scard{margin-top:18px} } @media (prefers-reduced-motion:reduce){ .xgal a{transition:none} .scard{position:relative;top:auto} } /* ========================================================================== V17 — MOTION SPEC UYUMU (Premium_Web_Motion_Banner_Slider_2026) Tek tutarlı aile: %70 editoryal reveal + %20 hassas panel + %10 dokunsal. Tüm süreler token'lara çekildi; spec'e aykırı efektler düzeltildi. ========================================================================== */ /* buton: fill 280ms, ok 200ms, basış .99/100ms — tek baskın efekt kuralı */ .btn{transition:color 220ms var(--ease),border-color 220ms var(--ease),transform 100ms var(--ease)} .btn .fill{transition:transform 280ms var(--ease-in)} .btn .arr{transition:transform 200ms var(--ease)} .btn:active{transform:scale(.99)} .lnk::after{transition:transform 240ms var(--ease-in)} .lnk .arr{transition:transform 180ms var(--ease)} /* nav hapı: 300ms arayüz easingi */ .nav-pill{transition:transform 300ms var(--e-text),width 300ms var(--e-text),opacity 200ms} /* section girişleri: 18px / 650ms standardı */ .rv{transform:translateY(18px);transition-duration:650ms} .rv-l{transform:translateX(-24px);transition-duration:650ms} .rv-r{transform:translateX(24px);transition-duration:650ms} .lr-l>span{transition-duration:700ms} /* hero açılış koreografisi: 80ms eyebrow → 150ms H1 → 300ms metin → 420ms CTA */ .hero-copy .eyebrow{opacity:0;animation:fadeUp 500ms var(--ease-in) 80ms forwards} .hero .lr-l>span{animation-delay:calc(150ms + var(--l)*90ms);animation-duration:750ms} .hero-copy .lead{animation:fadeUp 550ms var(--ease-in) 300ms forwards} .hero-copy .hero-ctas{animation:fadeUp 500ms var(--ease-in) 420ms forwards} .hero-quick{opacity:0;animation:fadeUp 600ms var(--ease-in) 480ms forwards} .hero-statsbar{opacity:0;animation:fadeUp 600ms var(--ease-in) 560ms forwards} /* görsel hover: spec standardı 1.035 / 600ms (8sn zoom kaldırıldı) */ .mcard:hover .ph .zoom,.ccard:hover .ph .zoom,.step4:hover .ph .zoom{transform:scale(1.035)} .mcard .ph .zoom,.ccard .ph .zoom,.step4 .ph .zoom{transition:transform 600ms var(--e-lux)} .fcard .img{transition:transform 600ms var(--e-lux)} .fcard:hover .img{transform:scale(1.035)} .simmer .zoom,.simmer img{transition:transform 600ms var(--e-lux)} .simmer:hover .zoom,.simmer:hover img{transform:scale(1.035);transition:transform 600ms var(--e-lux)} /* yemek asla kalıcı soluk durmaz (spec 12) */ .split .media .plx{filter:saturate(.97)} .split .media:hover .plx{filter:saturate(1.05)} /* kart hızlı-aksiyon: 10px yüksel / 220ms */ .fcard .qe{transform:translateY(10px);transition:opacity 220ms var(--eo-quart),transform 220ms var(--eo-quart)} /* akordeon 300ms, çekmece 380ms, arka perde 260ms (panel token'ları) */ .acc-body{transition:grid-template-rows 300ms var(--ease)} .acc-head .ic{transition:transform 300ms var(--ease),background 200ms,border-color 200ms} .menu-layer{transition:transform 380ms var(--e-text),visibility 380ms} .menu-layer a.big{transition-duration:300ms} .menu-backdrop{transition:opacity 260ms var(--ease),visibility 260ms} /* açılan galeri: 700ms yumuşak yerleşme */ .xgal a{transition:flex 700ms var(--e-text)} /* plaket kayması: 360ms panel token'ı */ .mcard .mbody{transition:transform 360ms var(--e-text)} .ccard .body{transition:transform 360ms var(--e-text)} /* kart hover kaldırma: 260ms */ .mcard,.ccard,.svc,.quote{transition-duration:260ms} /* ========================================================================== V18 — hero görünürlük sigortası + videoya saygılı hafif paneller + çerçeveli · 3D · görselli marquee bandı (mb2) ========================================================================== */ /* hero panelleri: videoyu boğmayan hafif cam */ .hero-copy{background:rgba(15,10,5,.26)} .hero-quick{background:rgba(15,10,5,.3)} .hero-statsbar{background:rgba(15,10,5,.26)} /* ---------- mb2: çift çerçeveli, görsel çipli, 3D hover'lı marquee ---------- */ .mb2{position:relative;border-block:1px solid var(--line);padding-block:14px;background:var(--paper)} .mb2::before,.mb2::after{ content:"";position:absolute;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(160,118,47,.4),transparent); } .mb2::before{top:5px} .mb2::after{bottom:5px} .mb2 .marquee-track{display:inline-flex;align-items:center} .mb2 .item{ font-size:clamp(19px,2.1vw,28px);padding-inline:16px;display:inline-block; transition:transform 300ms var(--e-text),color 300ms;transform-origin:center bottom; } .mb2 .item:hover{transform:perspective(600px) rotateX(14deg) translateY(-3px);color:var(--appetite)} .mb2 .chip{ width:46px;height:46px;border-radius:50%;flex:none;display:inline-block; background-size:cover;background-position:center; border:2px solid var(--paper3);box-shadow:0 5px 14px rgba(26,18,7,.22); margin-inline:12px;transition:transform 350ms var(--e-text); } .mb2 .chip:hover{transform:perspective(600px) rotateY(20deg) scale(1.18)} .mb2 .sepx{color:var(--brass);opacity:.6;font-size:11px;margin-inline:4px} @media (max-width:760px){ .mb2 .chip{width:34px;height:34px;margin-inline:8px;box-shadow:0 2px 6px rgba(26,18,7,.1)} .mb2 .item{font-size:17px;padding-inline:10px} } @media (prefers-reduced-motion:reduce){ .mb2 .item:hover,.mb2 .chip:hover{transform:none} } /* ========================================================================== V19 — çekmece fitting, ayraç güvenliği, görselsiz alan doldurma, durağan halde yaşayan detaylar, mobil taşma sigortaları ========================================================================== */ /* çekmece: ilk madde header altında kalmaz */ .menu-layer{padding-top:clamp(150px,19vh,188px)} @media (max-width:760px){.menu-layer{padding-top:132px}} /* ayraçlar: nefes payı, tıklamayı asla engellemez, üstüne binmez */ .sec-div{margin-block:2px;pointer-events:none;z-index:0;position:relative} /* şef satırları: masaüstünde de portre görseli (görselsiz alan kalmasın) */ @media (min-width:1181px){ .chef-row{grid-template-columns:52px 64px 1fr auto auto} .chef-thumb{display:block;width:64px;height:80px;border-radius:12px} } /* birincil CTA: durağan halde 5.5 sn'de bir zarif parlama süpürmesi */ .btn-brass::after{ content:"";position:absolute;top:0;bottom:0;left:-45%;width:34%; background:linear-gradient(105deg,transparent,rgba(255,246,230,.35),transparent); transform:skewX(-18deg);animation:sheen 5.5s ease-in-out infinite;pointer-events:none; } @keyframes sheen{0%,55%{left:-45%}78%{left:125%}100%{left:125%}} /* "En kapsamlı" rozeti: yıldız değil nabız — çok hafif */ .fcard .pill.hot{animation:hotpulse 4s ease-in-out infinite} @keyframes hotpulse{0%,100%{box-shadow:0 0 0 0 rgba(172,66,36,.35)}50%{box-shadow:0 0 0 8px rgba(172,66,36,0)}} /* xgal etiketleri: taşma yok, sarabilir */ .xgal a .lbl{white-space:normal;max-width:calc(100% - 26px);line-height:1.3} /* mobil taşma sigortaları */ @media (max-width:760px){ h1,h2,h3,.h1,.h2,.h3,.display{overflow-wrap:break-word} .scard h3{font-size:19px} .keyfacts b{overflow-wrap:break-word} } @media (prefers-reduced-motion:reduce){ .btn-brass::after{animation:none;display:none} .fcard .pill.hot{animation:none} } /* ========================================================================== V20 — ŞEF DESTESİ: Penta tarzı fantastik plaket tablosu (kardeş kararması + köşe çerçeve çizimi + kademeli meta reveal) ========================================================================== */ .chefdeck{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cdk{ position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;isolation:isolate; border:1px solid var(--lined); transition:transform 400ms var(--e-text),opacity 400ms var(--ease),border-color 300ms; } .cdk .img{ position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center 18%; filter:saturate(.82);transition:transform 650ms var(--e-lux),filter 500ms; } .cdk::after{ content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(186deg,rgba(15,10,5,.04) 40%,rgba(15,10,5,.86) 96%); } /* Penta imzası: kardeşler söner, seçili parlar */ .chefdeck:hover .cdk{opacity:.35} .chefdeck .cdk:hover{ opacity:1;transform:translateY(-7px);border-color:rgba(216,172,92,.5); box-shadow:0 26px 60px -20px rgba(15,10,5,.8); } .cdk:hover .img{transform:scale(1.05);filter:saturate(1.06)} /* köşelerden çizilen pirinç çerçeve */ .cdk .fr{position:absolute;inset:10px;z-index:2;pointer-events:none} .cdk .fr::before,.cdk .fr::after{ content:"";position:absolute;width:24px;height:24px;border:1px solid var(--brass2); opacity:0;transition:width 420ms var(--e-text),height 420ms var(--e-text),opacity 300ms; } .cdk .fr::before{top:0;left:0;border-right:none;border-bottom:none} .cdk .fr::after{bottom:0;right:0;border-left:none;border-top:none} .cdk:hover .fr::before,.cdk:hover .fr::after{opacity:1;width:46px;height:46px} .cdk .no{ position:absolute;top:13px;right:13px;z-index:2; font-family:var(--serif);font-style:italic;font-size:13px;color:var(--brass2); background:rgba(15,10,5,.55);backdrop-filter:blur(6px); padding:4px 11px;border-radius:999px;border:1px solid rgba(216,172,92,.28); } .cdk .meta{position:absolute;left:16px;right:60px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:3px} .cdk .meta b{font-family:var(--serif);font-weight:520;font-size:clamp(17px,1.6vw,21px);color:var(--cream);line-height:1.2} .cdk .meta i{ font-style:normal;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass2); opacity:0;transform:translateY(6px);transition:300ms var(--e-text) 80ms; } .cdk:hover .meta i{opacity:1;transform:none} .cdk .go{ position:absolute;right:13px;bottom:13px;z-index:2;width:38px;height:38px;border-radius:50%; border:1px solid rgba(216,172,92,.5);display:flex;align-items:center;justify-content:center; color:var(--brass2);font-size:15px; opacity:0;transform:rotate(45deg) scale(.8);transition:340ms var(--e-text); } .cdk:hover .go{opacity:1;transform:rotate(0) scale(1)} @media (max-width:1020px){.chefdeck{grid-template-columns:1fr 1fr}} @media (max-width:760px){ .chefdeck{gap:10px} .chefdeck:hover .cdk{opacity:1} .cdk .meta i,.cdk .go{opacity:1;transform:none} .cdk .meta b{font-size:15px} } @media (prefers-reduced-motion:reduce){ .chefdeck:hover .cdk{opacity:1;transform:none} .cdk .meta i,.cdk .go,.cdk .fr::before,.cdk .fr::after{opacity:1;transform:none} } /* ========================================================================== V21 — PENTA EV STİLİ KATMANI 11 canlı referans sitesinin kod analizinden damıtıldı: isimli easing kiti + 350/450ms vites sistemi + imza reçeteler ========================================================================== */ :root{ --e-manidar:cubic-bezier(.77,.16,.09,.94); /* Penta ana yapısal hareket */ --e-kagit:cubic-bezier(.42,.97,.52,1.49); /* oyuncu aşım — küçük aksanlar */ } /* yapısal hareketler manidar'a geçti */ .site-head{transition-timing-function:var(--e-manidar)} .menu-layer{transition:transform 450ms var(--e-manidar),visibility 450ms} .menu-backdrop{transition:opacity 350ms var(--e-manidar),visibility 350ms} .nav-pill{transition:transform 350ms var(--e-manidar),width 350ms var(--e-manidar),opacity 200ms} .mcard .mbody{transition:transform 450ms var(--e-manidar)} .ccard .body{transition:transform 450ms var(--e-manidar)} /* Penta imza butonu: dolgu SOLDAN süpürür (450ms manidar) */ .btn .fill{transform:scaleX(0);transform-origin:left;transition:transform 450ms var(--e-manidar)} .btn:hover .fill{transform:scaleX(1)} /* kart reçetesi: 1.08 zoom @450 manidar + sıcak paprika tülü (EAE deseni) */ .mcard .ph .zoom,.ccard .ph .zoom,.step4 .ph .zoom,.fcard .img{transition:transform 450ms var(--e-manidar)} .mcard:hover .ph .zoom,.ccard:hover .ph .zoom,.step4:hover .ph .zoom,.fcard:hover .img{transform:scale(1.08)} .ccard .ph::before,.mcard .ph::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:rgba(160,118,47,.15);opacity:0;transition:opacity 350ms var(--e-manidar); } .ccard:hover .ph::before,.mcard:hover .ph::before{opacity:1} .ccard .ph .tags{z-index:2} /* küçük aksanlar oyuncu aşımla (kagitmiadam) */ .cdk .go,.mb2 .chip,.badge-soon,.acc-head .ic{transition-timing-function:var(--e-kagit)} /* bölüm başlıkları: blur-in reveal (dearsan .fx-blur) */ .h2.rv{filter:blur(8px);transition:opacity 650ms var(--ease-in),transform 650ms var(--ease-in),filter 650ms var(--ease-in)} .h2.rv.seen{filter:blur(0)} /* footer dev yazı: kontur → hover'da yukarıdan dolan altın (doga stroke deseni) */ .foot-statement{ -webkit-text-stroke:1px rgba(216,172,92,.45); background:linear-gradient(180deg,rgba(216,172,92,.55),rgba(216,172,92,.1)); -webkit-background-clip:text;background-clip:text;color:transparent; background-size:100% 0%;background-repeat:no-repeat;background-position:top; transition:background-size 900ms var(--e-manidar),letter-spacing 1.2s var(--ease); } .site-foot:hover .foot-statement{background-size:100% 100%} /* xgal etiketleri: kontur yazı, hover'da dolar (ctech stroke-fill deseni) */ @media (min-width:761px){ .xgal a .lbl{color:transparent;-webkit-text-stroke:.6px rgba(241,233,215,.7);transition:color 350ms var(--e-manidar)} .xgal a:hover .lbl{color:var(--cream);-webkit-text-stroke:.2px rgba(241,233,215,.3)} } @media (prefers-reduced-motion:reduce){ .h2.rv{filter:none} .foot-statement{background-size:100% 100%;-webkit-text-stroke:0} .xgal a .lbl{color:var(--cream);-webkit-text-stroke:0} } /* ========================================================================== V22 — PENTA TEKNOLOJİ TAM SETİ Odometre sayaçlar · menü harf flip · filtre pop · dikey kontur yazılar · daire video widget ========================================================================== */ /* ---------- odometre: rakamlar makara gibi döner (asir/dearsan reçetesi) ---------- */ .odo{display:inline-flex;align-items:baseline;overflow:hidden} .od-col{display:inline-block;height:1em;overflow:hidden;line-height:1em} .od-strip{display:block;transform:translateY(0);transition:transform 1.7s var(--e-manidar);transition-delay:var(--od,0ms)} .od-strip span{display:block;height:1em;line-height:1em} .od-sep{display:inline-block;line-height:1em} /* ---------- menü linkleri: harf harf 3D flip (dearsan SplitText deseni) ---------- */ .menu-layer a.big{perspective:700px} .menu-layer a.big .ch{ display:inline-block;opacity:0;transform:rotateY(72deg) translateY(4px); transition:transform 340ms var(--e-kagit),opacity 240ms; transition-delay:calc(120ms + var(--li,0)*55ms + var(--ci,0)*20ms); } .menu-layer.open a.big .ch{opacity:1;transform:none} /* ---------- filtre değişimi: kartlar kademeli pop (Isotope hissi) ---------- */ @keyframes popin{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}} .pop{animation:popin 380ms var(--e-manidar) both} /* ---------- koyu bant kenarına dikey kontur yazı (ctech stroke deseni) ---------- */ .vlabel{ position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:1; writing-mode:vertical-rl;pointer-events:none;user-select:none; font-family:var(--serif);font-weight:600;letter-spacing:.14em; font-size:clamp(44px,6.4vw,96px);line-height:1; color:transparent;-webkit-text-stroke:1px rgba(216,172,92,.16); transition:-webkit-text-stroke-color 600ms var(--e-manidar),color 600ms var(--e-manidar); } section:hover>.vlabel{-webkit-text-stroke-color:rgba(216,172,92,.38);color:rgba(216,172,92,.07)} @media (max-width:1180px){.vlabel{display:none}} /* ---------- daire içinde video (dearsan hero widget'ı) ---------- */ .circ-vid{ position:absolute;right:14px;bottom:14px;z-index:3; width:clamp(110px,13vw,180px);aspect-ratio:1;border-radius:50%;object-fit:cover; border:4px solid var(--paper);box-shadow:var(--sh-float); animation:circFloat 6s ease-in-out infinite alternate; } @keyframes circFloat{to{transform:translateY(-10px)}} @media (max-width:760px){.circ-vid{width:92px;border-width:3px}} @media (prefers-reduced-motion:reduce){ .od-strip{transition:none} .menu-layer a.big .ch{opacity:1;transform:none;transition:none} .circ-vid{animation:none} .vlabel{-webkit-text-stroke-color:rgba(216,172,92,.3)} } /* ========================================================================== V23 — BÜYÜK SENTEZ: P01 Sinematik Lüks × P02 Sıcak Zanaat × P03 Hassas Hareket Yeni gövde bileşenleri (anons/header/menü/footer korunur) ========================================================================== */ /* ---------- warm card: videonun üstünde yüzen zanaat plaketi ---------- */ .wcard{ background:var(--paper3);border:1px solid var(--ink);border-radius:20px; box-shadow:8px 8px 0 rgba(160,118,47,.85); padding:clamp(22px,2.6vw,36px); transition:transform 350ms var(--e-manidar),box-shadow 350ms var(--e-manidar); } .wcard:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 rgba(160,118,47,.9)} .hero .wcard{color:var(--ink)} .hero .wcard .eyebrow{color:var(--brass)} .hero .wcard .lead{color:var(--ink2)} .hero .wcard em.tone{color:var(--appetite)} /* hero watermark: dev kontur kelime */ .stroke-word{ position:absolute;left:0;right:0;bottom:2vh;z-index:1;pointer-events:none; font-family:var(--serif);font-weight:600;text-align:center;line-height:1; font-size:clamp(80px,15vw,230px);letter-spacing:.02em;white-space:nowrap; color:transparent;-webkit-text-stroke:1px rgba(241,233,215,.16); } /* hızlı kayıt: warm sürüm */ .hq2 .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .hq2 input,.hq2 select{ font:inherit;font-size:14px;width:100%;color:var(--ink); background:var(--paper);border:1px solid var(--line);border-radius:12px; padding:11px 13px;transition:border-color .2s,box-shadow .2s; } .hq2 input:focus,.hq2 select:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(160,118,47,.16)} .hq2 .btn{width:100%;justify-content:center;min-height:46px;margin-top:12px} .hq2 .qnote{font-size:11px;color:var(--ink3);text-align:center;margin-top:8px} .hq2 .qtitle{font-family:var(--serif);font-weight:540;font-size:19px} /* hero istatistik plaket şeridi (warm) */ .statstrip{ grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px; } .statstrip span{ flex:1;min-width:150px;display:flex;align-items:baseline;gap:8px;justify-content:center; background:var(--paper3);border:1px solid var(--ink);border-radius:14px; box-shadow:4px 4px 0 rgba(160,118,47,.7);padding:10px 14px; font-size:11.5px;color:var(--ink2);letter-spacing:.04em; } .statstrip b{font-family:var(--serif);font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums} /* ---------- imza programlar: asimetrik plaket tablosu ---------- */ .sig-grid{display:grid;grid-template-columns:1.55fr 1fr;grid-auto-rows:minmax(200px,auto);gap:22px} .sig{ display:flex;flex-direction:column;background:var(--paper3); border:1px solid var(--ink);border-radius:18px;overflow:hidden; box-shadow:6px 6px 0 var(--line); transition:transform 350ms var(--e-manidar),box-shadow 350ms var(--e-manidar),opacity 400ms var(--ease); } .sig.big{grid-row:span 2} .sig .ph{position:relative;overflow:hidden;aspect-ratio:16/9;flex:none} .sig.big .ph{aspect-ratio:auto;flex:1;min-height:280px} .sig .ph .zoom{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 450ms var(--e-manidar),filter 450ms} .sig:hover .ph .zoom{transform:scale(1.06);filter:saturate(1.06)} .sig .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,transparent 55%,rgba(26,18,7,.38))} .sig .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:7px} .sig .kick{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)} .sig h3{font-family:var(--serif);font-weight:540;font-size:clamp(20px,1.9vw,27px);line-height:1.15} .sig .meta{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums} .sig .row{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:12px;border-top:1px dashed var(--line)} .sig .prc{font-family:var(--serif);font-size:20px;color:var(--appetite);font-variant-numeric:tabular-nums} .sig .prc small{font-family:var(--sans);font-size:10.5px;color:var(--ink3);display:block} .sig .tag{ position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--paper3); background:var(--appetite);padding:5px 12px;border-radius:999px; box-shadow:3px 3px 0 rgba(26,18,7,.5); } /* P01 kardeş kararması */ .sig-grid:hover .sig{opacity:.45} .sig-grid .sig:hover{opacity:1;transform:translate(-3px,-3px);box-shadow:10px 10px 0 rgba(160,118,47,.75)} /* ---------- rakam bandı (koyu, çift çerçeve, odometre) ---------- */ .numband{background:var(--esp);color:var(--cream);position:relative;padding-block:clamp(40px,5vw,64px)} .numband::before,.numband::after{ content:"";position:absolute;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(216,172,92,.5),transparent); } .numband::before{top:10px} .numband::after{bottom:10px} .numband .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px} .numband .n{display:flex;flex-direction:column;gap:4px;min-width:130px} .numband .n b{font-family:var(--serif);font-weight:460;font-size:clamp(36px,4.4vw,58px);line-height:1;color:var(--cream);font-variant-numeric:tabular-nums} .numband .n b i{font-style:italic;color:var(--brass2);font-size:.55em} .numband .n span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream3)} .numband .say{max-width:34ch;font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.5vw,20px);color:var(--cream2);line-height:1.5;border-left:2px solid var(--brass2);padding-left:18px} /* ---------- süreç: reçete hattı ---------- */ .rline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);padding-top:54px} .rline::before{ content:"";position:absolute;top:26px;left:4%;right:4%;height:2px; background:repeating-linear-gradient(90deg,var(--brass) 0 8px,transparent 8px 18px); transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e-text) .2s; } .rline.seen::before{transform:scaleX(1)} .rnode{display:flex;flex-direction:column;gap:10px;align-items:flex-start;position:relative} .rnode .dot{ position:absolute;top:-42px;left:calc(50% - 17px);width:34px;height:34px;border-radius:50%; background:var(--paper3);border:1px solid var(--ink);box-shadow:3px 3px 0 rgba(160,118,47,.7); display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-style:italic;font-size:14px;color:var(--appetite); transform:scale(0);transition:transform 400ms var(--e-kagit) calc(.3s + var(--ri,0)*.18s); } .rline.seen .rnode .dot{transform:scale(1)} .rnode .rimg{ width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;position:relative; border:1px solid var(--line); } .rnode .rimg .zoom{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 450ms var(--e-manidar)} .rnode:hover .rimg .zoom{transform:scale(1.06)} .rnode h3{font-family:var(--serif);font-weight:540;font-size:17.5px} .rnode p{font-size:13px;color:var(--ink2);line-height:1.55} /* ---------- sertifika: eğik plaket ---------- */ .certplak{ transform:rotate(-2deg);transition:transform 500ms var(--e-manidar); background:var(--paper3);border:1px solid var(--ink);border-radius:16px; box-shadow:10px 10px 0 rgba(160,118,47,.8);padding:clamp(16px,2vw,28px); } .certplak:hover{transform:rotate(0)} .certplak img{border-radius:8px;width:100%} .certplak .cap{font-size:11.5px;color:var(--ink3);text-align:center;margin-top:12px;letter-spacing:.06em} /* ---------- tek büyük alıntı rotatoru ---------- */ .bigq{position:relative;max-width:860px;margin-inline:auto;text-align:center;min-height:240px} .bq-item{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:20px; opacity:0;transform:translateY(12px);transition:opacity 500ms var(--eo-quart),transform 500ms var(--eo-quart); pointer-events:none; } .bq-item.on{opacity:1;transform:none;pointer-events:auto} .bq-item p{font-family:var(--serif);font-style:italic;font-weight:420;font-size:clamp(20px,2.6vw,31px);line-height:1.5} .bq-item .who{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink2)} .bq-item .who b{color:var(--ink)} .bq-nav{display:flex;gap:12px;justify-content:center;margin-top:26px} .bq-nav button{ width:44px;height:44px;border-radius:50%;border:1px solid var(--ink); background:var(--paper3);box-shadow:3px 3px 0 rgba(160,118,47,.7); display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink); transition:transform 200ms var(--e-kagit),box-shadow 200ms; } .bq-nav button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(160,118,47,.8)} .bq-nav button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(160,118,47,.7)} /* responsive */ @media (max-width:1020px){ .sig-grid{grid-template-columns:1fr 1fr} .sig.big{grid-column:1/-1;grid-row:auto} .rline{grid-template-columns:1fr 1fr;row-gap:56px} .rline::before{display:none} .rnode .dot{position:static;transform:scale(1);margin-bottom:2px} } @media (max-width:760px){ .wcard{box-shadow:5px 5px 0 rgba(160,118,47,.85)} .statstrip span{min-width:calc(50% - 5px);flex:none} .sig-grid{grid-template-columns:1fr;gap:14px} .sig-grid:hover .sig{opacity:1} .rline{grid-template-columns:1fr;padding-top:0;row-gap:26px} .rnode{flex-direction:row;gap:12px} .rnode .rimg{width:118px;flex:none;aspect-ratio:1} .rnode .dot{display:none} .numband .say{border-left:none;padding-left:0} .stroke-word{font-size:64px;bottom:auto;top:12vh} .bigq{min-height:300px} } @media (prefers-reduced-motion:reduce){ .rline::before{transform:scaleX(1)} .rnode .dot{transform:scale(1)} .certplak{transform:none} .sig-grid:hover .sig{opacity:1} } /* ---------- V23B: hero grid düzeltmesi + Aktif Bento (P04) + composer çipleri (P09) ---------- */ .hero .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);justify-content:stretch;align-items:end;gap:clamp(16px,2.4vw,34px)} .hero .container{position:relative;z-index:3} /* P09: öneri çipleri (composer hissi) */ .sugg{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .sugg button{ font-size:12px;font-weight:600;padding:7px 13px;border-radius:999px; border:1px solid var(--line);background:var(--paper);color:var(--ink2); transition:all 200ms var(--ease); } .sugg button:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-1px)} .sugg button.on{background:var(--ink);border-color:var(--ink);color:var(--paper3)} /* P04: Aktif Bento */ .bgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(120px,auto);gap:14px} .btile{ position:relative;border-radius:18px;overflow:hidden; background:var(--paper3);border:1px solid var(--line); padding:18px 20px;display:flex;flex-direction:column;gap:6px;justify-content:center; transition:transform 260ms cubic-bezier(.34,1.3,.5,1),box-shadow 260ms,border-color 260ms; } .btile:hover{transform:scale(1.02);border-color:var(--brass);box-shadow:var(--sh-card)} .btile .bl{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)} .btile .bv{font-family:var(--serif);font-weight:480;font-size:clamp(28px,2.8vw,42px);line-height:1.05;font-variant-numeric:tabular-nums} .btile .bd{font-size:12.5px;color:var(--ink2)} .btile .go2{position:absolute;right:14px;bottom:12px;color:var(--brass);opacity:0;transform:translateX(-6px);transition:220ms var(--e-kagit)} .btile:hover .go2{opacity:1;transform:none} .btile.media{padding:0;grid-column:span 2;grid-row:span 2;min-height:264px} .btile.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .btile.media::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,transparent 55%,rgba(15,10,5,.5))} .glasschip{ position:absolute;left:14px;bottom:14px;z-index:2; display:inline-flex;align-items:center;gap:8px; background:rgba(15,10,5,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(241,233,215,.28);color:var(--cream); border-radius:999px;padding:8px 16px;font-size:12px;letter-spacing:.04em; } .glasschip i{width:7px;height:7px;border-radius:50%;background:var(--appetite-2);animation:blink 1.8s infinite} .btile.dark{background:var(--esp2);border-color:var(--lined);color:var(--cream)} .btile.dark .bl{color:var(--cream3)} .btile.dark .bd{color:var(--cream2)} .btile.accent{background:var(--appetite);border-color:var(--appetite);color:#FFF6EE} .btile.accent .bl{color:rgba(255,246,238,.75)} .btile .spark{margin-top:6px;width:100%;height:34px} .btile .spark path{fill:none;stroke:var(--brass);stroke-width:2;stroke-linecap:round; stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 900ms var(--e-text) .2s} .btile:hover .spark path{stroke-dashoffset:0} @media (max-width:1020px){.bgrid{grid-template-columns:1fr 1fr}} @media (max-width:760px){ .bgrid{gap:10px} .btile.media{grid-column:1/-1;min-height:200px} .btile:hover{transform:none} } @media (prefers-reduced-motion:reduce){ .btile:hover{transform:none} .btile .spark path{stroke-dashoffset:0} .glasschip i{animation:none} } /* ========================================================================== V24 — HERO EMSAL KURGUSU: kartsız sol metin + koyu cam kayıt paneli + ince istatistik barı; odometre sağlamlaştırma ========================================================================== */ .hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(320px,420px);align-items:end;gap:clamp(20px,3vw,48px)} .hero .veil2{position:absolute;inset:0;z-index:1;background:radial-gradient(62% 72% at 20% 76%,rgba(15,10,5,.58),transparent 70%);pointer-events:none} /* sol: doğrudan video üstünde sinematik metin (P01 emsal standardı) */ .hero-copy3{color:var(--cream);max-width:640px;padding-bottom:4px} .hero-copy3 .eyebrow{color:var(--brass2);margin-bottom:18px} .hero-copy3 .display2{ font-family:var(--serif);font-weight:460;line-height:1.05;text-wrap:balance; font-size:clamp(36px,4.6vw,64px);letter-spacing:-.01em; } .hero-copy3 .display2 em{font-style:italic;color:var(--brass2)} .hero-copy3 .lead{color:var(--cream2);margin-top:16px;max-width:46ch;font-size:clamp(15px,1.2vw,17.5px)} .hero-copy3 .hero-ctas{margin-top:24px;gap:12px} /* sağ: kompakt koyu cam kayıt paneli (USLA satın alma rayı emsali) */ .hq3{ background:rgba(15,10,5,.55);backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid rgba(216,172,92,.35);border-radius:18px; padding:clamp(18px,1.8vw,26px);color:var(--cream); box-shadow:0 26px 60px -24px rgba(0,0,0,.65); } .hq3 .eyebrow{color:var(--brass2)} .hq3 .qtitle{font-family:var(--serif);font-weight:520;font-size:18px;color:var(--cream);margin-top:6px} .hq3 .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px} .hq3 input,.hq3 select{ font:inherit;font-size:13.5px;width:100%;color:var(--cream); background:rgba(241,233,215,.08);border:1px solid rgba(241,233,215,.22); border-radius:10px;padding:11px 13px;transition:border-color .2s,background .2s; } .hq3 input::placeholder{color:var(--cream3)} .hq3 select option{color:var(--ink);background:var(--paper3)} .hq3 input:focus,.hq3 select:focus{outline:none;border-color:var(--brass2);background:rgba(241,233,215,.13)} .hq3 .sugg button{background:transparent;border-color:rgba(241,233,215,.25);color:var(--cream2)} .hq3 .sugg button:hover{border-color:var(--brass2);color:var(--brass2)} .hq3 .sugg button.on{background:var(--brass2);border-color:var(--brass2);color:var(--esp)} .hq3 .btn{width:100%;justify-content:center;min-height:46px;margin-top:12px;font-size:14px} .hq3 .qnote{font-size:10.5px;color:var(--cream3);text-align:center;margin-top:9px} /* alt: tam genişlik ince istatistik barı (ilk onaylı meta bandının rafine hali) */ .hero-meta2{ grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center; background:rgba(15,10,5,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(241,233,215,.16);border-radius:16px; padding:13px clamp(16px,2vw,26px); } .hero-meta2 div{ display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--cream3);letter-spacing:.03em; padding-right:clamp(16px,2.6vw,36px);margin-right:clamp(16px,2.6vw,36px); border-right:1px solid rgba(241,233,215,.16); } .hero-meta2 div:last-child{border-right:none;margin-right:0;padding-right:0} .hero-meta2 b{font-family:var(--serif);font-weight:480;font-size:20px;color:var(--cream);font-variant-numeric:tabular-nums} /* odometre sağlamlaştırma (koyu bant + bento için) */ .odo{height:1em;line-height:1em;align-items:flex-start;vertical-align:baseline} .od-col,.od-strip,.od-strip span,.od-sep{line-height:1em} @media (max-width:1020px){ .hero .hero-grid{grid-template-columns:1fr} .hero-copy3{max-width:none} .hq3{max-width:none} } @media (max-width:760px){ .hero-meta2{padding:10px 14px} .hero-meta2 div{width:50%;border-right:none;margin:4px 0;padding:0} .hero-meta2 b{font-size:16px} } /* ========================================================================== V25 — tipografi yükseltmesi, tam-boy düzen, buğulu odak, ray okları, boyutsal arka planlar, görsel kırpma düzeltmeleri ========================================================================== */ :root{ /* aile tanımı yukarıdaki :root'ta (Fraunces / Plus Jakarta Sans) — burada tekrarlanmaz */ --max:1680px; --gut:clamp(18px,3vw,56px); } .display,.h1{font-weight:560;letter-spacing:-.005em} .h2{font-weight:600;letter-spacing:0} .h3,.sig h3,.mcard h3,.ccard h3{font-weight:600} .hero-copy3 .display2{font-weight:560} em.tone,.hero-copy3 .display2 em{font-weight:500} .section{padding-block:clamp(56px,6.6vw,108px)} /* görseller: daha az kırpma hissi, daha yumuşak zoom */ .sig:hover .ph .zoom,.mcard:hover .ph .zoom,.ccard:hover .ph .zoom, .step4:hover .ph .zoom,.rnode:hover .rimg .zoom,.fcard:hover .img{transform:scale(1.03)} .cdk:hover .img{transform:scale(1.03)} .sig .ph{aspect-ratio:16/10} .mcard .ph{aspect-ratio:4/3} /* BUĞULU ODAK: hover'daki netleşir, kardeşler buğulanır (fx-list-hover 2026) */ .sig,.cdk,.btile,.rail .mcard{transition-property:transform,box-shadow,border-color,opacity,filter} .sig-grid:hover .sig{opacity:.55;filter:blur(2px) saturate(.85)} .sig-grid .sig:hover{opacity:1;filter:none} .chefdeck:hover .cdk{opacity:.45;filter:blur(2px)} .chefdeck .cdk:hover{opacity:1;filter:none} .bgrid:hover .btile{opacity:.6;filter:blur(1.5px)} .bgrid .btile:hover{opacity:1;filter:none} /* boyutsal arka planlar: gradyan alanları güçlendi, hep hafif görünür */ .living::before{background:radial-gradient(closest-side,rgba(160,118,47,.2),transparent 70%)} .living::after{background:radial-gradient(closest-side,rgba(172,66,36,.14),transparent 70%)} .band-dark.living::before{background:radial-gradient(closest-side,rgba(216,172,92,.16),transparent 70%)} .band-dark.living::after{background:radial-gradient(closest-side,rgba(172,66,36,.18),transparent 70%)} .hoverglow{opacity:.35} .living:hover .hoverglow{opacity:1} /* ray okları: swipe'a eşlik eden kontroller (spec §10.5) */ .rail-ctl{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:4px} .rail-ctl .rail-progress{margin:0} .rail-ctl button{ width:42px;height:42px;border-radius:50%;flex:none; border:1px solid var(--ink);background:var(--paper3);color:var(--ink); box-shadow:3px 3px 0 rgba(160,118,47,.7);font-size:15px; display:flex;align-items:center;justify-content:center; transition:transform 200ms var(--e-kagit),box-shadow 200ms,opacity .2s; } .rail-ctl button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(160,118,47,.8)} .rail-ctl button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(160,118,47,.7)} .rail-ctl button.dim{opacity:.35;pointer-events:none} /* ayraç güvenlik payı */ .sec-div{margin-block:10px} @media (max-width:760px){ .sig-grid:hover .sig,.chefdeck:hover .cdk,.bgrid:hover .btile,.rail:hover .mcard{opacity:1;filter:none} .rail-ctl button{width:38px;height:38px} } @media (prefers-reduced-motion:reduce){ .sig-grid:hover .sig,.chefdeck:hover .cdk,.bgrid:hover .btile,.rail:hover .mcard{opacity:1;filter:none} } /* ========================================================================== V26 — Montserrat tipografi, 3D başlık derinliği, premium katmanlı gölgeler, "kaynayan durak" rozetleri (coin-flip + buhar) ========================================================================== */ :root{ /* aile tanımı yukarıdaki :root'ta — burada tekrarlanmaz */ --sh-card:0 1px 2px rgba(26,18,7,.06),0 10px 22px rgba(26,18,7,.09),0 32px 64px rgba(26,18,7,.12); } .display,.h1{font-weight:700;letter-spacing:-.018em} .h2{font-weight:650;letter-spacing:-.014em} .h3,.h4,.sig h3,.mcard h3,.ccard h3,.rnode h3,.cdk .meta b,.qtitle{font-weight:700} .hero-copy3 .display2{font-weight:700;letter-spacing:-.016em} em.tone,.hero-copy3 .display2 em{font-weight:600} .btn{font-weight:700} .eyebrow{font-weight:700} /* 3D başlık derinliği (2026 soft-extrude) */ .h2,.display,.h1{ text-shadow:0 1px 0 rgba(26,18,7,.10),0 2px 0 rgba(26,18,7,.07), 0 3px 0 rgba(26,18,7,.045),0 16px 30px rgba(26,18,7,.16); } .on-dark .h2,.on-dark .h1,.hero-copy3 .display2,.final .h1,.numband .n b{ text-shadow:0 1px 0 rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.35), 0 3px 0 rgba(0,0,0,.22),0 20px 44px rgba(0,0,0,.55); } /* premium katmanlı gölgeler: durağanda görünür, hover'da derinleşir */ .sig{box-shadow:0 2px 4px rgba(26,18,7,.05),6px 12px 26px rgba(26,18,7,.12),6px 6px 0 var(--line)} .sig-grid .sig:hover{box-shadow:0 6px 12px rgba(26,18,7,.08),16px 26px 52px rgba(26,18,7,.2),10px 10px 0 rgba(160,118,47,.75)} .mcard{box-shadow:0 2px 4px rgba(26,18,7,.04),0 10px 24px rgba(26,18,7,.08)} .mcard:hover{box-shadow:0 4px 8px rgba(26,18,7,.06),0 22px 48px rgba(26,18,7,.16)} .btile{box-shadow:0 1px 3px rgba(26,18,7,.05),0 8px 20px rgba(26,18,7,.07)} .bgrid .btile:hover{box-shadow:0 4px 10px rgba(26,18,7,.07),0 24px 52px rgba(26,18,7,.15)} .hq3{box-shadow:0 8px 20px rgba(0,0,0,.35),0 34px 80px -20px rgba(0,0,0,.7)} .certplak{box-shadow:0 6px 14px rgba(26,18,7,.1),14px 18px 40px rgba(26,18,7,.16),10px 10px 0 rgba(160,118,47,.8)} .cdk:hover{box-shadow:0 10px 20px rgba(0,0,0,.4),0 34px 70px -18px rgba(0,0,0,.85)} /* ---------- kaynayan durak rozetleri ---------- */ .rnode .dot{ transform:scale(1);background:transparent;border:none;box-shadow:none; width:40px;height:40px;left:calc(50% - 20px);top:-46px; perspective:400px;transition:none; animation:lid 6.5s ease-in-out calc(var(--ri,0)*1.5s) infinite; } .rline .rnode .dot{transform:scale(1)} .dfaces{ position:relative;width:100%;height:100%;transform-style:preserve-3d; transition:transform 550ms var(--e-kagit); } .rnode:hover .dfaces{transform:rotateY(180deg)} .dot i{ position:absolute;inset:0;border-radius:50%;backface-visibility:hidden; display:flex;align-items:center;justify-content:center;font-style:normal; background:var(--paper3);border:1px solid var(--ink); box-shadow:3px 3px 0 rgba(160,118,47,.7); font-weight:800;font-size:14px;color:var(--appetite); } .dot i.f2{transform:rotateY(180deg);background:var(--appetite);border-color:var(--appetite);color:#FFF6EE} .dot i.f2 svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* buhar tutamı: kapak zıplayınca yükselir */ .rnode .dot::after{ content:"";position:absolute;left:50%;top:-4px;width:5px;height:5px;border-radius:50%; background:rgba(26,18,7,.22);opacity:0;pointer-events:none; animation:puff 6.5s ease-out calc(var(--ri,0)*1.5s) infinite; } @keyframes lid{0%,78%,100%{transform:translateY(0)}82%{transform:translateY(-4px)}86%{transform:translateY(0)}} @keyframes puff{ 0%,80%{opacity:0;transform:translate(-50%,0) scale(.6)} 84%{opacity:.65} 100%{opacity:0;transform:translate(-50%,-16px) scale(1.7)} } /* hover halka nabzı */ .rnode:hover .dot::before{ content:"";position:absolute;inset:-5px;border-radius:50%; border:1px solid var(--appetite);opacity:0; animation:ringout .7s var(--e-text) forwards; } @keyframes ringout{from{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(1.35)}} @media (max-width:1020px){ .rnode .dot{position:static;margin-bottom:4px;animation:none} .rnode .dot::after{display:none} } @media (prefers-reduced-motion:reduce){ .rnode .dot{animation:none} .rnode .dot::after{display:none} .rnode:hover .dfaces{transform:none} .h2,.display,.h1,.on-dark .h2,.on-dark .h1{text-shadow:none} } /* ========================================================================== V27 — ŞEF SAHNESİ: sol büyük sahne + sağ isim listesi (hover/tık geçişli, 5sn otomatik akış + zamanlayıcı çizgisi) ========================================================================== */ .chefstage{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,3.4vw,56px);align-items:stretch} /* sol: sahne */ .cstage{position:relative;border-radius:22px;overflow:hidden;min-height:min(72vh,600px); border:1px solid var(--lined);box-shadow:0 10px 24px rgba(0,0,0,.45),0 40px 90px -20px rgba(0,0,0,.8)} .cframe{position:absolute;inset:0;opacity:0;transform:scale(1.05); transition:opacity 600ms var(--e-manidar),transform 900ms var(--e-manidar);pointer-events:none} .cframe.on{opacity:1;transform:scale(1);pointer-events:auto} .cframe .cimg{position:absolute;inset:0;background-size:cover;background-position:center 14%} .cframe::after{content:"";position:absolute;inset:0;background:linear-gradient(186deg,rgba(15,10,5,.05) 38%,rgba(15,10,5,.9) 96%)} .cframe .gno{ position:absolute;top:6px;right:16px;z-index:2;font-family:var(--serif);font-weight:800; font-size:clamp(80px,9vw,150px);line-height:1;color:transparent; -webkit-text-stroke:1px rgba(216,172,92,.35); } .cframe .cinfo{position:absolute;left:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);bottom:clamp(18px,2vw,28px);z-index:2;display:flex;flex-direction:column;gap:8px} .cframe .cinfo b{font-family:var(--serif);font-weight:800;font-size:clamp(24px,2.4vw,38px);color:var(--cream);line-height:1.1; text-shadow:0 2px 0 rgba(0,0,0,.4),0 16px 34px rgba(0,0,0,.6)} .cframe .cinfo i{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass2)} .cframe .cinfo .btn{align-self:flex-start;min-height:42px;padding:9px 20px;font-size:13px;margin-top:6px} /* zamanlayıcı çizgisi */ .ctimer{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;background:rgba(241,233,215,.15)} .ctimer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--brass2),var(--appetite-2)); transform:scaleX(0);transform-origin:left} .ctimer i.run{animation:ctick 5s linear forwards} @keyframes ctick{to{transform:scaleX(1)}} /* sağ: isim listesi */ .clist{display:flex;flex-direction:column;justify-content:center} .crow{ position:relative;display:grid;grid-template-columns:44px 1fr auto 34px;gap:14px;align-items:center; padding:clamp(14px,1.6vw,20px) 6px;border-bottom:1px solid var(--lined);cursor:pointer; transition:padding-left 300ms var(--e-manidar),background 300ms; } .crow::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:3px; background:linear-gradient(var(--brass2),var(--appetite-2));transform:scaleY(0); transition:transform 350ms var(--e-text)} .crow .ci{font-size:12px;color:var(--cream3);font-variant-numeric:tabular-nums} .crow .cn{font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.8vw,26px);color:var(--cream2);transition:color 250ms;line-height:1.2} .crow .cs{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream3);text-align:right} .crow .ca{width:32px;height:32px;border-radius:50%;border:1px solid var(--lined);display:flex;align-items:center;justify-content:center; color:var(--brass2);font-size:13px;opacity:0;transform:rotate(45deg);transition:300ms var(--e-kagit)} .crow:hover .cn{color:var(--cream)} .crow.on{padding-left:18px;background:linear-gradient(90deg,rgba(216,172,92,.08),transparent 70%)} .crow.on::before{transform:scaleY(1)} .crow.on .cn{color:var(--brass2)} .crow.on .ca{opacity:1;transform:rotate(0)} .clist .call{margin-top:18px;align-self:flex-start} @media (max-width:1020px){ .chefstage{grid-template-columns:1fr} .cstage{min-height:56vh} .crow .cs{display:none} } @media (max-width:760px){ .cstage{min-height:62vw;border-radius:16px} .cframe .gno{font-size:64px} .crow{grid-template-columns:34px 1fr 30px;padding:12px 4px} .crow .ca{width:28px;height:28px} } @media (prefers-reduced-motion:reduce){ .cframe{transition:opacity 150ms} .ctimer{display:none} } /* ========================================================================== V28 — ŞEF DESTESİ × LEZZET HARİTASI + akan kesikli hat Sol: 3D sürüklenebilir kart destesi · Sağ: pinli mutfak menşe haritası ========================================================================== */ /* reçete hattı: kesikli çizgi artık sürekli akıyor */ .rline.seen::before{animation:dashflow 1.1s linear infinite} @keyframes dashflow{to{background-position:26px 0}} .chefmap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3.4vw,56px);align-items:center} /* sol: 3D kart destesi */ .cstack{position:relative;height:min(64vh,540px);perspective:1200px} .c3{ position:absolute;inset:0;margin:auto;width:min(86%,370px);height:94%; border-radius:20px;overflow:hidden;border:1px solid var(--lined); background-size:cover;background-position:center 12%; box-shadow:0 8px 18px rgba(0,0,0,.45),0 34px 70px -18px rgba(0,0,0,.85); transition:transform 450ms var(--e-manidar),opacity 300ms; touch-action:none;user-select:none;cursor:grab; } .c3.dragging{transition:none;cursor:grabbing} .c3::after{content:"";position:absolute;inset:0;background:linear-gradient(186deg,rgba(15,10,5,.02) 46%,rgba(15,10,5,.85) 96%)} .c3 .nfo{position:absolute;left:16px;right:16px;bottom:14px;z-index:2} .c3 .nfo b{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(19px,1.9vw,26px);color:var(--cream);line-height:1.15; text-shadow:0 2px 0 rgba(0,0,0,.4),0 12px 26px rgba(0,0,0,.6)} .c3 .nfo i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass2)} .draghint{ position:absolute;top:-14px;left:50%;z-index:30; animation:hintbob 3s ease-in-out infinite; } @keyframes hintbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}} .stack-nav{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);z-index:30;display:flex;gap:10px} .stack-nav button{ width:40px;height:40px;border-radius:50%;border:1px solid rgba(216,172,92,.5); background:rgba(15,10,5,.6);backdrop-filter:blur(8px);color:var(--brass2);font-size:14px; display:flex;align-items:center;justify-content:center; transition:transform 200ms var(--e-kagit),background 200ms; } .stack-nav button:hover{transform:translateY(-2px);background:rgba(216,172,92,.28)} /* sağ: lezzet haritası */ /* --- MENŞE HARİTASI: vektör dünya + İstanbul merkezli rota yayları --- */ .cmap .mapbox{ position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1000/452.5; border:1px solid rgba(216,172,92,.18); background: radial-gradient(58% 130% at 60% 28%,rgba(160,118,47,.20),transparent 62%), radial-gradient(90% 120% at 22% 88%,rgba(172,66,36,.10),transparent 64%), linear-gradient(168deg,#181007,#0C0805 62%,#0A0604); box-shadow:inset 0 1px 0 rgba(241,233,215,.06),inset 0 0 90px rgba(0,0,0,.7), 0 22px 54px -20px rgba(0,0,0,.75); } /* kadraj kenarlarını yumuşat — harita panele gömülü dursun */ .cmap .mapbox::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(125% 135% at 50% 45%,transparent 60%,rgba(10,6,4,.52) 100%); } /* aktif şefin bölgesine yakınlaşan katman — wmap/rota/pinler burada, mlegend dışarıda kalır transform-origin sabit 0 0: JS merkezleme matematiğini (translate+scale) bu baz üzerinden hesaplar */ .cmap .mzoom{ position:absolute;inset:0; transform-origin:0 0; transition:transform 1000ms var(--eo-quart); will-change:transform; --mzinv:1; } .cmap .wmap{ position:absolute;inset:0;width:100%;height:100%;object-fit:fill; pointer-events:none;opacity:.92; } /* rota yayları */ .cmap .mroutes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3} .cmap .marc{ fill:none;stroke:var(--brass2);stroke-width:1.6;stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px rgba(216,172,92,.55)); stroke-dasharray:1000;stroke-dashoffset:1000;opacity:0; transition:opacity 400ms var(--eo-quart); } .cmap .marc.on{opacity:.9;animation:arcDraw 1100ms var(--eo-quart) forwards} @keyframes arcDraw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}} /* merkez (İstanbul) — sabit çapa */ .cmap .mhub{ position:absolute;width:9px;height:9px;border-radius:50%;z-index:4; transform:translate(-50%,-50%) scale(var(--mzinv,1));background:transparent; border:1.5px solid rgba(216,172,92,.75);box-shadow:0 0 12px rgba(216,172,92,.45); } .cmap .mhub::after{ content:"";position:absolute;inset:-5px;border-radius:50%; border:1px solid rgba(216,172,92,.28); } /* şef pinleri */ .pin{ position:absolute;width:9px;height:9px;border-radius:50%;z-index:5; background:rgba(216,172,92,.42);box-shadow:0 0 0 3px rgba(15,10,5,.55); transform:translate(-50%,-50%) scale(var(--mzinv,1)); transition:background 320ms,box-shadow 320ms,transform 320ms var(--e-kagit); } .pin.on{ background:var(--ember); box-shadow:0 0 0 3px rgba(15,10,5,.6),0 0 16px 3px rgba(172,66,36,.55); transform:translate(-50%,-50%) scale(var(--mzinv,1)) scale(1.3); } .pin.on::after{ content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--brass2); animation:ping 2s ease-out infinite; } @keyframes ping{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(2.3)}} .pin .plabel{ position:absolute;bottom:18px;left:50%;transform:translateX(-50%) translateY(6px) scale(.96); white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--cream); background:linear-gradient(180deg,rgba(30,20,10,.92),rgba(15,10,5,.92)); backdrop-filter:blur(10px);border:1px solid rgba(216,172,92,.42); padding:6px 13px;border-radius:999px;opacity:0;pointer-events:none; box-shadow:0 10px 26px -10px rgba(0,0,0,.9); transition:opacity 340ms var(--e-manidar),transform 340ms var(--e-manidar); } /* balonun ucu */ .pin .plabel::after{ content:"";position:absolute;left:50%;bottom:-4px;width:7px;height:7px; transform:translateX(-50%) rotate(45deg); background:rgba(15,10,5,.92);border-right:1px solid rgba(216,172,92,.42); border-bottom:1px solid rgba(216,172,92,.42); } .pin.on .plabel{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} /* sol alt künye */ .cmap .mlegend{ position:absolute;left:14px;bottom:12px;z-index:4;display:flex;align-items:center;gap:7px; font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:rgba(241,233,215,.5);pointer-events:none; } .cmap .mlegend i{width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(216,172,92,.75)} .cmap .cmeta{margin-top:18px;display:flex;flex-direction:column;gap:6px} .cmap .cmeta .route{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass2)} .cmap .cmeta b{font-family:var(--serif);font-weight:800;font-size:clamp(22px,2.2vw,32px);color:var(--cream)} .cmap .cmeta .desc{font-size:13.5px;color:var(--cream3);font-style:italic} .cmap .cmeta .lnk{margin-top:6px;align-self:flex-start} @media (max-width:1020px){ .chefmap{grid-template-columns:1fr;gap:44px} .cstack{height:min(120vw,460px)} } @media (prefers-reduced-motion:reduce){ .rline.seen::before{animation:none} .draghint{animation:none} .pin.on::after{animation:none;opacity:.5} .cmap .mzoom{transition:none} } /* ========================================================================== V29 — RAKAM BANDI PREMIUM: paralaks zemin, yumuşak kenar geçişleri, gölgeli çerçeve kartları, düzgün rakam boyutları ========================================================================== */ .numband{ position:relative;overflow:hidden;background:#0C0805; padding-block:clamp(72px,9vw,130px); } .numband .bgimg{position:absolute;inset:0;z-index:0} .numband .bgimg .plx{ position:absolute;inset:-14% 0;background-size:cover;background-position:center; opacity:.32;filter:saturate(.85) brightness(.9); } .numband .bgveil{position:absolute;inset:0;z-index:1; background:radial-gradient(70% 100% at 50% 50%,transparent 30%,rgba(12,8,5,.85) 100%)} /* üstten/alttan yumuşak erime (ayraç çakışması biter) */ .numband::before,.numband::after{ content:"";position:absolute;left:0;right:0;height:72px;z-index:2;background:none; } .numband::before{top:0;background:linear-gradient(180deg,var(--deck-bg,#ECE3D2),transparent)} .numband::after{bottom:0;background:linear-gradient(0deg,var(--deck-bg,#ECE3D2),transparent)} .numband .container{position:relative;z-index:3} .numband .row{align-items:stretch;gap:16px} /* istatistik çerçeve kartları */ .numband .n{ flex:1;min-width:168px;justify-content:center; background:rgba(241,233,215,.045);border:1px solid rgba(216,172,92,.22); border-radius:18px;padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,28px); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 2px 4px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(241,233,215,.08); transition:transform 350ms var(--e-manidar),border-color 350ms,box-shadow 350ms; } .numband .n:hover{ transform:translateY(-5px);border-color:rgba(216,172,92,.55); box-shadow:0 6px 10px rgba(0,0,0,.35),0 30px 60px rgba(0,0,0,.55),0 0 40px rgba(216,172,92,.12),inset 0 1px 0 rgba(241,233,215,.12); } .numband .n b{ font-size:clamp(42px,4.6vw,66px);display:flex;align-items:flex-start;gap:2px; } .numband .n b i{font-size:.48em;margin-top:.14em;color:var(--brass2)} /* KRİTİK DÜZELTME: odometre rakamları etiket kuralına yakalanmasın */ .numband .n b span,.numband .n b .odo,.numband .n b .od-col, .numband .n b .od-strip,.numband .n b .od-strip span,.numband .n b .od-sep{ font-size:inherit!important;letter-spacing:normal;text-transform:none;color:inherit; } .numband .n>span{font-size:11px;letter-spacing:.16em;margin-top:6px} /* alıntı: çerçeveli plaket */ .numband .say{ flex:1.2;min-width:260px;max-width:none;display:flex;align-items:center; background:rgba(241,233,215,.05);border:1px solid rgba(216,172,92,.28); border-left:3px solid var(--brass2);border-radius:16px; padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,30px); box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(241,233,215,.07); font-size:clamp(15px,1.3vw,18px); } @media (max-width:1020px){ .numband .row{flex-wrap:wrap} .numband .n{min-width:calc(50% - 8px)} .numband .say{min-width:100%} } @media (max-width:760px){ .numband{padding-block:56px} .numband .n{min-width:calc(50% - 8px);padding:16px} .numband .n b{font-size:34px} } @media (prefers-reduced-motion:reduce){ .numband .n:hover{transform:none} } /* ========================================================================== V30 — ŞEF AKORDEONU: dikey dilimler, seçili öne açılır (deste kaldırıldı) ========================================================================== */ .cacc{display:flex;gap:8px;height:min(62vh,540px)} .cacc .cs{ position:relative;flex:1;min-width:0;border-radius:16px;overflow:hidden;cursor:pointer; border:1px solid var(--lined); transition:flex 650ms var(--e-manidar),filter 450ms var(--e-manidar),border-color 350ms; } .cacc .cs .bg{ position:absolute;inset:0;background-size:cover;background-position:center 12%; transition:transform 700ms var(--e-manidar); } .cacc .cs::after{ content:"";position:absolute;inset:0; background:linear-gradient(186deg,rgba(15,10,5,.04) 44%,rgba(15,10,5,.88) 97%); } .cacc .cs{filter:grayscale(.55) brightness(.6)} .cacc .cs.on{flex:3.4;filter:none;border-color:rgba(216,172,92,.5); box-shadow:0 10px 22px rgba(0,0,0,.4),0 34px 70px -16px rgba(0,0,0,.8)} .cacc .cs.on .bg{transform:scale(1.04)} /* pasif dilim: dikey isim */ .cacc .cs .vname{ position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2; writing-mode:vertical-rl;rotate:180deg;white-space:nowrap; font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--cream2);opacity:1;transition:opacity 300ms; } .cacc .cs.on .vname{opacity:0} /* aktif dilim: künye */ .cacc .cs .nfo{ position:absolute;left:16px;right:16px;bottom:14px;z-index:2; opacity:0;transform:translateY(10px); transition:opacity 400ms var(--e-manidar) 180ms,transform 400ms var(--e-manidar) 180ms; } .cacc .cs.on .nfo{opacity:1;transform:none} .cacc .cs .nfo b{display:block;font-family:var(--serif);font-weight:800; font-size:clamp(17px,1.7vw,24px);color:var(--cream);line-height:1.15;white-space:nowrap; text-shadow:0 2px 0 rgba(0,0,0,.4),0 12px 26px rgba(0,0,0,.6)} .cacc .cs .nfo i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--brass2);white-space:nowrap} /* zamanlayıcı: aktif dilimin üst kenarında dolar */ .cacc .cs .tline{position:absolute;top:0;left:0;right:0;height:3px;z-index:3; background:rgba(241,233,215,.14);opacity:0;transition:opacity .3s} .cacc .cs.on .tline{opacity:1} .cacc .cs .tline i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left; background:linear-gradient(90deg,var(--brass2),var(--appetite-2))} .cacc .cs.on .tline i.run{animation:ctick 5s linear forwards} @media (max-width:1020px){ .cacc{height:min(70vw,420px)} } @media (max-width:760px){ .cacc{flex-direction:column;height:auto;gap:6px} .cacc .cs{height:112px;flex:none;transition:height 500ms var(--e-manidar),filter 400ms} .cacc .cs.on{height:300px;flex:none} .cacc .cs .vname{writing-mode:horizontal-tb;rotate:0deg;left:18px;bottom:auto;top:50%; transform:translateY(-50%);font-size:15px;letter-spacing:.18em} } @media (prefers-reduced-motion:reduce){ .cacc .cs,.cacc .cs .bg{transition:none} .cacc .cs .tline{display:none} } /* v30b — künye satırı: yuvarlak dönen medya + metin sütunu */ .cmap .cmeta{flex-direction:row;align-items:center;gap:18px} .cmap .cmeta .ctxt{display:flex;flex-direction:column;gap:6px;min-width:0} .cvid{position:relative;width:80px;height:80px;flex:none;border-radius:50%} .cvid .cvimg{ position:absolute;inset:5px;border-radius:50%; background-size:cover;background-position:center 14%; transition:background-image 300ms; box-shadow:0 8px 20px rgba(0,0,0,.5); } .cvid::after{ content:"";position:absolute;inset:0;border-radius:50%; border:1.5px dashed rgba(216,172,92,.6); animation:sealSpin 14s linear infinite; } .cvid::before{ content:"";position:absolute;inset:-6px;border-radius:50%; border:1px solid rgba(216,172,92,.18); } @media (max-width:760px){ .cvid{width:62px;height:62px} .cmap .cmeta{gap:14px} } @media (prefers-reduced-motion:reduce){ .cvid::after{animation:none} } /* ========================================================================== V31 — İNTERAKTİF SERTİFİKA: doldur, mühürle, gör + gradyanlı adım tablosu + premium logo şeridi ========================================================================== */ .certx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,3.4vw,56px);align-items:start} /* ---------- interaktif belge ---------- */ .icert{position:relative} .ipaper{ position:relative;background:#FDFAF2;border:1px solid var(--ink);border-radius:10px; padding:clamp(26px,3vw,44px) clamp(22px,2.6vw,40px) clamp(70px,7vw,90px); box-shadow:0 4px 10px rgba(26,18,7,.08),14px 20px 46px rgba(26,18,7,.16),10px 10px 0 rgba(160,118,47,.75); transform:rotate(-1.2deg);transition:transform 500ms var(--e-manidar);overflow:hidden; } .icert:hover .ipaper{transform:rotate(0)} .ipaper::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(160,118,47,.5);border-radius:6px;pointer-events:none} .ipaper::after{ content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%; background:linear-gradient(105deg,transparent,rgba(255,250,235,.9),transparent); transform:skewX(-16deg);pointer-events:none;opacity:0; } .icert.stamped .ipaper::after{animation:certshine 900ms var(--e-manidar) 250ms forwards} @keyframes certshine{0%{opacity:1;left:-40%}100%{opacity:0;left:120%}} .icert.stamped .ipaper{animation:papershake 380ms var(--e-kagit) 120ms} @keyframes papershake{0%,100%{transform:rotate(0)}30%{transform:rotate(.6deg) translateY(2px)}60%{transform:rotate(-.4deg)}} .ipaper .ic-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px} .ipaper .ic-brand img{height:34px;width:auto} .ipaper .ic-uni{text-align:center;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)} .ipaper .ic-title{ text-align:center;font-family:var(--serif);font-weight:800;letter-spacing:.08em; font-size:clamp(17px,1.7vw,23px);margin:14px 0 4px;color:var(--ink); } .ipaper .ic-sub{text-align:center;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:18px} .ipaper .ic-say{text-align:center;font-size:12px;color:var(--ink3);letter-spacing:.1em} .ic-name{ display:block;width:min(320px,86%);margin:6px auto 14px;text-align:center; font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(20px,2vw,27px); color:var(--ink);background:transparent;border:none;border-bottom:2px dashed rgba(160,118,47,.55); padding:4px 8px;outline:none;caret-color:var(--appetite);transition:border-color .2s; } .ic-name:focus{border-bottom-color:var(--appetite)} .ic-name::placeholder{color:rgba(26,18,7,.3);font-weight:400} .ipaper .ic-body{text-align:center;font-size:13.5px;color:var(--ink2);max-width:46ch;margin:0 auto;line-height:1.6} .ipaper .ic-body .ic-prog{font-weight:800;color:var(--ink)} .ic-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0 4px} .ic-chips button{ font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:999px; border:1px solid var(--line);background:var(--paper);color:var(--ink2); transition:all 200ms var(--ease); } .ic-chips button:hover{border-color:var(--brass);color:var(--brass)} .ic-chips button.on{background:var(--ink);border-color:var(--ink);color:var(--paper3)} .ipaper .ic-foot{ position:absolute;left:clamp(22px,2.6vw,40px);right:clamp(22px,2.6vw,40px);bottom:18px; display:flex;justify-content:space-between;align-items:flex-end;font-size:10.5px;color:var(--ink3); } .ic-qr{ width:44px;height:44px;border:1px solid var(--ink);border-radius:4px;padding:4px; opacity:0;transform:scale(.7);transition:opacity 400ms var(--e-kagit) 500ms,transform 400ms var(--e-kagit) 500ms; background: repeating-linear-gradient(0deg,var(--ink) 0 3px,transparent 3px 6px), repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 7px); background-clip:content-box; } .icert.stamped .ic-qr{opacity:1;transform:scale(1)} .ic-seal{ position:absolute;right:clamp(20px,2.4vw,38px);bottom:52px;width:88px;height:88px;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; font-weight:800;font-size:15px;color:var(--appetite); border:2.5px solid var(--appetite); background:radial-gradient(circle at 35% 30%,rgba(160,118,47,.16),rgba(160,118,47,.04)); opacity:0;transform:scale(2.4) rotate(-28deg);pointer-events:none; } .ic-seal small{font-size:7px;letter-spacing:.14em;font-weight:700} .icert.stamped .ic-seal{animation:stampin 520ms var(--e-kagit) forwards} @keyframes stampin{ 0%{opacity:0;transform:scale(2.4) rotate(-28deg)} 55%{opacity:1;transform:scale(.9) rotate(-7deg)} 75%{transform:scale(1.06) rotate(-10deg)} 100%{opacity:1;transform:scale(1) rotate(-9deg)} } .ic-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px} .ic-after{display:none;text-align:center;flex-direction:column;align-items:center;gap:10px} .icert.stamped .ic-stamp{display:none} .icert.stamped .ic-after{display:flex;animation:fadeUp 500ms var(--ease-in) 400ms both} .ic-after .joke{font-size:13px;color:var(--ink2);font-style:italic;max-width:44ch} /* ---------- gradyanlı adım tablosu ---------- */ .steps3{display:flex;flex-direction:column;gap:16px;position:relative} .steps3::before{ content:"";position:absolute;left:39px;top:30px;bottom:30px;width:2px; background:repeating-linear-gradient(180deg,rgba(160,118,47,.5) 0 6px,transparent 6px 14px); } .st3{ position:relative;border-radius:18px;padding:20px 22px 20px 78px; background:linear-gradient(140deg,#FCF8EF,#F0E6D3); border:1px solid var(--line); box-shadow:0 2px 4px rgba(26,18,7,.05),0 14px 32px rgba(26,18,7,.1); transition:transform 350ms var(--e-manidar),box-shadow 350ms,border-color 350ms; } .st3:hover{ transform:translateX(8px);border-color:rgba(160,118,47,.5); box-shadow:0 6px 12px rgba(26,18,7,.07),0 26px 54px rgba(26,18,7,.16),0 0 34px rgba(216,172,92,.14); } .st3 .num{ position:absolute;left:16px;top:50%;transform:translateY(-50%); width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:17px;color:#FFF6EE; background:linear-gradient(140deg,var(--brass2),var(--appetite)); box-shadow:0 8px 20px rgba(160,118,47,.4),inset 0 1px 0 rgba(255,255,255,.45); transition:transform 300ms var(--e-kagit); } .st3:hover .num{transform:translateY(-50%) scale(1.12) rotate(-6deg)} .st3 b{display:block;font-family:var(--serif);font-weight:800;font-size:16.5px;margin-bottom:3px} .st3 p{font-size:13.5px;color:var(--ink2);line-height:1.55} /* ---------- premium logo şeridi ---------- */ .lstrip{ margin-top:clamp(30px,3.6vw,52px);border:1px solid var(--line);border-radius:20px; background:linear-gradient(140deg,#FBF7EE,#F2E9D8); box-shadow:0 2px 4px rgba(26,18,7,.04),0 16px 40px rgba(26,18,7,.09); padding:clamp(18px,2.2vw,28px) clamp(18px,2.4vw,34px); display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap; } .lstrip .ltitle{ font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--brass); padding-right:clamp(14px,2vw,26px);border-right:1px solid var(--line);flex:none; } .lstrip .ltiles{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;flex:1;justify-content:space-between} .ltile{ height:58px;min-width:96px;flex:1;display:flex;align-items:center;justify-content:center; background:var(--paper3);border:1px solid var(--line);border-radius:12px;padding:10px 16px; animation:lglow 7.2s ease-in-out var(--ld,0s) infinite; } .ltile img{max-height:30px;max-width:110px;width:auto;filter:grayscale(1) contrast(.75) opacity(.55);transition:filter 400ms} .ltile span{font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.04em;text-align:center} @keyframes lglow{ 0%,14%,100%{border-color:var(--line);box-shadow:none;transform:translateY(0)} 6%{border-color:rgba(160,118,47,.65);box-shadow:0 10px 26px rgba(160,118,47,.2),0 0 0 3px rgba(160,118,47,.08);transform:translateY(-3px)} } .ltile:hover img{filter:grayscale(0) contrast(1) opacity(1)} @media (max-width:1020px){ .certx{grid-template-columns:1fr} .lstrip .ltitle{border-right:none;width:100%;padding:0 0 8px} } @media (max-width:760px){ .ipaper{padding-bottom:96px} .ic-seal{width:70px;height:70px;font-size:12px;bottom:60px} .st3{padding-left:70px} .ltile{min-width:calc(33% - 8px)} } @media (prefers-reduced-motion:reduce){ .ltile{animation:none} .icert.stamped .ic-seal{animation:none;opacity:1;transform:scale(1) rotate(-9deg)} .icert.stamped .ipaper{animation:none} } /* ========================================================================== V32 — GÖLGE DENETİMİ: hiçbir gölge keskin bitmez, iz bırakmaz + ray kırpılması düzeltmesi + tutamaç çizgileri kaldırıldı ========================================================================== */ /* raylar: kart gölgelerine nefes payı (kırpılma çizgisi biter) */ .rail{padding-top:28px;padding-bottom:36px;margin-top:-20px;margin-bottom:-16px} /* kart tutamaç çizgisi kaldırıldı (hover'da beliren o çizgi) */ .mcard .mbody::before{display:none} .mcard .mbody{padding-top:18px} /* kart görsel gradyanı: sert başlangıç yok, tamamen eriyerek */ .mcard .ph::after{ background:linear-gradient(180deg,transparent 30%,rgba(15,10,5,.06) 55%,rgba(15,10,5,.34) 100%); } .sig .ph::after{ background:linear-gradient(185deg,transparent 40%,rgba(26,18,7,.05) 62%,rgba(26,18,7,.34) 100%); } /* sert ofset gölgeler → eriyerek biten katmanlı yumuşak gölgeler */ .sig{box-shadow:0 2px 6px rgba(26,18,7,.05),0 14px 30px rgba(26,18,7,.09),0 36px 72px -20px rgba(26,18,7,.14)} .sig-grid .sig:hover{box-shadow:0 6px 14px rgba(26,18,7,.07),0 26px 54px rgba(26,18,7,.14),0 64px 120px -32px rgba(160,118,47,.38)} .certplak{box-shadow:0 4px 10px rgba(26,18,7,.06),0 22px 48px rgba(26,18,7,.12),0 64px 130px -42px rgba(160,118,47,.4)} .ipaper{box-shadow:0 4px 10px rgba(26,18,7,.06),0 22px 48px rgba(26,18,7,.12),0 64px 130px -42px rgba(160,118,47,.42)} .sig .tag{box-shadow:0 6px 16px rgba(26,18,7,.28)} .rail-ctl button,.bq-nav button{box-shadow:0 3px 8px rgba(26,18,7,.12),0 12px 26px rgba(26,18,7,.14)} .rail-ctl button:hover,.bq-nav button:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(26,18,7,.12),0 20px 40px rgba(26,18,7,.18)} .rail-ctl button:active,.bq-nav button:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(26,18,7,.14)} .dot i{box-shadow:0 4px 12px rgba(26,18,7,.16),0 12px 26px rgba(160,118,47,.28)} .statstrip span,.wcard{box-shadow:0 4px 12px rgba(26,18,7,.1),0 16px 36px rgba(26,18,7,.12)} .stack-nav button{box-shadow:0 6px 16px rgba(0,0,0,.35)} .cvid .cvimg{box-shadow:0 6px 18px rgba(0,0,0,.45),0 18px 40px -10px rgba(0,0,0,.5)} .st3:hover{box-shadow:0 6px 14px rgba(26,18,7,.06),0 28px 58px rgba(26,18,7,.13),0 0 44px rgba(216,172,92,.12)} .spot.seansbox{box-shadow:0 4px 10px rgba(26,18,7,.07),0 18px 40px rgba(26,18,7,.13)!important} /* akordeon aktif dilim: yumuşak derin */ .cacc .cs.on{box-shadow:0 8px 18px rgba(0,0,0,.32),0 36px 80px -18px rgba(0,0,0,.65)} /* logo şeridi parlaması: halka izi yerine yumuşak hale */ @keyframes lglow{ 0%,14%,100%{border-color:var(--line);box-shadow:0 0 0 rgba(160,118,47,0);transform:translateY(0)} 6%{border-color:rgba(160,118,47,.55);box-shadow:0 14px 34px -6px rgba(160,118,47,.35);transform:translateY(-3px)} } /* ========================================================================== V33 — CAM DERİNLİK KATMANI: yarı saydam yüzeyler + blur + iç ışık kenarı (tablolar, kartlar, butonlar — tema geneli premium derinlik) ========================================================================== */ /* açık yüzeyli tablo/kartlar: arkadaki ışık alanları cam ardından görünür */ .sig,.mcard,.btile,.ccard,.quote,.buy-panel,.svc,.keyfacts div{ background:rgba(251,247,238,.66); backdrop-filter:blur(14px) saturate(1.12); -webkit-backdrop-filter:blur(14px) saturate(1.12); border-color:rgba(26,18,7,.12); } .sig .body,.mcard .mbody,.ccard .body{background:transparent} .st3{ background:linear-gradient(140deg,rgba(252,248,239,.72),rgba(240,230,211,.6)); backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1); } .lstrip{ background:linear-gradient(140deg,rgba(251,247,238,.6),rgba(242,233,216,.5)); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); } .ltile{background:rgba(251,247,238,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} /* iç ışık kenarı: cam yüzeyin üst dudağı parlar (derinlik imzası) */ .sig{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 6px rgba(26,18,7,.05),0 14px 30px rgba(26,18,7,.09),0 36px 72px -20px rgba(26,18,7,.14)} .sig-grid .sig:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 14px rgba(26,18,7,.07),0 26px 54px rgba(26,18,7,.14),0 64px 120px -32px rgba(160,118,47,.38)} .mcard{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(26,18,7,.04),0 10px 24px rgba(26,18,7,.08)} .mcard:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 8px rgba(26,18,7,.06),0 22px 48px rgba(26,18,7,.15)} .btile{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 3px rgba(26,18,7,.05),0 8px 20px rgba(26,18,7,.07)} .st3{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 4px rgba(26,18,7,.05),0 14px 32px rgba(26,18,7,.09)} .quote{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--sh-card)} .buy-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--sh-card)} /* butonlar: ikinciller cam, birincil iç ışık + yumuşak hale */ .btn-line{ background:rgba(251,247,238,.42); backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1); border-color:rgba(26,18,7,.18); } .on-dark .btn-line,.hero .btn-line,.final .btn-line{ background:rgba(15,10,5,.32); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .btn-brass{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(160,118,47,.28),0 18px 40px -10px rgba(160,118,47,.35); } .btn-brass:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px rgba(160,118,47,.3),0 26px 54px -12px rgba(160,118,47,.42)} .btn-solid{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px rgba(26,18,7,.22),0 18px 40px -12px rgba(26,18,7,.3)} .rail-ctl button,.bq-nav button{ background:rgba(251,247,238,.6); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } /* çipler: cam hap */ .chip,.sugg button,.ic-chips button{ background:rgba(251,247,238,.5); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .chip.on,.sugg button.on,.ic-chips button.on{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none} .hq3 .sugg button{background:rgba(241,233,215,.07)} /* koyu banttaki kartlar zaten cam — iç ışık dudağı ekle */ .numband .n,.hq3,.hero-meta2{box-shadow:inset 0 1px 0 rgba(241,233,215,.14),0 8px 20px rgba(0,0,0,.32),0 30px 70px -20px rgba(0,0,0,.6)} /* performans ve erişilebilirlik korumaları */ @media (max-width:760px){ .sig,.mcard,.btile,.ccard,.quote,.buy-panel,.svc,.keyfacts div,.st3,.lstrip,.ltile{ backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } } @media (prefers-reduced-transparency: reduce){ .sig,.mcard,.btile,.ccard,.quote,.buy-panel,.svc,.keyfacts div,.st3,.lstrip,.ltile, .btn-line,.chip,.sugg button,.ic-chips button,.rail-ctl button,.bq-nav button{ background:var(--paper3);backdrop-filter:none;-webkit-backdrop-filter:none; } } /* ========================================================================== V34 — İMZA PROGRAMLAR: KEMER YELPAZESİ Kartlar desteden yelpaze gibi açılır; hover'daki dikleşip öne gelir ========================================================================== */ /* Geometri tek yerden: her kart --n (=-2..2 sıra) ve --a (=|n|) alır; konum bunlardan türetilir. Böylece yelpazenin toplam eni hesaplanabilir kalır ve sütun dışına (solda kırpılma, sağda panele binme) taşmaz. */ .fan{ position:relative;height:min(52vh,444px);margin-top:6px; --cw:clamp(158px,14.2vw,232px); /* kart genişliği — 5 kart sütuna sığacak ölçü */ --step:.40; /* komşu kartlar arası kayma — her kartın ~%43'ü açıkta */ --ang:7deg; /* kart başına eğim (dış kartlar 14°) */ --drop:26px; /* dışa doğru alçalma (yay hissi) */ } .fanit{ position:absolute;left:50%;bottom:52px; width:var(--cw);aspect-ratio:3/4.15; border-radius:18px;overflow:hidden;display:block; border:1px solid rgba(26,18,7,.14); transform-origin:50% 100%; transform:translateX(-50%) translateY(64px) scale(.88); opacity:0; transition:transform 760ms var(--e-manidar) var(--fd,0s),opacity 520ms var(--eo-quart) var(--fd,0s), box-shadow 400ms var(--e-manidar),filter 400ms var(--e-manidar); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 10px rgba(26,18,7,.08),0 22px 48px rgba(26,18,7,.14); z-index:var(--z,1); } /* desteden yelpazeye: ortadan başlayıp kanatlara doğru açılır (--fd) */ .seen .fanit{ opacity:1; transform: translateX(calc(-50% + var(--n,0) * var(--cw) * var(--step))) translateY(calc(var(--a,0) * var(--drop))) rotate(calc(var(--n,0) * var(--ang))) scale(var(--s,1)); } .fanit .fimg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 600ms var(--e-manidar),filter 500ms} .fanit::after{content:"";position:absolute;inset:0;background:linear-gradient(184deg,transparent 42%,rgba(15,10,5,.12) 62%,rgba(15,10,5,.78) 100%)} .fanit .fbar{ position:absolute;left:10px;right:10px;bottom:10px;z-index:2; background:rgba(15,10,5,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(241,233,215,.16);border-radius:12px;padding:10px 13px; display:flex;flex-direction:column;gap:2px; } .fanit .fbar .fk{font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brass2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fanit .fbar b{font-family:var(--serif);font-weight:800;font-size:14.5px;color:var(--cream);line-height:1.2} .fanit .fbar .fp{font-family:var(--serif);font-weight:700;font-size:13px;color:var(--appetite-2);font-variant-numeric:tabular-nums} .fanit .ftag{ position:absolute;top:10px;left:10px;z-index:2;font-size:9px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:#FFF6EE;background:var(--appetite); padding:5px 11px;border-radius:999px;box-shadow:0 6px 16px rgba(160,118,47,.4); } /* hover: kart yerinde dikleşip yükselir — yeri değişmez, kardeşler kısılır */ .fan:hover .fanit{filter:saturate(.72) brightness(.8)} .seen .fan .fanit:hover,.fan .fanit:hover{ transform: translateX(calc(-50% + var(--n,0) * var(--cw) * var(--step))) translateY(calc(var(--a,0) * var(--drop) - 30px)) rotate(calc(var(--n,0) * var(--ang) * .22)) scale(calc(var(--s,1) * 1.1)); z-index:10;filter:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px rgba(26,18,7,.12),0 44px 90px -18px rgba(160,118,47,.42); } .fan .fanit:hover .fimg{transform:scale(1.05)} @media (max-width:1020px){ .fan{height:auto;display:grid;grid-auto-flow:column;grid-auto-columns:62%;gap:12px; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 4px 20px} .fan::-webkit-scrollbar{display:none} .fanit,.seen .fanit{position:relative;left:auto;bottom:auto;transform:none;opacity:1; width:auto;scroll-snap-align:center} .fan:hover .fanit{filter:none} } @media (max-width:760px){ .fan{grid-auto-columns:74%} } @media (prefers-reduced-motion:reduce){ .fanit,.seen .fanit,.fan .fanit.act,.fan .fanit:hover{ opacity:1;transition:none; transform: translateX(calc(-50% + var(--n,0) * var(--cw) * var(--step))) translateY(calc(var(--a,0) * var(--drop))) rotate(calc(var(--n,0) * var(--ang))) scale(var(--s,1)); } } /* v34b — 21:9 seans bandı + logo yedek kaynak boyutu */ .wide21{ position:relative;aspect-ratio:21/9;border-radius:20px;overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(26,18,7,.08),0 30px 64px -18px rgba(26,18,7,.2); border:1px solid rgba(26,18,7,.12); } .wide21 .plx{position:absolute;inset:-10% 0;background-size:cover;background-position:center} .seansrow{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,3.4vw,60px);align-items:start;margin-top:clamp(22px,2.8vw,40px); } @media (max-width:1020px){ .seansrow{grid-template-columns:1fr;gap:22px} .wide21{aspect-ratio:16/9} } .ltile img[src*="s2/favicons"]{max-height:34px;filter:grayscale(1) opacity(.6)} .ltile:hover img[src*="s2/favicons"]{filter:grayscale(0) opacity(1)} /* ========================================================================== V35 — ŞEF BÖLÜMÜ: tek kontrolcü (.chefzone) + geniş portre dilimler ========================================================================== */ .chefzone{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(24px,3vw,52px);align-items:center} /* dilimler: uzun çubuk değil, geniş portre */ .chefzone .cacc{height:min(48vh,430px);gap:10px} .chefzone .cacc .cs{border-radius:18px;filter:grayscale(.45) brightness(.68)} .chefzone .cacc .cs.on{flex:2.6} .chefzone .cacc .cs.on .bg{transform:scale(1.06)} .chefzone .cacc .cs:hover{filter:grayscale(.15) brightness(.85)} .chefzone .cacc .cs.on:hover .bg,.chefzone .cacc .cs.on .bg{transform:scale(1.06)} .chefzone .cacc .cs .bg{background-position:center 10%} @media (max-width:1020px){ .chefzone{grid-template-columns:1fr;gap:36px} .chefzone .cacc{height:min(62vw,380px)} } @media (max-width:760px){ .chefzone .cacc{flex-direction:column;height:auto;gap:6px} .chefzone .cacc .cs{height:112px;flex:none} .chefzone .cacc .cs.on{height:280px;flex:none} } /* V36 — mühürde gerçek logo + çalışan QR */ .ic-seal{gap:4px;padding:10px} .ic-seal img{width:58%;height:auto;display:block} .ic-seal small{font-size:7.5px;letter-spacing:.16em;font-weight:800} .ic-qr{background:none;padding:3px;overflow:hidden;background-color:#fff} .ic-qr img{width:100%;height:100%;display:block;image-rendering:pixelated} /* V37 — logo şeridi: sırası gelen RENKLENİR + altta kurum adı */ .ltile{flex-direction:column;gap:7px;height:auto;min-height:82px;padding:12px 14px;justify-content:center} .ltile img{animation:lcolor 7.2s ease-in-out var(--ld,0s) infinite} @keyframes lcolor{ 0%,14%,100%{filter:grayscale(1) contrast(.75) opacity(.55)} 6%{filter:grayscale(0) contrast(1) opacity(1)} } .ltile em{ font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--ink3);white-space:nowrap; animation:lname 7.2s ease-in-out var(--ld,0s) infinite; } @keyframes lname{ 0%,14%,100%{color:var(--ink3)} 6%{color:var(--brass)} } .ltile:hover img{filter:grayscale(0) contrast(1) opacity(1);animation-play-state:paused} .ltile:hover em{color:var(--brass);animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .ltile img,.ltile em{animation:none} .ltile img{filter:grayscale(.3) opacity(.85)} } /* V38 — kayan gövde bütünlüğü: gövde kendi buzlu plakasıyla taşınır */ .mcard .mbody{ background:rgba(251,247,238,.9); backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1); box-shadow:0 -8px 24px -8px rgba(26,18,7,.14); padding-top:16px; } .mcard .mbody .cat{padding-top:0} .ccard .body{ background:rgba(251,247,238,.92); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 -8px 20px -8px rgba(26,18,7,.12); } .sig .body{ background:rgba(251,247,238,.55); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } @media (prefers-reduced-transparency: reduce){ .mcard .mbody,.ccard .body,.sig .body{background:var(--paper3);backdrop-filter:none;-webkit-backdrop-filter:none} } /* ========================================================================== V39 — RESPONSIVE SERTLEŞTİRME: tüm yeni organlar, tüm kırılımlar, zoom in/out akışkanlığı, taşma/kaybolma sıfır ========================================================================== */ /* global taşma sigortası */ .hero,.deck,.page-main{overflow-x:clip} img,video{max-width:100%} /* dinamik viewport birimleri (mobil araç çubukları) */ .cacc{height:min(48svh,430px)} .cstage{min-height:min(72svh,600px)} .fan{height:min(52svh,444px)} /* ---- 1280-1440 arası: yelpaze sıkışmasın ---- */ @media (max-width:1280px){ .fan{--drop:22px} .hero-copy3 .display2{font-size:clamp(32px,4vw,54px)} .numband .n b{font-size:clamp(36px,4vw,54px)} } /* ---- 1020 altı: yapılar zaten dönüşüyor; ölçü rötuşları ---- */ @media (max-width:1020px){ .certx{gap:32px} .icert{max-width:640px;margin-inline:auto} .steps3::before{left:39px} .bigq{min-height:300px} .stroke-word{font-size:clamp(60px,11vw,110px)} .hero .hq3{margin-top:4px} } /* ---- 760 altı: mobil özel düzenler ---- */ @media (max-width:760px){ .stroke-word{display:none} /* mobilde başlıkla çakışma riski sıfırlandı */ .hero .container{padding-top:104px;padding-bottom:24px} .hero-copy3 .display2{font-size:clamp(30px,9vw,40px)} .hero-copy3 .hero-ctas .btn{flex:1 1 auto;justify-content:center} .hq3{padding:16px} .hq3 .qgrid{grid-template-columns:1fr} .hero-meta2 b{font-size:15px} .fan{grid-auto-columns:76%;padding-bottom:16px} .fanit .fbar b{font-size:13.5px} .numband .say{font-size:14.5px;padding:16px} .numband .n{padding:14px} .numband .n b{font-size:30px} .chefzone .cacc .cs .nfo b{font-size:15px;white-space:normal} .cmap .mapbox{aspect-ratio:1000/470} .pin .plabel{font-size:10px;padding:5px 10px} .cmap .cmeta b{font-size:20px} .ipaper{padding:20px 16px 96px} .ipaper .ic-title{font-size:15px;letter-spacing:.05em} .ic-name{width:100%;font-size:19px} .ic-chips button{font-size:10.5px;padding:6px 10px} .ic-foot{flex-direction:column;align-items:flex-start;gap:10px} .ic-qr{align-self:flex-end;margin-top:-34px} .ic-seal{right:14px;bottom:88px} .lstrip{padding:14px} .wide21{border-radius:14px} .wide21 .circ-vid{width:78px;right:10px;bottom:10px} .seansrow{margin-top:18px} .bigq{min-height:380px} .bq-item p{font-size:17.5px} } /* ---- 480 altı: dar telefonlar ---- */ @media (max-width:480px){ :root{--gut:14px} .hero-copy3 .display2{font-size:clamp(26px,8.6vw,32px)} .fan{grid-auto-columns:84%} .numband .n{min-width:calc(50% - 8px)} .cmap .cmeta{flex-direction:column;align-items:center;text-align:center;gap:12px} .cmap .cmeta .ctxt{align-items:center} .cmap .cmeta .lnk{align-self:center} .bq-item p{font-size:16px} .rail{grid-auto-columns:86%} } /* ---- 380 altı: en dar cihazlar ---- */ @media (max-width:380px){ .hero-meta2 div{width:100%;margin-inline:0;justify-content:space-between} .ic-chips{gap:6px} .tabbar .ti{font-size:9.5px} .tabbar .ti svg{width:19px;height:19px} } /* ---- kısa ekranlar (yatay telefon / küçük laptop) ---- */ @media (max-height:640px){ .hero{min-height:0} .hero .container{padding-top:96px;padding-bottom:20px} .fan{height:min(72svh,440px)} .cacc{height:min(60svh,380px)} } /* ---- ultra geniş: içerik merkezde asil dursun ---- */ @media (min-width:1920px){ .stroke-word{font-size:230px} } /* ========================================================================== V40 — YELPAZE × BİLGİ PANELİ: tam ekran kurgu Sol: yelpaze (hover'da kardeşler şeffaflaşıp dağılır) · Sağ: canlı metin bölgesi ========================================================================== */ .fanwrap{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,3vw,56px);align-items:center; } .fanwrap .fan{margin-top:0} /* aktif kart: yerinde dikleşir ve öne çıkar (yeri kaymaz) */ .fan .fanit.act{ transform: translateX(calc(-50% + var(--n,0) * var(--cw) * var(--step))) translateY(calc(var(--a,0) * var(--drop) - 24px)) rotate(calc(var(--n,0) * var(--ang) * .3)) scale(calc(var(--s,1) * 1.07)); z-index:9;filter:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px rgba(26,18,7,.12),0 44px 90px -18px rgba(160,118,47,.42); } .fan .fanit.act .fimg{transform:scale(1.05)} /* kardeşler sadece kısılır — konumları sabit kalır, dağılma yok */ .fan:hover .fanit:not(.act):not(:hover){opacity:.42;filter:saturate(.6) brightness(.78)} /* sağ: bilgi paneli */ .fpanel{ background:rgba(251,247,238,.6); backdrop-filter:blur(14px) saturate(1.12);-webkit-backdrop-filter:blur(14px) saturate(1.12); border:1px solid rgba(26,18,7,.12);border-radius:22px; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 10px rgba(26,18,7,.05),0 26px 56px rgba(26,18,7,.12); padding:clamp(24px,3vw,44px); display:flex;flex-direction:column;gap:14px;align-items:flex-start; min-height:min(46svh,420px);justify-content:center; } .fpanel>*{opacity:0;transform:translateY(14px)} .fpanel.in>*{ opacity:1;transform:none; transition:opacity 450ms var(--eo-quart) var(--pd,0s),transform 450ms var(--eo-quart) var(--pd,0s); } .fpanel .fpk{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)} .fpanel .fpt{font-family:var(--serif);font-weight:800;font-size:clamp(24px,2.6vw,40px);line-height:1.1;letter-spacing:-.015em} .fpanel .fpchips{display:flex;gap:8px;flex-wrap:wrap} .fpanel .fpchips span{ font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 13px;border-radius:999px; background:rgba(251,247,238,.7);border:1px solid rgba(26,18,7,.14);color:var(--ink2); } .fpanel .fpchips span.lv{background:var(--ink);border-color:var(--ink);color:var(--paper3)} .fpanel .fpd{font-size:14.5px;color:var(--ink2);line-height:1.65;max-width:46ch} .fpanel .fprice{ font-family:var(--serif);font-weight:800;font-size:clamp(26px,2.6vw,38px); color:var(--appetite);font-variant-numeric:tabular-nums;line-height:1; } .fpanel .fprice small{display:block;font-family:var(--sans);font-weight:600;font-size:11px;color:var(--ink3);margin-top:6px;letter-spacing:.04em} .fpanel .fpcta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px} @media (max-width:1020px){ .fanwrap{grid-template-columns:1fr;gap:18px} .fpanel{min-height:0;padding:22px} .fan:hover .fanit:not(.act){opacity:1;transform:none;filter:none} } @media (prefers-reduced-motion:reduce){ .fpanel>*,.fpanel.in>*{opacity:1;transform:none;transition:none} .fan:hover .fanit:not(.act){opacity:1;filter:none} } /* v40b — panel zenginliği: ikonlu kutucuklar + kayan kelime şeridi + kademe */ .fpanel>*:nth-child(1){--pd:.02s} .fpanel>*:nth-child(2){--pd:.09s} .fpanel>*:nth-child(3){--pd:.16s} .fpanel>*:nth-child(4){--pd:.23s} .fpanel>*:nth-child(5){--pd:.30s} .fpanel>*:nth-child(6){--pd:.37s} .fpstats{display:flex;gap:10px;width:100%} .fps{ flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start; background:rgba(251,247,238,.72);border:1px solid rgba(26,18,7,.12);border-radius:14px; padding:12px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px rgba(26,18,7,.07); transition:transform 300ms var(--e-manidar),border-color 300ms; } .fps:hover{transform:translateY(-3px);border-color:rgba(160,118,47,.45)} .fps svg{width:20px;height:20px;fill:none;stroke:var(--brass);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fps svg path,.fps svg circle,.fps svg rect{ stroke-dasharray:70;stroke-dashoffset:70; transition:stroke-dashoffset 900ms var(--e-text) calc(var(--pd,0s) + .25s); } .fpanel.in .fps svg path,.fpanel.in .fps svg circle,.fpanel.in .fps svg rect{stroke-dashoffset:0} .fps b{font-family:var(--serif);font-weight:800;font-size:14.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .fps i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)} .fpm{ width:100%;overflow:hidden;padding-block:9px; border-block:1px dashed rgba(160,118,47,.4); } .fpm-t{ display:inline-flex;gap:28px;white-space:nowrap; font-family:var(--serif);font-style:italic;font-weight:600;font-size:13.5px;color:var(--brass); animation:fpmm 16s linear infinite; } .fpm:hover .fpm-t{animation-play-state:paused} @keyframes fpmm{to{transform:translateX(-50%)}} @media (max-width:760px){ .fpstats{flex-wrap:wrap} .fps{min-width:calc(50% - 5px)} } @media (prefers-reduced-motion:reduce){ .fpm-t{animation:none} .fps svg path,.fps svg circle,.fps svg rect{stroke-dashoffset:0;transition:none} } /* V41 — 21:9 bant güvence: minimum yükseklik + görünürlük */ .wide21{min-height:280px;background:#171009} /* ========================================================================== V42 — HIZLI BİLGİ SHEET'İ (Renneway uyarlaması): hover'da görselden yumuşakça yükselen saf beyaz panel + yuvarlak göz düğmesi ========================================================================== */ .qsheet{ position:absolute;left:12px;right:12px;bottom:14px;z-index:5; background:rgba(255,253,248,.97);border-radius:18px; padding:14px 18px;display:flex;gap:26px;align-items:center; box-shadow:0 6px 16px -4px rgba(26,18,7,.12),0 24px 50px -14px rgba(26,18,7,.28); transform:translateY(calc(100% + 22px)) scale(.97); transition:transform 480ms var(--e-manidar); pointer-events:none; } .mcard:hover .qsheet,.mcard:focus-within .qsheet{transform:none} .qrow{display:flex;flex-direction:column;gap:5px;min-width:0} .qrow i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)} .qrow b{font-family:var(--serif);font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap} .qchip{ background:var(--ink);color:var(--paper3); padding:6px 13px;border-radius:9px;font-size:11px;font-weight:800; letter-spacing:.04em;width:max-content;font-family:var(--sans); } .qeye{ position:absolute;top:12px;right:12px;z-index:5; width:42px;height:42px;border-radius:50%; background:var(--ink);color:var(--paper3); display:flex;align-items:center;justify-content:center; opacity:0;transform:scale(.55); transition:opacity 260ms var(--e-kagit),transform 320ms var(--e-kagit); box-shadow:0 10px 24px -6px rgba(26,18,7,.4); } .qeye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .mcard:hover .qeye,.mcard:focus-within .qeye{opacity:1;transform:scale(1)} @media (max-width:760px){ .qsheet{transform:none;position:static;margin:10px 12px 12px;box-shadow:0 10px 24px -8px rgba(26,18,7,.16)} .mcard .ph .qsheet{display:none} /* mobilde görsel içinde değil */ .qeye{opacity:1;transform:scale(1);width:36px;height:36px} } @media (prefers-reduced-motion:reduce){ .qsheet{transform:none} .qeye{opacity:1;transform:scale(1)} } /* ========================================================================== V43 — STÜDYODAN KARELER: dikey video reel şeridi (hover-play) ========================================================================== */ .reelrow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding-block:10px} .reel{ position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;display:block; border:1px solid rgba(26,18,7,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px rgba(26,18,7,.06),0 22px 48px -14px rgba(26,18,7,.18); transition:transform 400ms var(--e-manidar),box-shadow 400ms,opacity 400ms,filter 400ms; } .reel video,.reel .kenb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .reel .kenb{background-size:cover;background-position:center} .reel:hover .kenb{animation:reelken 9s ease-in-out infinite alternate} @keyframes reelken{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.1) translateY(-2%)}} .reel::after{content:"";position:absolute;inset:0;background:linear-gradient(186deg,transparent 52%,rgba(15,10,5,.08) 68%,rgba(15,10,5,.62) 100%)} .reel .rl{ position:absolute;left:10px;right:10px;bottom:10px;z-index:2; display:flex;align-items:center;gap:8px; background:rgba(15,10,5,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(241,233,215,.2);border-radius:12px;padding:9px 12px; color:var(--cream);font-size:12px;font-weight:700;letter-spacing:.03em; } .reel .rl svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--brass2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .reel .rtag{ position:absolute;top:10px;right:10px;z-index:2; font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--cream);background:rgba(15,10,5,.5);backdrop-filter:blur(8px); border:1px solid rgba(216,172,92,.35);padding:5px 10px;border-radius:999px; display:inline-flex;align-items:center;gap:6px; } .reel .rtag i{width:6px;height:6px;border-radius:50%;background:var(--appetite-2);animation:blink 1.8s infinite} .reelrow:hover .reel{opacity:.5;filter:blur(1.5px) saturate(.8)} .reelrow .reel:hover{opacity:1;filter:none;transform:translateY(-6px) scale(1.02); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px rgba(26,18,7,.1),0 44px 90px -20px rgba(160,118,47,.35)} @media (max-width:1020px){ .reelrow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44%; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 4px 24px} .reelrow::-webkit-scrollbar{display:none} .reelrow>*{scroll-snap-align:center} .reelrow:hover .reel{opacity:1;filter:none} } .reel-nav,.mgal-nav{display:none;border:none;padding:0;outline:none} @media (max-width:760px){ .reelrow{grid-auto-columns:62%} .reel-nav-wrap,.mgal-nav-wrap{ display:flex;align-items:center;justify-content:center;gap:12px; margin-top:20px; } .reel-nav,.mgal-nav{ width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--paper);color:var(--ink);border:1px solid var(--line); box-shadow:0 4px 12px rgba(0,0,0,.08);cursor:pointer; } .reel-nav:active,.mgal-nav:active{background:var(--bg)} } @media (prefers-reduced-motion:reduce){ .reel:hover .kenb{animation:none} .reel .rtag i{animation:none} .reelrow:hover .reel{opacity:1;filter:none} } /* ========================================================================== V44 — MUTFAK KOLEKSİYONLARI (Renneway çift yönlü akış uyarlaması) Sol: kategori banner'ı · Sağ: biri yukarı biri aşağı akan ders sütunları Bloklar yana swipe edilir (ok + çubuk otomatik) ========================================================================== */ .krail{grid-auto-columns:96% !important} .kslide{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.55fr) minmax(0,.55fr); gap:14px;height:min(72svh,640px); } .kban{ position:relative;border-radius:20px;overflow:hidden;display:flex;align-items:flex-end; border:1px solid rgba(26,18,7,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(26,18,7,.07),0 28px 60px -18px rgba(26,18,7,.2); } .kban .kbg{position:absolute;inset:0;background-size:cover;background-position:top;transition:transform 700ms var(--e-manidar)} .kslide:hover .kban .kbg{transform:scale(1.04)} .kban::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(15,10,5,.06) 30%,rgba(15,10,5,.78) 100%)} .kban .kb{position:relative;z-index:2;padding:clamp(20px,2.6vw,38px);display:flex;flex-direction:column;gap:10px;align-items:flex-start} .kban .kb i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--brass2)} .kban .kb b{font-family:var(--serif);font-weight:800;font-size:clamp(24px,2.6vw,40px);color:var(--cream);line-height:1.1; text-shadow:0 2px 0 rgba(0,0,0,.4),0 16px 34px rgba(0,0,0,.55)} .kban .kb .lnk{color:var(--brass2)} .kcol{position:relative;border-radius:18px;overflow:hidden} .kcol::before,.kcol::after{ content:"";position:absolute;left:0;right:0;height:44px;z-index:3;pointer-events:none; } .kcol::before{top:0;background:linear-gradient(180deg,var(--deck-bg,#F5EFE4),transparent)} .kcol::after{bottom:0;background:linear-gradient(0deg,var(--deck-bg,#F5EFE4),transparent)} .ktrack{display:flex;flex-direction:column;gap:12px;will-change:transform;animation:kup 30s linear infinite} .kcol.down .ktrack{animation:kdown 34s linear infinite} .kslide:hover .ktrack{animation-play-state:paused} @keyframes kup{from{transform:translateY(0)}to{transform:translateY(-50%)}} @keyframes kdown{from{transform:translateY(-50%)}to{transform:translateY(0)}} .kcard{ flex:none;border-radius:14px;overflow:hidden;display:block; background:rgba(251,247,238,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(26,18,7,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px -6px rgba(26,18,7,.12); transition:transform 300ms var(--e-manidar),border-color 300ms; } .kcard:hover{transform:scale(1.03);border-color:rgba(160,118,47,.5)} .kcard .ki{aspect-ratio:16/10;background-size:cover;background-position:center} .kcard .kt{padding:10px 13px 12px} .kcard .kt b{display:block;font-family:var(--serif);font-weight:700;font-size:13px;line-height:1.25;color:var(--ink)} .kcard .kt span{font-size:11px;font-weight:800;color:var(--appetite);font-variant-numeric:tabular-nums} @media (max-width:1020px){ .kslide{grid-template-columns:1fr 1fr;height:auto} .kban{grid-column:1/-1;aspect-ratio:16/9} .kcol{height:340px} } @media (max-width:760px){ .kslide{grid-template-columns:1fr} .kcol.down{display:none} .kcol{height:300px} } @media (prefers-reduced-motion:reduce){ .ktrack,.kcol.down .ktrack{animation:none} } /* koleksiyon marquee'sinde mcard: dar sütuna göre kompakt tut, yoksa kart kcol'un sabit yüksekliğine sığmayıp üst/alt maskeden taşıyor */ .krail .mcard{gap:0} .krail .mcard .ph{aspect-ratio:16/11; flex:none} .krail .mcard .cat{font-size:9.5px;padding:10px 14px 0} .krail .mcard h3{font-size:13px;line-height:1.3;padding:2px 14px 0} .krail .mcard .sum{font-size:11.5px;padding:2px 14px 12px} /* ========================================================================== V45 — YELPAZE × DEKOZEN KALİTESİ: başlık üstte, tanım altında, ince fiyat çubuğu — animasyonlar aynen korunur ========================================================================== */ .fanit{border-radius:22px;border-color:rgba(26,18,7,.1)} .fanit::before{ content:"";position:absolute;inset:0 0 auto 0;height:46%;z-index:1; background:linear-gradient(180deg,rgba(15,10,5,.62),rgba(15,10,5,.12) 70%,transparent); } .ftop{ position:absolute;top:14px;left:14px;right:14px;z-index:2; display:flex;flex-direction:column;gap:4px;pointer-events:none; } .ftop b{ font-family:var(--sans);font-weight:700;font-size:15.5px;color:var(--cream); line-height:1.25;letter-spacing:-.01em; text-shadow:0 1px 0 rgba(0,0,0,.35),0 10px 22px rgba(0,0,0,.5); } .ftop i{font-style:normal;font-size:11px;font-weight:500;color:rgba(241,233,215,.82);letter-spacing:.01em} /* alt çubuk: ince tek satır — iş birliği solda, fiyat sağda */ .fanit .fbar{ flex-direction:row;align-items:center;justify-content:space-between;gap:10px; padding:9px 13px;border-radius:11px; } .fanit .fbar b{display:none} .fanit .fbar .fk{font-size:8px} .fanit .fbar .fp{font-size:13.5px} /* En kapsamlı rozeti üst yazıyla çakışmasın: sağ üstte kalır */ .fanit .ftag{top:12px;left:auto;right:12px} /* rozetli kartta başlık rozetin altına iner — üst üste binmesin */ .fanit .ftag ~ .ftop{top:46px} .fanit.act .ftag,.fanit:hover .ftag{transform:translateY(0)} @media (max-width:760px){ .ftop b{font-size:14px} .ftop i{font-size:10px} /* dar kartta üst yazı, görselin kendi deseniyle (marka mührü vb.) üst üste binip karışıyordu — yazının arkasına kendi koyu zeminini ver */ .ftop{background:rgba(15,10,5,.6);width:fit-content;max-width:calc(100% - 28px);padding:7px 11px;border-radius:12px} } /* ========================================================================== V46 — REEL ŞERİDİ TAM-GENİŞLİK SÜREKLİ AKIŞ (dekozen "Görselden Alışveriş") ========================================================================== */ .reelwrap{overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);padding-block:12px} .reelrow.drift{ display:flex;grid-template-columns:none;width:max-content;gap:14px; padding:10px 14px;animation:reeldrift 55s linear infinite; } .reelrow.drift .reel{width:clamp(205px,15.5vw,255px);flex:none} .reelwrap:hover .reelrow.drift{animation-play-state:paused} @keyframes reeldrift{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ .reelrow.drift{animation:none} } /* V47 — koleksiyon düzeltmesi: görseller kutu oldu, Renneway birebir düzen */ .kcard .ki{display:block;aspect-ratio:16/11;background-size:cover;background-position:center} .kcard{background:#FDFBF6} .kcard .kt{padding:11px 14px 13px} .kcard .kt b{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.01em;margin-bottom:3px} .kcard .kt span{color:var(--ink2);font-weight:700} .krail{grid-auto-columns:100% !important;gap:20px} .kslide{gap:16px} .kcol .ktrack{padding-block:6px} /* V48 — görsel güvenilirliği + sheet/gövde ayrışması */ /* maske-açılış emekli: görseller her koşulda anında görünür */ .imgpre{clip-path:none !important} /* sheet'li kartlarda gövde sabit — karışma biter, sheet tek başına görselde açılır */ .mcard:has(.qsheet):hover .mbody{transform:none} .mcard:has(.qsheet) .mbody{margin-top:0;border-radius:0} .qsheet{bottom:12px} /* chip metni garanti: her zaman okunur */ .qchip{color:#FBF7EE !important;font-size:11px;line-height:1.2;min-height:0} /* ========================================================================== V49 — TEK AİLE MONTSERRAT: bold başlık hiyerarşisi + rakamlar dahil + yelpaze "masaya saçılmış A4" yayılımı + tıklanabilir harita pinleri ========================================================================== */ /* --- başlıklar bold, gövde normal: en ufaktan en büyüğe tek aile --- */ h1,h2,.h1,.h2,.display,.display2{font-weight:700 !important;letter-spacing:-.016em} h3,.h3{font-weight:640 !important} h4,.h4{font-weight:650 !important} .fcard .name,.scard h3,.mcard h3,.ccard h3,.event h3,.diploma h3,.chef-row .nm, .hero-quick .qtitle,.step4 h3,.cmeta b,.fpt{font-weight:680 !important} /* rakamlar: Montserrat tabular, dolgun */ .stat b,.numband .n b,.event .date b,.event .amt,.ccard .price,.buy-panel .amt, .keyfacts b,.hero-meta2 b,.hero-statsbar b,.hero-stats b,.hero-meta b, .fprice,.kt span,.fbar .fp{font-weight:700 !important;font-variant-numeric:tabular-nums} /* italik vurgular Montserrat italic 600 — el yazısı hissi yok, AI hissi yok */ .say,.quote p,.bigq p{font-weight:600} b,strong{font-weight:700} /* yelpaze geometrisi tek yerde: "V34 — İMZA PROGRAMLAR: KEMER YELPAZESİ". Eski sabit --x/--ty/--fxm tablosu kaldırıldı; konum artık --n/--a'dan türüyor. */ /* --- harita pinleri: tıklanabilir, dokunulabilir his --- */ .cmap .pin{pointer-events:auto;cursor:pointer;transition:transform 300ms var(--e-kagit)} .cmap .pin:hover{transform:scale(1.28)} .cmap .pin:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:50%} /* ========================================================================== V50 — KING FOOTER (çift katman dalga + alt çizgi formu + altın ok butonu + mıknatıslı sosyaller + soldan çizilen link altları) + MUTFAĞIN NABZI eğik video galerisi ========================================================================== */ :root{ --kf-bg:#130D07; --kf-txt:#A89C8B; --kf-head:#F5EFE4; --kf-line:rgba(245,239,228,.09); --e-quick:cubic-bezier(.215,.61,.355,1); } /* ---------- eğik video galerisi ---------- */ .mgal{padding:clamp(48px,6vw,86px) 0 clamp(56px,7vw,110px);overflow:hidden} .mgal .sec-head{margin-bottom:clamp(26px,3.4vw,48px)} .mgal-strip{ display:flex;gap:8px;align-items:stretch; width:min(var(--max),100% - 2*var(--gut));margin-inline:auto; } .mgi{flex:1 1 20%;min-width:0;margin:0} .mgi-in{ position:relative;border-radius:26px;overflow:hidden;aspect-ratio:5/6; transform:rotate(var(--tilt,0deg)); transition:transform 600ms var(--e-manidar),padding 350ms var(--e-quick),background-position 0s; box-shadow:0 1px 2px rgba(26,18,7,.06),0 14px 30px rgba(26,18,7,.1),0 40px 80px -22px rgba(26,18,7,.18); } .mgal.inview .mgi-in{transform:rotate(0deg)} .mgi-in video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-radius:inherit;background:#1c1209; } .mgi-in::after{ content:"";position:absolute;inset:0;border-radius:inherit;background:#0F0A05; opacity:0;transition:opacity 400ms ease;pointer-events:none; } /* hover: akan gradyan çerçeve (marka renkleriyle) + loş perde */ @media (hover:hover) and (min-width:1021px){ .mgi-in:hover{ padding:5px;transform:rotate(0deg); background:linear-gradient(90deg,var(--brass2),var(--appetite-2) 30%,var(--leaf) 68%,var(--brass)); background-size:500% 500%;animation:kborder 6s ease infinite; } .mgi-in:hover video{border-radius:21px} .mgi-in:hover::after{opacity:.32;border-radius:21px;inset:5px} } @keyframes kborder{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .mgi figcaption{ position:absolute;inset:auto 14px 16px;z-index:2;text-align:center; font-family:var(--sans);font-weight:800;font-size:clamp(15px,1.35vw,21px);color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4),0 12px 26px rgba(0,0,0,.55); opacity:0;transform:translateY(10px);transition:opacity 400ms ease,transform 400ms ease; pointer-events:none; } .mgal.mcap .mgi figcaption{opacity:1;transform:translateY(0)} .mgi-pp{ position:absolute;top:10px;right:10px;z-index:3;width:28px;height:28px;border:0; border-radius:50%;background:#fff;color:#151522;display:grid;place-items:center; cursor:pointer;box-shadow:1px 2px 7px rgba(0,0,0,.11); transition:transform 300ms var(--e-kagit); } .mgi-pp:hover{transform:scale(1.12)} .mgi-pp svg{width:9px;height:9px;fill:currentColor} .mgi-pp .i-pause{display:none} .mgi-pp.playing .i-pause{display:block} .mgi-pp.playing .i-play{display:none} @media (max-width:1020px){ .mgal-strip{ width:auto;margin:0;padding:6px var(--gut) 18px; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; } .mgal-strip::-webkit-scrollbar{display:none} .mgi{flex:0 0 72%;scroll-snap-align:center} .mgi-in{transform:none} } @media (max-width:640px){.mgi{flex-basis:82%}} @media (prefers-reduced-motion:reduce){ .mgi-in{transform:none;transition:none} .mgi-in:hover{animation:none} } /* ---------- KING FOOTER ---------- */ .kfoot{position:relative;background:var(--kf-bg);color:var(--kf-txt);margin-top:clamp(64px,8vw,120px)} /* çift katman canlı dalga — footer'ın tacı */ .kwave{ position:absolute;left:0;right:0;bottom:calc(100% - 10px);height:80px; overflow:hidden;pointer-events:none;animation:kbob 8.4s ease-in-out infinite; } .kwave svg{ position:absolute;bottom:0;left:0;width:200%;height:100%;fill:var(--kf-bg); animation:kslidew 14s linear infinite;will-change:transform; } .kwave svg.w2{animation-duration:23.8s;animation-direction:reverse;opacity:.45} @keyframes kslidew{to{transform:translate3d(-50%,0,0)}} @keyframes kbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @media (max-width:767px){.kwave{height:48px}} @media (prefers-reduced-motion:reduce){.kwave,.kwave svg{animation:none}} .kfoot-in{padding-inline:clamp(16px,5vw,7rem)} .kf-top{ display:grid;grid-template-columns:minmax(240px,1fr) 2fr; gap:clamp(28px,4vw,72px);padding:70px 0 30px; } .kf-left{display:grid;gap:24px;align-content:start;max-width:400px} .kf-brand img{width:min(230px,58vw);height:auto;display:block} .kf-about{font-size:14.5px;line-height:1.7;color:var(--kf-txt)} .kf-social{display:flex;gap:12px;list-style:none;margin:0;padding:0} .kf-social li{will-change:transform;transition:transform .2s ease-out} .kf-social a{ display:grid;place-items:center;width:48px;height:48px;border-radius:50%; border:1px solid rgba(245,239,228,.22);color:var(--kf-head); transition:background 350ms var(--e-quick),color 350ms,border-color 350ms; } .kf-social a:hover{background:var(--brass2);border-color:var(--brass2);color:#151009} .kf-social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .kf-cols{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:clamp(22px,3vw,48px);align-content:start} .kf-col h4{ font-family:var(--sans);font-weight:800;font-size:17px;color:var(--kf-head); letter-spacing:-.01em;margin:0 0 14px; } .kf-col ul{list-style:none;margin:0;padding:0} .kf-col li{padding-top:10px} .kf-link,.kf-quick a{ color:var(--kf-txt);text-decoration:none;font-size:14.5px;font-weight:500; background-image:linear-gradient(transparent calc(100% - 1px),currentColor 1px); background-size:0 100%;background-position-x:100%;background-repeat:no-repeat; transition:background-size 350ms var(--e-quick),color 250ms; padding-bottom:2px; } .kf-link:hover,.kf-quick a:hover{background-size:100% 100%;background-position-x:0;color:#FAF7F6} /* bülten: alt çizgili form + altın daire ok */ .kf-news p{font-size:14px;line-height:1.65;margin:0 0 16px} .kf-box{ display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center; border-bottom:1px solid rgba(245,239,228,.16);padding-bottom:8px; transition:border-color 350ms var(--e-quick); } .kf-box:focus-within{border-color:var(--brass2)} .kf-box input{ border:0;padding:0;background:transparent;min-height:48px;width:100%; font-family:var(--sans);font-size:16px;color:var(--kf-head);outline:0; } .kf-box input::placeholder{color:#8d8172} .kf-arrow{ width:36px;height:36px;border-radius:50%;border:0;background:var(--brass2); color:#151009;display:grid;place-items:center;cursor:pointer;overflow:hidden; transition:transform 300ms var(--e-kagit),background 250ms; } .kf-arrow:hover{background:#E7BC6C} .kf-arrow svg{width:14px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease} .kf-arrow:hover svg{transform:rotate(-45deg)} .kf-msg{min-height:20px;margin:10px 0 0;font-size:13px;transition:opacity .3s} .kf-msg:empty{display:none} .kf-msg.ok{color:#9DBB7E} .kf-msg.err{color:#E08B66} .kf-bottom{ display:grid;grid-template-columns:1fr;gap:12px;align-items:center; border-top:1px solid var(--kf-line);padding:20px 0 max(20px,env(safe-area-inset-bottom)); font-size:13.5px; } .kf-loc{display:inline-flex;align-items:center;gap:8px} .kf-loc svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none} .kf-quick{display:flex;gap:18px;justify-content:flex-start} .kf-copy a{color:inherit;text-decoration:none;transition:opacity .25s} .kf-copy a:hover{opacity:.7;color:#FAF7F6} @media (min-width:992px){ .kf-bottom{grid-template-columns:1fr 1fr 1fr} .kf-quick{justify-content:center} .kf-copy{text-align:right} } @media (max-width:1020px){ .kf-top{grid-template-columns:1fr;padding-top:54px} .kf-left{justify-items:center;text-align:center;margin-inline:auto} .kf-social{justify-content:center} .kf-cols{grid-template-columns:1fr 1fr} .kf-news{grid-column:1/-1} .kfoot{padding-bottom:64px} /* tabbar payı */ } @media (max-width:640px){.kf-cols{grid-template-columns:1fr 1fr}} /* V51 — gölge makası kalktı: overflow kapları gölgeye nefes payı bırakır */ .reelwrap{padding-block:44px 60px;margin-block:-32px -46px} .reelrow.drift{padding:10px 14px} /* hover gölgesi daha da eriyerek biter */ .reelrow .reel:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 14px rgba(26,18,7,.07), 0 24px 48px -12px rgba(26,18,7,.14), 0 64px 120px -36px rgba(160,118,47,.3); } /* koleksiyon sütunları: yanlardan kesilen kart gölgelerine pay */ .kcol{padding-inline:12px;margin-inline:-12px} /* yelpaze hover gölgesi zaten katmanlı; kesilmesin diye fan'a taban payı */ .fan{padding-bottom:26px;margin-bottom:-26px} /* V51b — kcol payı geri alındı (kartlarda gölge yok, bindirme riski vardı) */ .kcol{padding-inline:0;margin-inline:0} /* V52 — sertifika: mühür sağ üstte görünür basılır + akreditasyon logoları belgenin üzerinde + logo kutuları ferah (kesik his yok) */ .ic-seal{bottom:auto;top:clamp(14px,1.9vw,24px);right:clamp(16px,2vw,30px)} @media (max-width:760px){.ic-seal{bottom:auto;top:12px;right:12px}} .ic-accr{ display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,26px); margin:10px auto 2px; } .ic-accr img{ height:22px;width:auto;max-width:86px;object-fit:contain; filter:grayscale(1) contrast(.8) opacity(.62);transition:filter 400ms; } .icert:hover .ic-accr img,.icert.stamped .ic-accr img{filter:grayscale(0) contrast(1) opacity(.95)} @media (max-width:760px){.ic-accr img{height:18px;max-width:70px}} /* logo kutuları: logoya nefes, taşan etikete sarma izni */ .ltile{min-width:118px;padding:14px 18px;overflow:visible} .ltile img{height:34px;max-height:34px;width:auto;max-width:100%;object-fit:contain} .ltile em{white-space:normal;text-align:center;line-height:1.35;letter-spacing:.06em} /* ========================================================================== V53 — MUTFAK EKOSİSTEMİ: ortalı asimetrik cam mozaik (merkezde video, iki yanda nefes alan cam plakalar; fısıltı idle + cesur hover) ========================================================================== */ .bx-head{ text-align:center;max-width:62ch;margin:0 auto clamp(26px,3.4vw,46px); display:grid;justify-items:center; } .bx-head .lead{margin-top:12px;text-align:center} .bxwrap{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr) minmax(0,1fr); gap:16px;align-items:stretch; max-width:1240px;margin-inline:auto; padding-block:14px; /* asimetri ofsetleri için nefes payı */ } .bxcol{display:flex;flex-direction:column;gap:16px;min-width:0} /* asimetri: sol sütun aşağı, sağ sütun yukarı süzülür; oranlar çapraz */ .bxl{transform:translateY(12px)} .bxr{transform:translateY(-12px)} .bxl .bx:first-child,.bxr .bx:last-child{flex:1.18} .bxl .bx:last-child,.bxr .bx:first-child{flex:.82} .bx{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;text-align:center;padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,26px); border-radius:22px;overflow:hidden;min-height:150px; background:rgba(251,247,238,.55); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(26,18,7,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 5px rgba(26,18,7,.04), 0 14px 30px rgba(26,18,7,.08),0 40px 84px -26px rgba(26,18,7,.16); transition:transform 300ms var(--e-kagit),box-shadow 400ms,border-color 300ms, opacity 400ms,filter 400ms; animation:bxfloat 7s ease-in-out calc(var(--bi,0)*.9s) infinite; } @keyframes bxfloat{0%,100%{translate:0 0}50%{translate:0 -4px}} /* ışık süpürmesi: ara sıra yüzeyden geçen tül */ .bx::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 46%,transparent 62%); transform:translateX(-130%); animation:bxsheen 9s ease-in-out calc(var(--bi,0)*1.3s + 2s) infinite; } @keyframes bxsheen{0%,74%,100%{transform:translateX(-130%)}82%{transform:translateX(130%)}} .bx .bl{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)} .bx .bv{ font-family:var(--sans);font-weight:800;font-variant-numeric:tabular-nums; font-size:clamp(34px,3.1vw,50px);line-height:1;letter-spacing:-.02em;color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.6),0 8px 18px rgba(26,18,7,.14); } .bx .bd{font-size:13px;line-height:1.55;color:var(--ink2);max-width:24ch;font-weight:500} .bx .go2{ position:absolute;right:16px;bottom:13px;color:var(--brass);font-size:17px; opacity:0;transform:translateX(-8px);transition:260ms var(--e-kagit); } .bx .spark{width:min(160px,70%);height:30px;margin-top:2px} .bx .spark path{fill:none;stroke:var(--brass);stroke-width:2;stroke-linecap:round; stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 900ms var(--e-manidar) .15s} /* rozet ikonları — her plakanın kimliğini anında okutur */ .bx .bxicon{ position:relative;z-index:1;width:40px;height:40px;display:grid;place-items:center;flex:none; border-radius:12px;background:rgba(160,118,47,.12);color:var(--brass); margin-bottom:2px; } .bx .bxicon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .bx.bdark .bxicon{background:rgba(216,172,92,.14);color:var(--brass2)} .bx.baccent .bxicon{background:rgba(255,246,238,.18);color:#FFF6EE} /* video ders: canlı yayın gibi nabız atan halka */ .bx .bxicon.live::after{ content:"";position:absolute;inset:-4px;border-radius:inherit; border:1.5px solid var(--brass);opacity:.55; animation:bxping 2.4s ease-out infinite; } @keyframes bxping{0%{transform:scale(.82);opacity:.6}80%,100%{transform:scale(1.4);opacity:0}} /* bire bir seans: akrep sessizce döner */ .bx .bxhand{transform-origin:12px 12px;animation:bxspin 6s linear infinite} @keyframes bxspin{to{transform:rotate(360deg)}} /* atölyeler: tencereden tüten buhar */ .bx .bxsteam{ position:absolute;top:-2px;left:50%;width:2px;height:12px;border-radius:2px; background:linear-gradient(180deg,transparent,rgba(216,172,92,.55)); opacity:0;animation:bxsteam 3.2s ease-in-out infinite; } .bx .bxsteam.w1{left:calc(50% - 7px);animation-delay:0s} .bx .bxsteam.w2{left:50%;animation-delay:1.05s} .bx .bxsteam.w3{left:calc(50% + 7px);animation-delay:2.1s} @keyframes bxsteam{ 0%{transform:translateY(2px) scaleY(.4);opacity:0} 25%{opacity:.85} 100%{transform:translateY(-15px) scaleY(1);opacity:0} } /* sağ üst köşe: dolgun renkli ok rozeti — bxicon ile görsel çift oluşturur */ .bx .bxgo{ position:absolute;top:16px;right:16px;width:36px;height:36px;flex:none;z-index:1; border-radius:50%;background:rgba(160,118,47,.14);color:var(--brass); display:flex;align-items:center;justify-content:center; transition:background .25s,color .25s,transform .3s var(--e-kagit); } .bx .bxgo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .bx:hover .bxgo{background:var(--ink);color:var(--paper3);transform:rotate(45deg) scale(1.06)} .bx.bdark .bxgo{background:rgba(216,172,92,.16);color:var(--brass2)} .bx.bdark:hover .bxgo{background:var(--brass2);color:#1A1207} .bx.baccent .bxgo{background:rgba(255,246,238,.22);color:#FFF6EE} .bx.baccent:hover .bxgo{background:#FFF6EE;color:#A24222} .bxsec .bx .bxgo{top:clamp(18px,1.6vw,26px);right:clamp(18px,1.6vw,26px);width:40px;height:40px} .bxsec .bx .bxgo svg{width:16px;height:16px} /* sağ üst köşe fonu: temaya uygun dev, soluk hayalet ikon — köşeyi hacimle doldurur */ .bx .bxwm{ position:absolute;top:-22px;right:-22px;width:132px;height:132px;z-index:0; color:var(--brass);opacity:.1;pointer-events:none;transform:rotate(-8deg); } .bx .bxwm svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round} .bx.bdark .bxwm{color:var(--brass2);opacity:.12} .bx.baccent .bxwm{color:#FFF6EE;opacity:.18} .bx .bl,.bx .bv,.bx .bd,.bx .spark{position:relative;z-index:1} /* akreditasyon: madalya hafifçe nefes alır */ .bx.baccent .bxicon{animation:bxbreath 3.4s ease-in-out infinite} @keyframes bxbreath{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}} @media (prefers-reduced-motion:reduce){ .bx .bxicon.live::after,.bx .bxhand,.bx .bxsteam,.bx.baccent .bxicon{animation:none} } /* koyu ve iştah plakaları */ .bx.bdark{background:rgba(21,14,8,.9);border-color:rgba(241,233,215,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 5px rgba(15,10,5,.2), 0 16px 34px rgba(15,10,5,.22),0 44px 90px -26px rgba(15,10,5,.4)} .bx.bdark .bl{color:rgba(241,233,215,.55)} .bx.bdark .bv{color:var(--cream);text-shadow:0 1px 0 rgba(0,0,0,.4),0 10px 22px rgba(0,0,0,.5)} .bx.bdark .bd{color:rgba(241,233,215,.72)} .bx.baccent{background:linear-gradient(155deg,#C25A31,#A24222);border-color:rgba(255,246,238,.22);color:#FFF6EE; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 5px rgba(122,44,16,.2), 0 16px 34px rgba(122,44,16,.24),0 46px 92px -26px rgba(166,66,34,.5)} .bx.baccent .bl{color:rgba(255,246,238,.72)} .bx.baccent .bv{color:#FFF6EE;text-shadow:0 1px 0 rgba(0,0,0,.22),0 10px 22px rgba(90,30,8,.5)} .bx.baccent .bd{color:rgba(255,246,238,.85)} /* merkez: video plakası */ .bx.bvideo{padding:0;min-height:400px;border-radius:26px;animation:none} .bx.bvideo::before{z-index:3} .bx.bvideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .bx.bvideo::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(15,10,5,.05) 45%,rgba(15,10,5,.55));pointer-events:none} .bx.bvideo .glasschip{left:50%;transform:translateX(-50%);bottom:18px;white-space:nowrap} /* hover: kardeşler buğulanır, seçilen cesurca öne gelir */ @media (hover:hover) and (min-width:1021px){ .bxwrap:hover .bx{opacity:.55;filter:blur(1.5px) saturate(.85)} .bxwrap .bx:hover{ opacity:1;filter:none;transform:translateY(-7px) scale(1.025); border-color:rgba(160,118,47,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px rgba(26,18,7,.07), 0 26px 54px rgba(26,18,7,.13),0 70px 130px -34px rgba(160,118,47,.34); } .bx:hover .go2{opacity:1;transform:none} .bx:hover .spark path{stroke-dashoffset:0} } @media (max-width:1020px){ .bxwrap{grid-template-columns:1fr 1fr;padding-block:0} .bxcol{display:contents} .bxl,.bxr{transform:none} .bx{animation:none;min-height:132px} .bx.bvideo{grid-column:1/-1;order:-1;min-height:250px} .bx .go2{opacity:1;transform:none} .bx .spark path{stroke-dashoffset:0} } @media (max-width:640px){ .bxwrap{grid-template-columns:1fr;gap:12px} } @media (prefers-reduced-motion:reduce){ .bx,.bx::before{animation:none} .bxwrap:hover .bx{opacity:1;filter:none} .bxwrap .bx:hover{transform:none} } /* V54 — hızlı kayıt formu: gönderim sonrası zarif onay (ham HTML enjeksiyonu yerine durum) */ .hq3 .qform{position:relative;transition:opacity 300ms} .hq3 .qform.sent>*{visibility:hidden;pointer-events:none} .hq3 .qform.sent::after{ content:"Kaydınız alındı. Doğrulama e-postanız yolda; danışmanımız bir iş günü içinde dönecek."; position:absolute;inset:0;display:grid;place-items:center;text-align:center; color:var(--brass2);font-size:14px;font-weight:600;line-height:1.6;padding:12px; animation:qfade 420ms var(--e-manidar) both; } @keyframes qfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.hq3 .qform.sent::after{animation:none}} /* ========================================================================== V55 — HOVER DENETİMİ: metin metnin üstüne binmez ========================================================================== */ /* kategori şeridi: başlık ile alt açıklama yan yana değil, alt alta */ .catnav button{ flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:3px; line-height:1.2; } .catnav button .cnt{ max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* V56 — yelpaze: etiketler yalnız öndeki/işaret edilen kartta görünür. (beş kart üst üste binince başlıklar birbirine karışıyordu) */ .fanit .ftop,.fanit .fbar{ opacity:0;transition:opacity 300ms var(--e-manidar),transform 380ms var(--e-kagit); } .fanit .ftop{transform:translateY(-6px)} .fanit .fbar{transform:translateY(6px)} .fanit.act .ftop,.fanit:hover .ftop, .fanit.act .fbar,.fanit:hover .fbar{opacity:1;transform:none} /* kart üzerindeki koyu tül de yalnız etiketliyken koyulaşsın */ .fanit::before{opacity:0;transition:opacity 300ms var(--e-manidar)} .fanit.act::before,.fanit:hover::before{opacity:1} @media (max-width:1020px){ /* dokunmatikte hepsi okunur kalsın */ .fanit .ftop,.fanit .fbar,.fanit::before{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ .fanit .ftop,.fanit .fbar{transition:none} } /* ========================================================================== V57 — LEZZET HARİTASI: sinematik zoom in / zoom out Şef seçilince harita önce geri çekilir, sonra o bölgeye dalar. ========================================================================== */ .cmap .mapbox{overflow:hidden} /* --- çerçeve: video artık kenardan kenara değil, kağıdın üstünde bir kare --- */ .hero{ background:var(--paper); padding:clamp(8px,.9vw,16px) clamp(8px,.9vw,16px) clamp(10px,1.1vw,20px); justify-content:stretch; overflow:visible; } .hframe{ position:absolute;inset:clamp(8px,.9vw,16px) clamp(8px,.9vw,16px) clamp(10px,1.1vw,20px); border-radius:clamp(20px,2.1vw,32px);overflow:hidden;z-index:0; box-shadow: 0 .6px 1.6px -1.5px rgba(26,18,7,.18), 0 2.3px 6px -3px rgba(26,18,7,.14), 0 18px 40px -8px rgba(26,18,7,.22), 0 54px 110px -30px rgba(26,18,7,.3); } .hero::after{ left:clamp(8px,.9vw,16px);right:clamp(8px,.9vw,16px);bottom:clamp(10px,1.1vw,20px); border-radius:0 0 clamp(20px,2.1vw,32px) clamp(20px,2.1vw,32px); } .hero .stroke-word{z-index:1} /* --- dikey ritim: üst şerit / söz + panel / rakam barı --- */ .hero .container{ display:flex;flex-direction:column;justify-content:space-between; flex:1;padding-top:clamp(24px,3.2vh,44px);padding-bottom:clamp(22px,3vh,40px); gap:clamp(18px,2.6vh,34px); } .hero-grid{align-items:stretch} /* üst şerit: canlı durum solda, konum sağda */ .hero-top{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--cream3); } .hero-top .hlive{ display:inline-flex;align-items:center;gap:9px;color:var(--cream2); background:rgba(15,10,5,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(241,233,215,.16);border-radius:999px;padding:8px 15px; } .hero-top .hlive i{ width:7px;height:7px;border-radius:50%;background:var(--appetite-2);flex:none; box-shadow:0 0 0 0 rgba(216,172,92,.55);animation:hpulse 2.2s ease-out infinite; } @keyframes hpulse{ 0%{box-shadow:0 0 0 0 rgba(216,172,92,.5)} 70%{box-shadow:0 0 0 9px rgba(216,172,92,0)} 100%{box-shadow:0 0 0 0 rgba(216,172,92,0)} } .hero-top .hloc{opacity:.72} /* orta kat: söz solda, kompakt kayıt paneli sağda */ .hero .hero-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,382px); align-items:center;gap:clamp(20px,3vw,52px);flex:1; } .hero-copy3{padding-bottom:0;max-width:660px} .hero-copy3 .display2{ font-size:clamp(38px,5vw,72px);letter-spacing:-.03em;line-height:1.02;font-weight:800; } .hero-copy3 .lead{margin-top:18px;max-width:44ch} .hero-copy3 .hero-ctas{margin-top:26px} /* alt kat: rakam barı tam genişlik */ .hero-meta2{grid-column:auto;margin:0} /* kompakt panel: ad/soyad gitti, üç öğe kaldı */ .hq3{padding:clamp(16px,1.5vw,22px)} .hq3 .qtitle{font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:-.01em} .hq3 input,.hq3 select{font-size:14px;padding:12px 14px} .hq3 .sugg{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px} @media (max-width:1020px){ .hero{padding:6px 6px 8px} .hframe{inset:6px 6px 8px;border-radius:20px} .hero::after{left:6px;right:6px;bottom:8px;border-radius:0 0 20px 20px} .hero .container{gap:16px;padding-top:18px;padding-bottom:16px} .hero .hero-grid{grid-template-columns:1fr;gap:18px;align-items:start} .hero-top{font-size:10px;letter-spacing:.1em} .hero-top .hloc{display:none} .hero-copy3{max-width:none} } @media (max-width:760px){ /* mobilde panel sadeleşir: e-posta + buton; çipler ve seçim gizlenir */ .hq3 select,.hq3 .sugg,.hq3 .qnote{display:none} .hq3 .qtitle{font-size:15.5px} .hq3 .eyebrow{font-size:9.5px} .hq3{padding:14px} .hero-copy3 .display2{font-size:clamp(30px,8.4vw,40px)} .hero-copy3 .lead{font-size:14.5px;margin-top:12px} } /* V62 — hero yığını: üst şerit / orta ızgara / rakam barı (çakışma giderildi) */ .hero .hero-stack{ display:flex;flex-direction:column;justify-content:space-between;flex:1; gap:clamp(16px,2.4vh,32px); padding-top:clamp(22px,3vh,42px);padding-bottom:clamp(20px,2.8vh,38px); } .hero .hero-mid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,382px); align-items:center;gap:clamp(20px,3vw,52px); } .hero .hero-meta2{grid-column:auto;width:100%} @media (max-width:1020px){ .hero .hero-mid{grid-template-columns:1fr;gap:16px;align-items:start} .hero .hero-stack{gap:14px} } /* ========================================================================== V63 — hero tam olarak ilk ekrana sığar Sorun: hero 100svh'ydi ama üstünde anons+header bandı vardı; son bant (rakam barı) ekranın altında kalıyordu. Artık o bant yüksekliği düşülüyor. ========================================================================== */ .hero{min-height:calc(100svh - var(--hoff,112px))} /* kontur kelime: rakam barını ezmesin, çerçevenin dibine otursun */ .hero .stroke-word{ font-size:clamp(90px,13vw,190px);bottom:-4%;top:auto;opacity:.05;z-index:0; } @media (max-width:1020px){ .hero{min-height:calc(100svh - var(--hoff,104px))} .hero .stroke-word{font-size:clamp(64px,17vw,110px)} } /* ========================================================================== V64 — Framer araştırmasından iki genel kazanım 1) Grillify'ın ölçülen 3 katmanlı "eriyen" gölge formülü → kart standardımız 2) Freud'un dururken nefes alan kart mikro-animasyonu (hover'da yerine oturur) ========================================================================== */ :root{ --sh-melt: 0 .24px .6px -1px rgba(26,18,7,.14), 0 .92px 2.3px -2px rgba(26,18,7,.13), 0 4px 10px -3px rgba(26,18,7,.12), 0 18px 54px -12px rgba(26,18,7,.16); --sh-melt-up: 0 .3px .8px -1px rgba(26,18,7,.16), 0 1.4px 3.4px -2px rgba(26,18,7,.14), 0 8px 20px -4px rgba(26,18,7,.14), 0 40px 96px -20px rgba(160,118,47,.34); } .mcard,.ccard,.sig,.st3,.reel,.kcard,.btile{box-shadow:var(--sh-melt)} .rail .mcard:hover,.course-grid .ccard:hover,.sig-grid .sig:hover{box-shadow:var(--sh-melt-up)} /* dururken fısıltı: kartlar çok hafif nefes alır, imleç gelince yerine oturur */ @media (hover:hover) and (min-width:1021px){ .rail .mcard,.course-grid .ccard,.xgal a{ animation:cardbreath 7.5s ease-in-out infinite; animation-delay:calc(var(--bi,0) * .8s); } .rail .mcard:hover,.course-grid .ccard:hover,.xgal a:hover{animation-play-state:paused} } @keyframes cardbreath{ 0%,100%{translate:0 0;scale:1} 50%{translate:0 -3.4px;scale:.995} } @media (prefers-reduced-motion:reduce){ .rail .mcard,.course-grid .ccard,.xgal a{animation:none} } /* V65 — mobil: rakam barı tek satırda kalsın, kesilmesin */ @media (max-width:760px){ .hero-meta2{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; padding:10px 14px;gap:0; } .hero-meta2::-webkit-scrollbar{display:none} .hero-meta2 div{ flex:none;font-size:10.5px;white-space:nowrap; padding-right:14px;margin-right:14px; } .hero-meta2 b{font-size:15px} } /* ========================================================================== V66 — FRAMER KARIŞIMI: her şablondan bir esinti · Freud → çizgili kağıt pano + hafif eğik "iğnelenmiş not" yorumlar · Grillify → scroll ile aralanan tiyatro perdesi · Sesame → yatay şeritlerde kenarı eriyen maske · Saladify → CTA okunun yuvarlanıp yenisiyle değişmesi · Ambroise → altın rengin yatay süpürmeyle butonu doldurması ========================================================================== */ /* ---------- FREUD: çizgili kağıt pano + iğnelenmiş notlar ---------- */ .stwall{position:relative;overflow:hidden} .stgrid{ position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(26,18,7,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(26,18,7,.055) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(78% 70% at 50% 45%,#000 45%,transparent 100%); mask-image:radial-gradient(78% 70% at 50% 45%,#000 45%,transparent 100%); } .st-head{text-align:center;display:grid;justify-items:center;max-width:62ch;margin:0 auto clamp(30px,4vw,54px)} .st-head .lead{margin-top:12px;text-align:center} .stickers{ display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(18px,2.2vw,30px);align-items:start; } .stnote{ position:relative;margin:0;padding:30px 24px 22px; background:linear-gradient(178deg,#FCF8EF,#F4EBD9); border:1px solid rgba(26,18,7,.1);border-radius:4px; rotate:var(--tt,0deg); box-shadow:var(--sh-melt); transition:rotate 420ms var(--e-kagit),translate 420ms var(--e-kagit),box-shadow 420ms; } /* kağıdın alt kenarında hafif kıvrım gölgesi */ .stnote::after{ content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:12px;z-index:-1; background:radial-gradient(60% 100% at 50% 0%,rgba(26,18,7,.18),transparent 72%); filter:blur(3px); } .stnote .stpin{ position:absolute;top:-9px;left:50%;translate:-50% 0;width:16px;height:16px;border-radius:50%; background:radial-gradient(circle at 34% 30%,#E7BC6C,#9A7226 62%,#6E4E17); box-shadow:0 3px 7px rgba(26,18,7,.34),inset 0 1px 0 rgba(255,255,255,.5); } .stnote blockquote{ margin:0;font-size:14.5px;line-height:1.62;color:var(--ink);font-weight:500; } .stnote blockquote::before{content:"“";color:var(--brass);font-size:26px;line-height:0;vertical-align:-6px;margin-right:2px} .stnote figcaption{ margin-top:16px;padding-top:12px;border-top:1px dashed rgba(26,18,7,.18); display:flex;flex-direction:column;gap:2px; } .stnote figcaption b{font-size:13px;font-weight:800;color:var(--ink)} .stnote figcaption i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)} @media (hover:hover) and (min-width:1021px){ .stnote:hover{rotate:0deg;translate:0 -6px;box-shadow:var(--sh-melt-up);z-index:3} } @media (max-width:760px){ .stnote{rotate:calc(var(--tt,0deg) * .5);padding:26px 18px 18px} .stgrid{background-size:26px 26px} } /* ---------- GRILLIFY: scroll ile aralanan perde ---------- */ .curtain{position:relative;isolation:isolate} .cpanel{ position:absolute;top:0;bottom:0;width:50.6%;z-index:3;pointer-events:none; background:linear-gradient(160deg,#241708,#0F0A05); display:flex;align-items:center;justify-content:center; transition:translate 120ms linear; box-shadow:0 0 60px rgba(15,10,5,.5); } .cpl{left:0;translate:calc(var(--cp,0) * -102%) 0;border-radius:20px 0 0 20px} .cpr{right:0;translate:calc(var(--cp,0) * 102%) 0;border-radius:0 20px 20px 0} .cpanel i{ font-style:normal;font-family:var(--sans);font-weight:800; font-size:clamp(18px,2.6vw,40px);letter-spacing:.24em; color:transparent;-webkit-text-stroke:1px rgba(216,172,92,.55); opacity:calc(1 - var(--cp,0) * 1.6); } .cpl i{translate:14% 0} .cpr i{translate:-14% 0} .chint{ position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:4; font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:var(--cream2);background:rgba(15,10,5,.5);backdrop-filter:blur(8px); border:1px solid rgba(216,172,92,.3);border-radius:999px;padding:7px 14px; opacity:calc(1 - var(--cp,0) * 2);pointer-events:none; } @media (prefers-reduced-motion:reduce){ .cpanel{translate:calc(-102%) 0} .cpr{translate:102% 0} .chint{display:none} } /* ---------- SESAME: yatay şeritlerin kenarı erisin, sert kesilmesin ---------- */ .rail,.reelwrap,.xgal,.chipbar,.krail{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%); } /* ---------- SALADIFY: buton oku yuvarlanarak değişir ---------- */ .btn .arr{ display:inline-block;position:relative;overflow:hidden;width:1.1em;height:1.15em; vertical-align:-.12em;line-height:1.15em;text-align:center; } .btn .arr::before,.btn .arr::after{ content:"→";position:absolute;left:0;right:0; transition:translate 380ms var(--e-kagit),opacity 300ms; } .btn .arr::before{top:0;opacity:1} .btn .arr::after{top:100%;opacity:0} .btn:hover .arr::before{translate:0 -110%;opacity:0} .btn:hover .arr::after{translate:0 -100%;opacity:1} @media (prefers-reduced-motion:reduce){ .btn .arr::before,.btn .arr::after{transition:none} } /* V67 — not panosu: son satır ortalansın (esnek diziliş) */ .stickers{display:flex;flex-wrap:wrap;justify-content:center;grid-template-columns:none} .stnote{flex:0 1 clamp(258px,29%,352px)} @media (max-width:760px){.stnote{flex:1 1 100%}} /* V68 — perde arkası kadraj: şefin yüzü kesilmesin + yuvarlak video zemini */ .wide21 .plx{background-position:center 28%} .circ-vid{background:radial-gradient(70% 70% at 40% 35%,#3a2a16,#171009)} /* ========================================================================== V69 — COMPOSITING ONARIMI (kritik) Belirti: scroll sırasında hero videosu diğer bölümlerin üzerine taşıyor, yazılar gidip geliyor, bölümler boş kalıyor. Neden: .deck bir kırpma bağlamı (overflow:clip) taşıyordu ve position:sticky olan .hero'nun (içinde oynayan video + backdrop-filter katmanları) üzerine biniyordu. Chromium bu kombinasyonda .deck alt ağacını ayrı bir katmana alıp her scroll karesinde hatalı raster ediyor. Çözüm: .deck'ten kırpmayı kaldır. Yatay taşma html seviyesinde overflow-x:clip ile tutulur — overflow-x:hidden KULLANMAYIN, o position:sticky'yi bozar. ========================================================================== */ .deck{overflow:visible} html{overflow-x:clip} /* ========================================================================== V70 — FOOTER PLAKETİ (Granny uyarlaması) Ortada yükselen koyu plaket: üstü ve altı yay kesimli, içinde iletişim formu. Yanlarda eğitim binası ve iletişim sütunları. Tek font (Montserrat), mavi/mor yok, gölge --sh-melt-up ile eriyerek biter. ========================================================================== */ .kfoot{margin-top:clamp(150px,15vw,240px)} /* flow-root: negatif margin .kfoot-in'e taşıp tüm footer'ı yukarı itmesin */ .kfoot-in{display:flow-root} .kplak-wrap{ position:relative;z-index:2; display:grid;grid-template-columns:1fr minmax(320px,460px) 1fr; align-items:end;gap:clamp(18px,3.4vw,60px); margin-top:clamp(-196px,-13vw,-104px); } /* --- yan sütunlar: plaket taştığı için alta hizalanır, aydınlık alana taşmaz --- */ .kplak-side{text-align:center;padding-bottom:clamp(28px,4vw,78px)} .kplak-h{ font-family:var(--sans);font-weight:800;letter-spacing:-.015em;line-height:1.14; font-size:clamp(21px,2vw,28px);color:var(--cream);margin:0 0 14px; } .kplak-h em{font-style:italic;font-weight:600;color:var(--brass2)} .kplak-side p{margin:0;font-size:14.5px;line-height:1.8;color:var(--kf-txt)} .kplak-side p a{color:var(--cream2);text-decoration:none;transition:color .25s var(--ease)} .kplak-side p a:hover{color:var(--brass2)} .kplak-link{ display:inline-flex;align-items:center;gap:8px;margin-top:16px; font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--brass2);text-decoration:none; border-bottom:1px solid rgba(216,172,92,.32);padding-bottom:5px; transition:color .28s var(--ease),border-color .28s var(--ease); } .kplak-link:hover{color:#EBC782;border-color:#EBC782} /* --- plaket --- */ /* eriyen gölge: yay kesimli siluete uysun diye drop-shadow, katmanlı ve yumuşak */ .kplak{ position:relative; filter:drop-shadow(0 2px 5px rgba(15,10,5,.16)) drop-shadow(0 10px 22px rgba(15,10,5,.2)) drop-shadow(0 40px 78px rgba(15,10,5,.3)); } .kplak-edge{position:absolute;left:0;right:0;height:34px;line-height:0;pointer-events:none} .kplak-edge svg{display:block;width:100%;height:100%;fill:var(--kplak-bg)} .kplak-top{bottom:100%} .kplak-bot{top:100%} .kplak{--kplak-bg:#2E2011} .kplak-in{ background:linear-gradient(168deg,#33240F,#221708); padding:clamp(22px,2.6vw,34px) clamp(20px,2.4vw,32px) clamp(26px,3vw,36px); text-align:center; } .kplak-title{ font-family:var(--sans);font-weight:800;letter-spacing:-.02em;line-height:1.08; font-size:clamp(27px,2.7vw,38px);color:var(--cream);margin:0; } .kplak-title em{font-style:italic;font-weight:600;color:var(--brass2)} .kplak-orn{display:block;margin:14px auto 20px;width:16px;height:16px;opacity:.9} .kplak-orn svg{display:block;width:100%;height:100%;fill:var(--brass2)} /* --- form --- */ .kplak-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left} .kplak-form select,.kplak-form textarea,.kplak-btn,.kplak-msg{grid-column:1 / -1} .kplak-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .kplak-form input,.kplak-form select,.kplak-form textarea{ width:100%;font:inherit;font-size:14.5px;color:var(--cream); background:rgba(241,233,215,.055); border:1px solid rgba(241,233,215,.14);border-radius:12px; padding:12px 14px;outline:none; transition:border-color .28s var(--ease),background-color .28s var(--ease); } .kplak-form textarea{resize:vertical;min-height:84px;line-height:1.6} .kplak-form select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--brass2) 50%),linear-gradient(135deg,var(--brass2) 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px; background-size:6px 6px,6px 6px;background-repeat:no-repeat; padding-right:38px; } .kplak-form select option{background:#1B1208;color:var(--cream)} .kplak-form ::placeholder{color:#8d8172} .kplak-form input:focus,.kplak-form select:focus,.kplak-form textarea:focus{ border-color:var(--brass2);background:rgba(241,233,215,.085); } .kplak-btn{ margin-top:4px;width:100%;cursor:pointer;font:inherit; font-size:14.5px;font-weight:700;letter-spacing:.005em;color:#FFF6EA; background:var(--appetite);border:0;border-radius:999px;padding:14px 20px; display:inline-flex;align-items:center;justify-content:center;gap:10px; transition:background-color .3s var(--ease),transform .3s var(--e-kagit); } .kplak-btn:hover{background:var(--appetite-2,#D8AC5C);transform:translateY(-2px)} .kplak-btn:active{transform:translateY(0)} .kplak-btn .arr{transition:transform .3s var(--e-kagit)} .kplak-btn:hover .arr{transform:translateX(4px)} .kplak-msg{margin:2px 0 0;font-size:13px;line-height:1.5;transition:opacity .3s} .kplak-msg:empty{display:none} .kplak-msg.ok{color:#9DBB7E} .kplak-msg.err{color:#E08B66} /* plaket geldiği için üst blok biraz daralsın */ .kplak-wrap + .kf-top{padding-top:clamp(46px,5vw,72px)} /* --- mobil --- */ @media (max-width:980px){ .kplak-wrap{grid-template-columns:1fr;gap:clamp(26px,5vw,40px);margin-top:clamp(-70px,-6vw,-40px)} .kplak{order:-1;max-width:480px;margin-inline:auto;width:100%;margin-bottom:24px} .kplak-side{padding-block:0} } @media (max-width:520px){ .kplak-edge{height:22px} .kplak-orn{margin:12px auto 16px} } @media (prefers-reduced-motion:reduce){ .kplak-btn,.kplak-btn .arr{transition:none} .kplak-btn:hover{transform:none} } /* ========================================================================== V71 — FOOTER LOGOSU: koyu zeminde kaybolmasın Kaynak logo.svg tamamen fill="#000000" (28 path). Dış alan adından ile geldiği için içindeki fill'e CSS ile erişilemiyor; filtre ile krem tona boyanır. Katsayılar --cream (#F1E9D7) hedeflenerek hesaplandı; sonuç rgb(237,237,215) — fark gözle ayırt edilemez. Diğer logo kullanımları (sertifika mührü, hakkımızda mühür) açık zeminde, bu yüzden kapsam sadece .kf-brand. ========================================================================== */ .kf-brand img{ filter:brightness(0) invert(1) sepia(.62) saturate(2.5) brightness(.93); } /* ========================================================================== V72 — PLAKET AÇIK TONA ÇEVRİLDİ (navbar ile aynı kâğıt zemin) Navbar kapsülü rgba(245,239,228,.72) yani --paper. Plaket de o aileye geçiyor: koyu footer üzerinde kart gibi öne çıkıyor, aydınlık bölüme taştığı üst ucunda ise hafif daha açık ton + kılcal kenar + eriyen gölge ile ayrışıyor. İçerik de "on light" paletine döner: --ink metin, --brass altın (koyu zemin altını --brass2 değil). ========================================================================== */ .kplak{--kplak-top:#FDFAF3;--kplak-bot:#F0E8D8} .kplak-top svg{fill:var(--kplak-top)} .kplak-bot svg{fill:var(--kplak-bot)} /* gölge: açık kart koyu zeminde yüzsün, aydınlık bölümde de kenarı okunsun */ .kplak{ filter:drop-shadow(0 1px 2px rgba(26,18,7,.14)) drop-shadow(0 8px 18px rgba(26,18,7,.16)) drop-shadow(0 34px 66px rgba(15,10,5,.32)); } .kplak-in{ background:linear-gradient(168deg,var(--kplak-top),var(--kplak-bot)); color:var(--ink); } .kplak-title{color:var(--ink)} .kplak-title em{color:var(--brass)} .kplak-orn svg{fill:var(--brass)} /* DİKKAT: burada background KISAYOLU kullanılmaz — select'in ok gradyanlarının position/size/repeat değerlerini sıfırlar ve ok tüm alana döşenir. */ .kplak-form input,.kplak-form select,.kplak-form textarea{ color:var(--ink); background-color:rgba(255,255,255,.62); border-color:var(--line); } .kplak-form ::placeholder{color:var(--ink3)} .kplak-form select{ background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px; background-size:6px 6px,6px 6px;background-repeat:no-repeat; } .kplak-form select option{background:#FBF7EE;color:var(--ink)} .kplak-form input:focus,.kplak-form select:focus,.kplak-form textarea:focus{ border-color:var(--brass);background-color:rgba(255,255,255,.9); } .kplak-msg.ok{color:#4C5B3B} .kplak-msg.err{color:#9E3E1F} /* ========================================================================== V73 — YAN ÇEKMECE YENİDEN TASARIM Sadece link listesi yerine görselli bir panel: öne çıkan eğitimler (küçük kapak + başlık + süre/fiyat), "Mutfaktan" görsel ızgarası ve etiketler. Granny'nin Recent Posts / Instagram / Tag Clouds kurgusunun gastronomi karşılığı. Çekmece genişledi, içerik kaydırılabilir. ========================================================================== */ .menu-layer{ width:min(468px,96vw); padding:clamp(88px,11vh,112px) 0 0; gap:0; } /* iç kaydırma: kenar boşluğu bloklarda, böylece ayraçlar tam genişlik olur */ .menu-layer > *{padding-inline:clamp(22px,2.2vw,32px)} .mnav{display:flex;flex-direction:column} .menu-layer a.big{ display:flex;align-items:center;gap:0; font-size:clamp(20px,1.8vw,24px);line-height:1.42;padding:8px 0; } .menu-layer a.big svg{ width:24px;height:24px;flex-shrink:0;margin-right:4px; fill:none;stroke:var(--brass2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; transition:transform .25s ease; } .menu-layer a.big:hover svg{transform:scale(1.1)} /* --- panel --- */ .mpanel{margin-top:clamp(18px,2.4vh,28px);padding-bottom:8px} .mblock{padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--lined)} .mblock + .mblock{margin-top:clamp(18px,2.4vh,26px)} .mtitle{ font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.17em; text-transform:uppercase;color:var(--cream3);margin:0 0 14px; } .mtitle em{font-style:italic;font-weight:700;color:var(--brass2);text-transform:none;letter-spacing:.06em;font-size:1.18em} /* --- öne çıkan eğitimler --- */ .mpost{ display:grid;grid-template-columns:62px 1fr;align-items:center;gap:13px; padding:9px 10px;margin-inline:-10px;border-radius:12px; text-decoration:none;color:inherit; transition:background-color .28s var(--ease),transform .28s var(--e-text); } .mpost:hover{background:rgba(241,233,215,.06);transform:translateX(4px)} .mthumb{ display:block;width:62px;height:52px;border-radius:9px; background-size:cover;background-position:center; border:1px solid var(--lined); } .mtxt{display:flex;flex-direction:column;gap:3px;min-width:0} .mtxt b{font-size:14.5px;font-weight:700;color:var(--cream);line-height:1.3} .mtxt small{font-size:12px;color:var(--cream3);font-variant-numeric:tabular-nums} .mpost:hover .mtxt b{color:var(--brass2)} /* --- görsel ızgara --- */ .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .mcell{ display:block;aspect-ratio:1;border-radius:9px; background-size:cover;background-position:center; border:1px solid var(--lined); transition:transform .35s var(--e-text),filter .35s var(--ease); filter:saturate(.82) brightness(.92); } .mcell:hover{transform:scale(1.05);filter:saturate(1) brightness(1.05)} /* --- etiketler --- */ .mtags{display:flex;flex-wrap:wrap;gap:8px} .mtags a{ font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--cream2); text-decoration:none;padding:7px 13px;border-radius:999px; border:1px solid var(--lined); transition:color .26s var(--ease),border-color .26s var(--ease),background-color .26s var(--ease); } .mtags a:hover{color:#171009;background:var(--brass2);border-color:var(--brass2)} /* --- alt künye --- */ .menu-layer .foot{ margin-top:auto;flex-direction:column;align-items:flex-start;gap:4px; padding-top:16px;padding-bottom:calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--lined);font-size:12px; } .menu-layer .foot a{color:var(--cream2);text-decoration:none;transition:color .25s var(--ease)} .menu-layer .foot a:hover{color:var(--brass2)} @media (max-width:760px){ .menu-layer{width:min(430px,100vw);padding-top:96px} .menu-layer a.big{font-size:clamp(19px,5.4vw,23px)} .mgrid{gap:6px} } @media (prefers-reduced-motion:reduce){ .mpost,.mcell{transition:none} .mpost:hover,.mcell:hover{transform:none} } /* ========================================================================== V74 — ÇEKMECE İÇ KAYDIRICI Kaydırma .menu-layer'da olunca içerik header kapsülünün üstüne taşıyordu (menü açıkken anons bandı gizli, o şerit saydam kalıyor). Kaydırma iç sarmalayıcıya alındı; üstte maskeyle erime var, böylece içerik header'a girerken sert kesilmiyor. Maske .menu-layer'a konulamaz — dış gölgeyi de kırpar. ========================================================================== */ .menu-layer{overflow:hidden;padding-top:0;padding-bottom:0} .menu-layer > .mscroll{padding-inline:0} .mscroll{ flex:1;min-height:0;display:flex;flex-direction:column; overflow-y:auto;overscroll-behavior:contain; padding-top:clamp(96px,12vh,124px); -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 54px,#000 clamp(94px,11.6vh,120px)); mask-image:linear-gradient(180deg,transparent 0,transparent 54px,#000 clamp(94px,11.6vh,120px)); } .mscroll > *{padding-inline:clamp(22px,2.2vw,32px)} @media (max-width:760px){ .mscroll{padding-top:100px} } /* ========================================================================== V75 — ÇEKMECE DÜZELTMELERİ 1) Menü açıkken header'ın sağ aksiyonları (Giriş Yap / Ücretsiz Kayıt Ol) çekmecenin üstüne biniyordu — çekmece sağda ve o butonlar da sağda. Menü açıkken header sadece logo + kapat düğmesi gösterir. 2) Header scroll'da gizlenmişken çekmece onun için ayırdığı boşluğu boş gösteriyordu; menü açıkken header her zaman görünür olsun. 3) Kaydırma çubuğu görünüyordu (açık renkli şerit). Gizlendi. 4) Eski .menu-visual posteri: app.js guard'lı ama önbellekteki eski JS onu yine üretebilir. Panel varsa CSS ile de bastırılır. ========================================================================== */ /* menü açıkken header gizlenmesin (scroll'da gizlenmiş olabilir) */ body.menu-open .site-head{transform:none} .mscroll{scrollbar-width:none;-ms-overflow-style:none} .mscroll::-webkit-scrollbar{width:0;height:0} /* önbellekteki eski app.js hâlâ .menu-visual üretebilir; panel varsa bastır */ .menu-layer:has(.mpanel) .menu-visual{display:none} /* logo dar ekranda flex sıkışmasıyla 0 genişliğe ezilmesin */ .brand{flex:0 0 auto} .brand img{flex:0 0 auto;min-width:62px} /* ========================================================================== V76 — ŞEF IZGARASI MOZAİK DÜZENE Eşit kareler yerine değişken hücreler: bir dikey portre, iki yatay bant. Sitenin "asimetrik bento" diline uyar, tek boyutlu ızgaradan daha canlı. ========================================================================== */ .mgrid{grid-auto-rows:74px} .mcell{aspect-ratio:auto;height:100%} .mcell:nth-child(1){grid-row:span 2} .mcell:nth-child(4),.mcell:nth-child(6){grid-column:span 2} @media (max-width:760px){.mgrid{grid-auto-rows:66px}} /* V76b — mozaikte yatay hücreler portre fotoğrafı yüzden kesiyordu. Kadraj yukarı alındı: yüzler üst üçte birde kalır. */ .mcell{background-position:center 24%} .mcell:nth-child(1){background-position:center 30%} /* ========================================================================== V77 — ŞEF MOZAİĞİ: GERÇEK MASONRY V76'daki yatay hücreler portre fotoğrafları yüz hizasından kesiyordu ve her fotoğrafın yüzü farklı yükseklikte olduğu için tek bir background-position hepsini kurtarmıyor. Çözüm: hücreler dikey kalsın, sadece yükseklikleri değişsin. CSS sütunları ile gerçek masonry akışı. ========================================================================== */ .mgrid{display:block;column-count:3;column-gap:7px;grid-template-columns:none;grid-auto-rows:auto} .mcell{ display:block;width:100%;height:auto;margin:0 0 7px; break-inside:avoid;-webkit-column-break-inside:avoid; grid-row:auto;grid-column:auto; background-position:center 30%; } .mcell:nth-child(3n+1){aspect-ratio:3/4} .mcell:nth-child(3n+2){aspect-ratio:1} .mcell:nth-child(3n){aspect-ratio:4/5} @media (max-width:760px){.mgrid{column-gap:6px}.mcell{margin-bottom:6px}} /* ========================================================================== V78 — ÇEKMECE SADELEŞTİRME (V75/V75b/V75c/V76b geri alınıyor) Önceki yaklaşım yanlıştı: çekmece header'ın ARKASINDAN başlayıp üstteki boşluğu padding + maske ile telafi etmeye çalışıyordu; bunun için de header'ın sağ öğeleri gizleniyor, header koca boş bir bant hâline gelip kapat düğmesi sola kayıyordu. Doğrusu basit: çekmece header'ın ALTINDAN başlar. Böylece çakışma yok — header hiç değişmez (logo, linkler, butonlar, sağda kapat düğmesi), padding hesabı yok, maske yok, üstte boşluk yok. ========================================================================== */ /* çekmece header'ın altından başlar */ .menu-layer{top:var(--head-b,112px);height:auto} /* üst boşluk telafisi ve erime maskesi artık gereksiz */ .mscroll{ padding-top:clamp(18px,2.4vh,28px); -webkit-mask-image:none;mask-image:none; } @media (max-width:760px){.mscroll{padding-top:18px}} /* V78b — menü açıkken header fixed. .site-head sticky; menü açılınca body'ye overflow:hidden veriliyor ve sticky bağlamı kırılıyor — sayfa kaydırılmışsa header ekranın çok yukarısında kalıyordu (ölçüldü: top -2457px). Bu, çekmeceden bağımsız, eskiden beri var olan bir hataydı; çekmece tepeden başladığı için görünmüyordu. --head-fix-top app.js'te anons bandına göre ayarlanır. */ body.menu-open .site-head{position:fixed;top:var(--head-fix-top,0px);left:0;right:0} /* ========================================================================== V79 — HERO KENARDAN KENARA (sağ/sol ölü alan kaldırıldı) İki ayrı sorun vardı: 1) .hero krem bir çerçeve içindeydi (.hframe inset ~16px, yuvarlak köşe) 2) .container flex kolon içinde margin-inline:auto olduğu için cross eksende shrink-to-fit oluyordu → 1512px ekranda 1421 yerine 1178px genişlik, iki yanda 167px ölü alan (1920'de 413px). Çözüm: video tam ekran, içerik header'ın ızgarasıyla birebir hizalı. ========================================================================== */ /* --- çerçeve kaldırıldı: video kenardan kenara --- */ .hero{ padding:0; background:var(--esp); overflow:hidden; } .hframe{ inset:0; border-radius:0; box-shadow:none; } .hero::after{ left:0;right:0;bottom:0;border-radius:0; } /* --- içerik: shrink-to-fit yerine tam genişlik, header ile aynı hizada --- */ .hero .container.hero-stack{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); align-self:stretch; } /* --- orta kat: söz solda kalır, panel sağ kenara yaslanır --- */ .hero .hero-mid{ grid-template-columns:minmax(0,1fr) minmax(320px,400px); gap:clamp(28px,5vw,96px); align-items:center; } .hero-copy3{max-width:min(58vw,860px)} .hero-copy3 .display2{ font-size:clamp(40px,5.4vw,88px); letter-spacing:-.035em;line-height:1; } .hero-copy3 .lead{max-width:48ch;font-size:clamp(15.5px,1.15vw,18.5px)} /* --- alt bar: dört rakam tüm genişliğe eşit dağılır --- */ .hero .hero-meta2{ display:grid;grid-template-columns:repeat(4,1fr); padding:14px clamp(18px,2.2vw,34px);gap:0; } .hero .hero-meta2 div{ border-right:1px solid rgba(241,233,215,.16); border-left:none;margin:0;padding:2px clamp(14px,2vw,28px); } .hero .hero-meta2 div:first-child{padding-left:0} .hero .hero-meta2 div:last-child{border-right:none;padding-right:0} /* --- kontur kelime de tam genişliğe göre yeniden ölçeklenir --- */ .hero .stroke-word{font-size:clamp(100px,14vw,240px)} @media (max-width:1020px){ .hero{padding:0} .hframe{inset:0;border-radius:0} .hero::after{left:0;right:0;bottom:0;border-radius:0} .hero .hero-mid{grid-template-columns:1fr;gap:18px;align-items:start} .hero-copy3{max-width:none} .hero .hero-meta2{grid-template-columns:repeat(2,1fr);row-gap:10px} .hero .hero-meta2 div:nth-child(2n){border-right:none;padding-right:0} .hero .hero-meta2 div:nth-child(n+3){padding-top:10px;border-top:1px solid rgba(241,233,215,.16)} } @media (max-width:600px){ .hero .hero-meta2{grid-template-columns:1fr} .hero .hero-meta2 div{width:100%;margin-inline:0;border-right:none;padding-inline:0;justify-content:space-between} .hero .hero-meta2 div:nth-child(n+2){padding-top:8px;border-top:1px solid rgba(241,233,215,.16)} } /* ========================================================================== V79 — NAVBAR LOGOSU BÜYÜTÜLDÜ 44px, kapsül yüksekliği 66px olan "solid" durumda küçük kalıyordu. 52px'e çıktı (üstte/altta 7px pay). Mobilde 36 → 42px. min-width, yeni yüksekliğin doğal genişliğine göre güncellendi (500×350 logo, 52px yükseklikte ≈ 74px). ========================================================================== */ .brand img{height:52px;min-width:74px} @media (max-width:767px){.brand img{height:42px;min-width:60px}} /* V79b — .deck üstteki hero'yu -5vh ile örtüyor; rakam barı bu örtünün altında kalıyordu. Alt boşluk örtme payını da kapsayacak şekilde arttırıldı. */ .hero .container.hero-stack{ padding-bottom:calc(5vh + clamp(24px,3.2vh,44px)); } @media (max-width:1020px){ .hero .container.hero-stack{padding-bottom:calc(5vh + 20px)} } /* ========================================================================== V80 — HIZLI KAYIT PANELİ BÜYÜTÜLDÜ Hero tam genişliğe çıkıp başlık 88px'e büyüyünce panel yanında cılız kaldı. Genişlik, iç boşluk, alan yükseklikleri ve tipografi tek adımda yukarı çekildi; ritim (etiket → başlık → alanlar → CTA) netleştirildi. ========================================================================== */ .hero .hero-mid{grid-template-columns:minmax(0,1fr) minmax(360px,468px)} .hq3{ padding:clamp(24px,2.1vw,38px); border-radius:22px; border:1px solid rgba(216,172,92,.4); background: linear-gradient(180deg,rgba(216,172,92,.07),transparent 42%), rgba(15,10,5,.62); } .hq3 .eyebrow{font-size:11.5px;letter-spacing:.2em} .hq3 .qtitle{ font-family:var(--sans);font-weight:800; font-size:clamp(20px,1.55vw,26px);line-height:1.2;letter-spacing:-.015em; margin-top:12px; } .hq3 .qform{margin-top:20px} .hq3 input,.hq3 select{ font-size:15px;padding:15px 17px;border-radius:13px; border-color:rgba(241,233,215,.26); } .hq3 select{margin-top:12px !important} .hq3 .sugg{margin-top:14px;gap:9px} .hq3 .sugg button{font-size:13px;padding:9px 16px} .hq3 .btn{min-height:58px;margin-top:18px;font-size:15.5px;border-radius:14px} .hq3 .qnote{font-size:12px;margin-top:12px} @media (max-width:1020px){ .hq3{padding:clamp(20px,3vw,28px);border-radius:18px} .hq3 .qtitle{font-size:19px} .hq3 .btn{min-height:52px} } /* ========================================================================== v34 — İMZA PROGRAMLAR: scroll ile iki yandan uçan 3D mutfak nesneleri (eski dikey "EĞİTİMLER" kontur yazısının yerine) 2 nesne soldan, 2 nesne sağdan girer — bakış merkezi ortalanır. ========================================================================== */ .kobjs{ position:absolute;inset:0;z-index:3;pointer-events:none; perspective:1300px;perspective-origin:52% 44%; --mx:0;--my:0; } .kobj{ position:absolute;width:var(--w,180px); transform-style:preserve-3d;will-change:transform,opacity; opacity:calc(var(--k,0) * 1.25); transform: translate3d( calc((1 - var(--k,0)) * var(--tx,520px) + var(--mx) * var(--dp,10) * 1px), calc((1 - var(--k,0)) * var(--ty,0px) + var(--my) * var(--dp,10) * .55px), 0) rotate3d(0,1,0,calc((1 - var(--k,0)) * var(--ry,-44deg))) rotate(calc((1 - var(--k,0)) * var(--rot,-26deg))) scale(calc(.62 + .38 * var(--k,0))); } .kobj svg{ display:block;width:100%;height:auto;overflow:visible; filter:drop-shadow(0 30px 38px rgba(26,18,7,.26)) drop-shadow(0 8px 12px rgba(26,18,7,.14)); } /* sürekli hafif salınım — scroll transformundan bağımsız iç katman */ .ko-f{animation:koFloat var(--fdur,7s) var(--e-kagit,cubic-bezier(.4,0,.2,1)) var(--fdel,0s) infinite alternate} @keyframes koFloat{from{transform:translateY(6px) rotate(-1.6deg)}to{transform:translateY(-16px) rotate(2.4deg)}} /* tavanın ısınan tabanı + buhar */ @keyframes koHot{0%,100%{opacity:.72;transform:scale(.97)}50%{opacity:1;transform:scale(1.07)}} .ko-hot{transform-box:fill-box;transform-origin:center;animation:koHot 2.8s ease-in-out infinite} @keyframes koSteam{ 0%{opacity:0;transform:translateY(12px) scaleY(.82)} 25%{opacity:.55} 100%{opacity:0;transform:translateY(-30px) scaleY(1.16)} } .ko-steam path{transform-box:fill-box;transform-origin:bottom center;animation:koSteam 4.4s ease-out infinite;animation-delay:var(--s,0s)} /* --- nesne yerleşimi ve giriş karakteri (sınıflarda; HTML temiz kalsın) --- 2 sol (soldan uçarak girer, başlık/yelpaze bandının üstü) · 2 sağ (sağdan uçarak girer, fiyat panelinin cepleri) — limon kaldırıldı. */ .ko-pan {--w:clamp(230px,26vw,392px);--tx:-680px;--ty:-90px;--rot:-24deg;--ry:54deg;--dp:18;--fdur:8.5s;top:9%;left:30%;z-index:5} .ko-herb {--w:clamp(130px,13.5vw,206px);--tx:-600px;--ty:-50px;--rot:-30deg;--ry:46deg;--dp:22;--fdur:6.4s;--fdel:.5s;top:32%;left:-3%;z-index:4} .ko-pep {--w:clamp(100px,10.5vw,158px);--tx:520px;--ty:-40px;--rot:-46deg;--ry:-60deg;--dp:26;--fdur:5.6s;--fdel:.9s;top:58%;right:-4.5%;z-index:6} .ko-knife{--w:clamp(230px,25vw,368px);--tx:740px;--ty:70px;--rot:24deg;--ry:-40deg;--dp:12;--fdur:7.2s;--fdel:1.2s;bottom:1%;right:-2.5%;z-index:5} @media (max-width:1280px){ .ko-knife{display:none} .ko-pan{left:22%} } @media (max-width:1024px){.kobjs{display:none}} @media (prefers-reduced-motion:reduce){ .ko-f,.ko-hot,.ko-steam path{animation:none} .kobj{transform:none;opacity:1} } /* ========================================================================== V81 — NAVBAR REVİZYONU 1) .nav-links margin-inline:auto ile ortalanıyordu → logodan sonra ~230px ölü boşluk kalıyordu. Artık logonun hemen yanından başlıyor, aksiyonlar sağ kenara itiliyor. 2) Ray genişletildi (1680 → 1920) ve yan boşluk daraltıldı; header ile hero içeriği aynı --rail-* değerlerini paylaşır, hizalama korunur. ========================================================================== */ :root{ --rail-max:1920px; --rail-gut:clamp(20px,2.6vw,52px); } .site-head{padding-inline:var(--rail-gut)} .site-head .shell{max-width:var(--rail-max)} .hero .container.hero-stack{max-width:var(--rail-max);padding-inline:var(--rail-gut)} /* menü logonun yanına yapışır, aksiyonlar sağa yaslanır */ .nav{gap:clamp(18px,2.2vw,36px)} .nav-links{margin-inline:0;margin-right:auto} .nav-links a{font-size:15px} @media (max-width:1280px){.nav-links a{font-size:14px}} /* V81b — menü artık logo ile aksiyonlar arasındaki tüm genişliğe yayılır. Öğeler eşit genişlikte hücrelere oturur; ayraçlar hücre sınırında kalır. */ .nav-links{flex:1 1 auto;min-width:0;justify-content:stretch} .nav-links li{flex:1 1 0;min-width:0;justify-content:center} .nav-links li+li::before{margin-inline:0} .nav-links a{ flex:1 1 auto;text-align:center;white-space:nowrap; display:flex;align-items:center;justify-content:center; } @media (max-width:1180px){ .nav-links{flex:0 0 auto} .nav-links li{flex:0 0 auto} .nav-links li+li::before{margin-inline:8px} } /* ========================================================================== V82 — ŞERİTTEKİ DAİRE GÖRSELLERİN ÇEVRESİ YANIP SÖNER Dışa açılan dalga yok: sadece dairenin kendi çevresinde koyu bir ışık belirip kayboluyor. Her daire farklı gecikmeyle yanar. ========================================================================== */ .mb2 .chip{ --cd:0s; animation:chipRing 2.8s ease-in-out infinite var(--cd); } @keyframes chipRing{ 0%,100%{box-shadow:0 5px 14px rgba(26,18,7,.22),0 0 0 0 rgba(26,18,7,0)} 50% {box-shadow:0 5px 14px rgba(26,18,7,.22),0 0 13px 3px rgba(26,18,7,.62)} } /* komşu daireler aynı anda yanmasın */ .mb2 .chip:nth-child(6n+2){--cd:.45s} .mb2 .chip:nth-child(6n+3){--cd:.9s} .mb2 .chip:nth-child(6n+4){--cd:1.35s} .mb2 .chip:nth-child(6n+5){--cd:1.8s} .mb2 .chip:nth-child(6n){--cd:2.25s} .mb2 .chip:hover{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .mb2 .chip{animation:none} } /* mobilde daire görsellerinin gölgesi/ışık halkası tamamen kalksın */ @media (max-width:760px){ .mb2 .chip{animation:none;box-shadow:none} } /* ========================================================================== V80 — RAKAM BANDI YENİDEN TASARIM Sorunlar: (1) üstteki geçiş bandı kayıyordu — ::before gradyanı var(--deck-bg) rengini varsayıyordu, deck rengi JS ile bölüm bölüm değiştiği için tutmuyordu; (2) beş cam kutu zayıf ve dağınık duruyordu; (3) arka plandaki görsel bir kurs afişiydi, üzerindeki yazı fona vuruyordu. Çözüm: kutular kaldırıldı, rakamlar ince dikey ayraçlarla bölünmüş tek bir ray oldu. Geçiş, bandın KENDİ zemininin saydamdan koyuya inmesiyle yapılıyor — üstteki renk ne olursa olsun uyar, varsayım yok. Afiş yerine ocak parıltısı: iki büyük radyal ışık ağır ağır sürükleniyor. Animasyon: rakamlar odometreyle sayılır, sütunlar sırayla yükselir, altlarındaki altın filaman ortadan iki yana çizilir, alıntı en son gelir. Hover'da rakam hafifçe kalkar ve etiketi altına döner. ========================================================================== */ .numband{ position:relative;overflow:hidden;background:#0C0805; padding-block:clamp(96px,11vw,164px); } /* eski afiş katmanı devre dışı */ .numband .bgimg,.numband .bgveil{display:none} /* Üst/alt erime ARTIK GERÇEK ELEMANLARDA (.nb-melt). Neden: .grain::after{position:absolute;inset:0} kuralı, sonraki .numband::after kuralına top:0'ı miras bırakıyordu; "alt" gradyan ekranın ÜSTÜNDE çiziliyor ve üst gradyanı örtüyordu. Üstelik bandın grain dokusu da eziliyordu (bu hata eski kurallarda da vardı). Bu yüzden: ::before iptal, ::after grain dokusuna geri döndürüldü. */ .numband::before{content:none} .numband::after{ content:"";position:absolute;inset:0;top:0;bottom:0;left:0;right:0; width:auto;height:auto;z-index:1;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } .nb-melt{ position:absolute;left:0;right:0;z-index:2;pointer-events:none; height:clamp(120px,15vw,230px); --melt-c:var(--deck-bg,var(--paper)); --melt-d:#0C0805; /* bandın kendi zemini */ /* ara duraklar sıcak kahveden geçer; doğrudan nötr siyaha inerse orta tonlar grileşiyor ve geçiş kirli görünüyor */ --melt-w1:#5A422A; --melt-w2:#33230F; --melt-w3:#1A1108; } /* Kaba fallback (color-mix desteklemeyen tarayıcı) */ .nb-melt.t{top:0;background:linear-gradient(180deg,var(--melt-c),transparent)} .nb-melt.b{bottom:0;background:linear-gradient(0deg,var(--melt-c),transparent)} /* Yumuşak geçiş: saydama DEĞİL, bandın kendi rengine karışır — aradaki gri pus biter. Duraklar doğrusal değil, ease eğrisine yakın dağıtıldı; ne başta ne sonda kenar okunur. */ .nb-melt.t{background:linear-gradient(180deg, var(--melt-c) 0%, color-mix(in srgb, var(--melt-c) 88%, var(--melt-w1)) 15%, color-mix(in srgb, var(--melt-c) 64%, var(--melt-w1)) 32%, color-mix(in srgb, var(--melt-c) 36%, var(--melt-w2)) 49%, color-mix(in srgb, var(--melt-c) 16%, var(--melt-w3)) 66%, color-mix(in srgb, var(--melt-c) 6%, var(--melt-d)) 81%, color-mix(in srgb, var(--melt-c) 1.5%, var(--melt-d)) 92%, var(--melt-d) 100%);} .nb-melt.b{background:linear-gradient(0deg, var(--melt-c) 0%, color-mix(in srgb, var(--melt-c) 88%, var(--melt-w1)) 15%, color-mix(in srgb, var(--melt-c) 64%, var(--melt-w1)) 32%, color-mix(in srgb, var(--melt-c) 36%, var(--melt-w2)) 49%, color-mix(in srgb, var(--melt-c) 16%, var(--melt-w3)) 66%, color-mix(in srgb, var(--melt-c) 6%, var(--melt-d)) 81%, color-mix(in srgb, var(--melt-c) 1.5%, var(--melt-d)) 92%, var(--melt-d) 100%);} /* ocak parıltısı: sakin, sürüklenen sıcak ışık */ .nb-ember{ position:absolute;z-index:0;pointer-events:none;border-radius:50%; width:52vw;height:52vw;max-width:760px;max-height:760px; left:6%;top:50%;translate:0 -50%; background:radial-gradient(closest-side,rgba(216,172,92,.16),transparent 70%); animation:nbDrift 26s ease-in-out infinite alternate; } .nb-ember.e2{ left:auto;right:4%; background:radial-gradient(closest-side,rgba(160,118,47,.15),transparent 70%); animation-duration:34s;animation-direction:alternate-reverse; } @keyframes nbDrift{ from{transform:translate3d(-3%,-2%,0) scale(1)} to{transform:translate3d(4%,3%,0) scale(1.08)} } .numband .container{position:relative;z-index:3} .nb-in{display:flex;flex-direction:column;align-items:center;text-align:center} .nb-eye{color:var(--brass2);margin:0 0 clamp(26px,3.4vw,44px)} /* --- ray: kutu yok, ince ayraçlar --- */ .nb-rail{ display:grid;grid-template-columns:repeat(4,1fr); width:100%;gap:0; } .numband .n{ display:flex;flex-direction:column;align-items:center;gap:0; min-width:0;padding:0 clamp(10px,1.6vw,26px); background:none;border:0;border-radius:0;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; position:relative; } .numband .n + .n::before{ content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px; background:linear-gradient(180deg,transparent,rgba(216,172,92,.34),transparent); } .numband .n b{ font-size:clamp(44px,5.6vw,86px);line-height:1; display:flex;align-items:flex-start;justify-content:center;gap:2px; transition:transform 420ms var(--e-kagit); } .numband .n b i{font-size:.44em;margin-top:.16em;color:var(--brass2)} .numband .n>span{ font-size:11px;letter-spacing:.18em;margin-top:12px;color:var(--cream3); transition:color 320ms var(--ease); } /* Eski kart kuralı (satır ~3059) hover'da hâlâ devreye giriyordu: kutu gölgesi + inset üst çizgi geri geliyor, kalkan rakam o çizgiye dayanıyordu. Hover'da da kutudan eser kalmasın. */ .numband .n:hover{ transform:none;background:none;border-color:transparent;box-shadow:none; } .numband .n:hover b{transform:translateY(-6px)} .numband .n:hover>span{color:var(--brass2)} /* --- ortadan iki yana çizilen altın filaman --- */ .nb-fil{ display:block;width:min(100%,760px);height:1px;overflow:hidden; margin:clamp(30px,3.6vw,52px) 0 clamp(22px,2.6vw,34px); } .nb-fil::before{ content:"";display:block;height:100%; background:linear-gradient(90deg,transparent,var(--brass2) 22%,var(--brass2) 78%,transparent); transform:scaleX(0);transform-origin:50% 50%; transition:transform 1.15s var(--e-manidar); transition-delay:calc(var(--d,0s) + .1s); } .nb-fil.seen::before,.seen .nb-fil::before{transform:scaleX(1)} /* --- alıntı: kutu değil, editoryal söz --- */ .numband .say{ flex:none;max-width:44ch;min-width:0;display:block; background:none;border:0;border-radius:0;box-shadow:none;padding:0; font-family:var(--sans);font-style:italic;font-weight:500; font-size:clamp(17px,1.7vw,24px);line-height:1.55;color:var(--cream2); } @media (max-width:860px){ .nb-rail{grid-template-columns:repeat(2,1fr);row-gap:clamp(26px,5vw,38px)} .numband .n:nth-child(3)::before{content:none} .numband .n:nth-child(3),.numband .n:nth-child(4){padding-top:clamp(24px,4vw,32px)} .numband .n:nth-child(3)::after,.numband .n:nth-child(4)::after{ content:"";position:absolute;top:0;left:12%;right:12%;height:1px; background:linear-gradient(90deg,transparent,rgba(216,172,92,.28),transparent); } } @media (max-width:520px){ .numband{padding-block:clamp(72px,16vw,96px)} .numband .n b{font-size:clamp(38px,12vw,52px)} .numband .n>span{font-size:10px;letter-spacing:.14em} } @media (prefers-reduced-motion:reduce){ .nb-ember{animation:none} .nb-fil::before{transition:none;transform:scaleX(1)} .numband .n b,.numband .n>span{transition:none} .numband .n:hover b{transform:none} } /* ========================================================================== V83 — "DÖRT DURAK" GÖRSELLERİ KIRPILIYORDU Kaynak görseller 800×1200 (2:3 dikey afiş, başlık yazısı en üstte) ama kutu 16/10 yataydı ve cover+center ile üstteki yazı tamamen kesiliyordu. Kutu dikeye çevrildi ve kırpma üstten hizalandı; afiş başlıkları okunuyor. ========================================================================== */ .rnode .rimg{ aspect-ratio:4/5; max-height:440px; } .rnode .rimg .zoom{ background-position:center top; } /* sertifika yatay ve contain ile duruyor → o dikeyde ortada kalsın */ .rnode:last-child .rimg .zoom{background-position:center center} @media (max-width:1020px){ .rnode .rimg{aspect-ratio:3/4;max-height:360px} } @media (max-width:760px){ .rnode .rimg{aspect-ratio:4/5;max-height:none} } /* ========================================================================== V84 — SERTİFİKA KARTI (4. durak) YENİDEN KURGULANDI Sertifika 1255×890 yatay, diğer üç afiş 800×1200 dikey. contain ile alt/üstte ölü siyah bant kalıyordu. Artık "koyu masa üzerinde duran belge" kompozisyonu: arkada iki eğik kağıt katmanı boşluğu doldurur, belge hafif eğik ve gölgeli durur. Ölçü farkı kusur değil, kurgu olur. ========================================================================== */ .rnode .rimg.rcert{ display:flex;align-items:center;justify-content:center; padding:clamp(18px,2vw,34px); border-color:rgba(216,172,92,.3); background: radial-gradient(88% 62% at 50% 16%,rgba(216,172,92,.18),transparent 72%), linear-gradient(158deg,#2b2118 0%,#1a1109 55%,#120b05 100%); } .rcert img{ position:relative;z-index:2;width:100%;height:auto;border-radius:7px; box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 20px -8px rgba(0,0,0,.6), 0 30px 56px -18px rgba(0,0,0,.8); transform:rotate(-1.8deg); transition:transform 480ms var(--e-manidar,cubic-bezier(.2,.7,.2,1)); } .rnode:hover .rcert img{transform:rotate(0deg) scale(1.04)} /* arkadaki iki kağıt: dikey boşluğu doldurur, deste hissi verir */ .rcert-stack{ position:absolute;z-index:1;left:50%;top:50%;translate:-50% -50%; width:calc(100% - 2*clamp(18px,2vw,34px));aspect-ratio:1255/890; pointer-events:none; } .rcert-stack::before,.rcert-stack::after{ content:"";position:absolute;inset:0;border-radius:7px; transition:transform 480ms var(--e-manidar,cubic-bezier(.2,.7,.2,1)); } .rcert-stack::before{background:rgba(241,233,215,.15);transform:rotate(5deg) translateY(-3%)} .rcert-stack::after{background:rgba(241,233,215,.07);transform:rotate(-8deg) translateY(3%)} .rnode:hover .rcert-stack::before{transform:rotate(7.5deg) translateY(-4%)} .rnode:hover .rcert-stack::after{transform:rotate(-11deg) translateY(4%)} @media (prefers-reduced-motion:reduce){ .rcert img,.rcert-stack::before,.rcert-stack::after{transition:none} .rnode:hover .rcert img{transform:rotate(-1.8deg)} } /* ========================================================================== V85 — "CANLI BİR MUTFAK EKOSİSTEMİ" YENİDEN TASARIM Sorun: .bxwrap max-width:1240px ile ortada sıkışmıştı, iki yanda ~380px ölü alan vardı; başlık bloğu da ortalı ve dar olduğu için bölüm bir bütün olarak boş duruyordu. Ayrıca ortalı kutu içeriği geniş plakalarda seyrek kalıyordu. Çözüm: hero/navbar ile aynı geniş raya oturur, başlık iki sütuna yayılır, plaka içerikleri sola hizalanıp dikeyde dağılır; giriş/hover animasyonları 3B'ye taşınır. ========================================================================== */ /* --- ray: header + hero ile aynı genişlik --- */ .bxsec > .container{max-width:var(--rail-max);padding-inline:var(--rail-gut)} .bxwrap{ max-width:none; grid-template-columns:minmax(0,1fr) minmax(0,1.42fr) minmax(0,1fr); gap:clamp(14px,1.3vw,22px); } .bxcol{gap:clamp(14px,1.3vw,22px)} /* --- başlık: sol blok + sağda giriş cümlesi --- */ .bxsec .bx-head{ max-width:none;margin:0 0 clamp(28px,3.2vw,52px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(280px,24vw,400px)); align-items:end;gap:clamp(18px,4vw,72px); text-align:left;justify-items:start; } .bxsec .bx-head .eyebrow{display:flex;justify-content:flex-start} .bxsec .bx-head .lead{text-align:left;margin-top:0;padding-bottom:6px} @media (max-width:900px){ .bxsec .bx-head{grid-template-columns:1fr;align-items:start;gap:16px} } /* --- plakalar: içerik sola hizalı, dikeyde dağılmış --- */ .bxsec .bx{ align-items:flex-start;justify-content:space-between;text-align:left; gap:clamp(10px,1vw,16px); min-height:clamp(196px,15vw,264px); padding:clamp(22px,1.9vw,34px); transform-style:preserve-3d; } .bxsec .bx .bxicon{width:46px;height:46px;border-radius:13px} .bxsec .bx .bxicon svg{width:23px;height:23px} .bxsec .bx .bxwm{width:168px;height:168px;top:-28px;right:-28px} .bxsec .bx .bl{font-size:11px;letter-spacing:.2em} .bxsec .bx .bv{font-size:clamp(40px,3.4vw,64px);letter-spacing:-.03em} .bxsec .bx .bd{max-width:32ch;font-size:13.5px} .bxsec .bx .spark{width:100%;max-width:none;margin-top:0} .bxsec .bx .go2{right:clamp(18px,1.6vw,26px);bottom:clamp(16px,1.4vw,22px);font-size:19px} /* --- merkez video: daha uzun, yavaş ken-burns --- */ .bxsec .bx.bvideo{min-height:clamp(380px,29vw,560px)} .bxsec .bx.bvideo video{ animation:bxKen 26s ease-in-out infinite alternate; transform-origin:52% 46%; } @keyframes bxKen{from{transform:scale(1.02)}to{transform:scale(1.13)}} /* ========================================================================== ANİMASYONLAR ========================================================================== */ /* 1) Giriş: plakalar masaya yatık gelip yerine oturur (3B) */ .bxwrap .bx.rv{ opacity:0; transform:perspective(1200px) translateY(64px) rotateX(14deg) scale(.94); transform-origin:50% 120%; transition:opacity .7s var(--e-manidar,cubic-bezier(.2,.7,.2,1)), transform .9s var(--e-kagit,cubic-bezier(.2,.7,.2,1)); transition-delay:var(--d,0s); } .bxwrap .bx.rv.seen,.seen .bxwrap .bx.rv{opacity:1;transform:perspective(1200px) translateY(0) rotateX(0) scale(1)} /* 2) Boşta: her plaka kendi temposunda süzülür (transform'u meşgul etmez) */ .bxsec .bx{animation:bxfloat 7.4s ease-in-out calc(var(--bi,0)*.85s) infinite} @keyframes bxfloat{0%,100%{translate:0 0}50%{translate:0 -6px}} /* 3) İmleç ışığı — app.js .spot öğelerine --mx/--my yazar. .bx::before ışık süpürmesinde kullanıldığı için ışık ::after'a alındı. */ .bxsec .bx:not(.bvideo)::after{ content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:2;opacity:0; background:radial-gradient(320px at var(--mx,50%) var(--my,50%),rgba(216,172,92,.26),transparent 70%); transition:opacity .4s var(--e-kagit,ease); } .bxsec .bx.bdark::after{background:radial-gradient(320px at var(--mx,50%) var(--my,50%),rgba(216,172,92,.34),transparent 70%)} .bxsec .bx.baccent::after{background:radial-gradient(320px at var(--mx,50%) var(--my,50%),rgba(255,236,214,.3),transparent 70%)} .bxsec .bx:hover::after{opacity:1} /* 4) Hover: kardeşler geri çekilir, seçilen 3B eğilerek öne gelir */ @media (hover:hover) and (min-width:1021px){ .bxwrap:hover .bx{opacity:.5;filter:blur(2px) saturate(.8)} .bxwrap .bx:hover{ opacity:1;filter:none;animation-play-state:paused; transform:perspective(1200px) translateY(-12px) rotateX(3deg) scale(1.035); border-color:rgba(216,172,92,.62); box-shadow: inset 0 0 0 1px rgba(216,172,92,.35), inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px rgba(26,18,7,.09), 0 34px 66px rgba(26,18,7,.16), 0 84px 150px -40px rgba(160,118,47,.42); } .bxwrap .bx.bvideo:hover{transform:perspective(1200px) translateY(-12px) scale(1.02)} /* rakam hoverda hafifçe yükselip parlar */ .bxsec .bx .bv{transition:transform .5s var(--e-kagit,ease),letter-spacing .5s} .bxsec .bx:hover .bv{transform:translateY(-3px);letter-spacing:-.02em} } /* 5) Sparkline artık görünür olunca kendi kendini çizer */ .bxsec .bx.seen .spark path,.seen .bxsec .bx .spark path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--e-manidar,ease) .55s} @media (max-width:1020px){ .bxsec .bx{min-height:150px;animation:none;padding:20px} .bxsec .bx .bv{font-size:clamp(30px,7vw,40px)} .bxsec .bx.bvideo{min-height:260px} .bxwrap .bx.rv{transform:translateY(26px);opacity:0} .bxwrap .bx.rv.seen,.seen .bxwrap .bx.rv{transform:none} } @media (prefers-reduced-motion:reduce){ .bxsec .bx,.bxsec .bx.bvideo video{animation:none} .bxwrap .bx.rv,.bxwrap .bx.rv.seen,.seen .bxwrap .bx.rv{transform:none} .bxwrap .bx:hover{transform:none} } /* ========================================================================== V81 — BANT KENARLARI KESKİN Yumuşak erime denendi ve iki kez başarısız oldu: krem→koyu uzun gradyan ne kadar yumuşatılırsa yumuşatılsın bulanık bir leke gibi okunuyor. Doğrusu net kenar: koyu bant, kağıt zeminden keskin ayrılır. Sitenin hero'su da böyle. Erime elemanları kapatıldı (markup kalsın, geri almak isteyen tek satırla açar). ========================================================================== */ .nb-melt{display:none} /* V81b — bant yüksekliği kısaltıldı (üst/alt boşluk ve iç aralıklar) */ .numband{padding-block:clamp(52px,6vw,84px)} .nb-eye{margin-bottom:clamp(20px,2.4vw,32px)} .nb-fil{margin:clamp(22px,2.6vw,34px) 0 clamp(18px,2vw,24px)} @media (max-width:520px){.numband{padding-block:clamp(44px,10vw,60px)}} /* V85b — kardeş plakalarda blur istenmedi: sadece hafif sönümleme kalsın */ @media (hover:hover) and (min-width:1021px){ .bxwrap:hover .bx{filter:none;opacity:.62} .bxwrap .bx:hover{filter:none;opacity:1} } /* V86 — reel şeridi artık JS ile imleçten sürülüyor; blur da kaldırıldı */ .reelrow:hover .reel{filter:none;opacity:.62} .reelrow .reel:hover{filter:none;opacity:1} /* ========================================================================== V82 — BANT KENARLARINDA ANİMASYONLU DALGA (footer'ın kwave dili) Yumuşak gradyan geçişi iki denemede de leke gibi durdu; keskin kenar temizdi ama düz. Footer'daki çift katmanlı dalga aynı işi hem net hem canlı yapıyor — aynı yol, aynı hareket, aynı zamanlama. Fark: footer'da dalga koyu ve footer'ın DIŞINDA duruyor. Burada bant overflow:hidden (ocak parıltıları taşmasın diye), o yüzden dalga bandın İÇİNDE ve kâğıt renginde çiziliyor — sınırın görüntüsü birebir aynı, sadece hangi tarafın boyandığı ters. ========================================================================== */ /* kbob (dikey salınım) KULLANILMIYOR: kabı 6px oynatıp bandın zeminini kenarda şerit hâlinde açığa çıkarıyordu. Hareket yatay kaymadan geliyor. Ayrıca kenarlara 2px taşma payı var, yuvarlama farkı çizgi bırakmasın. */ .nb-wave{ position:absolute;left:-1px;right:-1px;z-index:2;pointer-events:none; height:calc(clamp(34px,4.4vw,62px) + 2px);overflow:hidden; } /* DİKKAT: çevirme transform ile yapılamaz — kbob animasyonu transform'u animate ettiği için scaleY(-1) siliniyor ve üst dalga ters dönmüyordu. Bağımsız `scale` özelliği transform'dan ayrı çalışır, animasyon ezmez. */ .nb-wave.t{top:-2px;scale:1 -1} .nb-wave.b{bottom:-2px} .nb-wave svg{ position:absolute;bottom:0;left:0;width:200%;height:100%; fill:var(--melt-c,var(--deck-bg,var(--paper))); animation:kslidew 14s linear infinite;will-change:transform; } .nb-wave svg.w2{animation-duration:23.8s;animation-direction:reverse;opacity:.45} .nb-wave.b svg{animation-duration:17s} .nb-wave.b svg.w2{animation-duration:27s} @media (prefers-reduced-motion:reduce){ .nb-wave svg{animation:none} } /* V88 — kaydırma payı yokken ray kontrolleri gizlenir (app.js ctl.hidden) */ .rail-ctl[hidden]{display:none} /* ========================================================================== V61 — SERTİFİKA BÖLÜMÜ: adım kartları + akreditasyon şeridi yeniden (ikonlu madalyonlar, dolan ray, hover'da ışık süpürme) ========================================================================== */ /* ---------- 3 adım ---------- */ .steps3{display:flex;flex-direction:column;gap:clamp(12px,1.3vw,18px);position:relative} .steps3::before{content:none} /* eski kesikli çizgi kalktı */ .s3rail{ position:absolute;left:44px;top:34px;bottom:34px;width:2px;z-index:0; background:repeating-linear-gradient(180deg,rgba(26,18,7,.16) 0 5px,transparent 5px 12px); border-radius:2px; } .s3rail i{ position:absolute;inset:0 0 auto 0;height:0;border-radius:2px; background:linear-gradient(180deg,var(--brass2),var(--brass)); box-shadow:0 0 10px rgba(216,172,92,.55); transition:height 1500ms var(--eo-quart) 260ms; } .steps3.seen .s3rail i{height:100%} /* sağ ip: sol ipin aynası — ok rozetlerinin hizasından iner */ .s3rail-r{left:auto;right:calc(clamp(16px,1.8vw,24px) + 17px)} .st3{ position:relative;z-index:1;overflow:hidden; display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; gap:clamp(14px,1.6vw,20px); border-radius:20px;padding:clamp(16px,1.7vw,22px) clamp(16px,1.8vw,24px); background:linear-gradient(140deg,#FDFAF3,#F1E7D5); border:1px solid var(--line); box-shadow:0 2px 4px rgba(26,18,7,.05),0 14px 32px rgba(26,18,7,.1); opacity:0;transform:translateY(18px); transition:transform 620ms var(--eo-quart) var(--sd,0s),opacity 520ms var(--eo-quart) var(--sd,0s), box-shadow 420ms var(--e-manidar),border-color 420ms; } .steps3.seen .st3{opacity:1;transform:none} .st3::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.72) 48%,rgba(216,172,92,.26) 56%,transparent 72%); transform:translateX(-120%);opacity:0; } .st3:hover::after{animation:s3sheen 900ms var(--eo-quart) forwards} @keyframes s3sheen{ 0%{transform:translateX(-120%);opacity:0} 18%{opacity:1} 100%{transform:translateX(120%);opacity:0} } .steps3.seen .st3:hover{ transform:translateX(10px);border-color:rgba(160,118,47,.55); box-shadow:0 8px 16px rgba(26,18,7,.08),0 30px 62px rgba(26,18,7,.17),0 0 46px rgba(216,172,92,.2); } .s3med{ position:relative;flex:none;width:clamp(52px,5vw,62px);aspect-ratio:1;border-radius:19px; display:grid;place-items:center; background:linear-gradient(140deg,#D8AC5C,#A0762F); box-shadow:0 10px 22px rgba(160,118,47,.34),inset 0 1px 0 rgba(255,255,255,.5); transition:transform 460ms var(--e-kagit),box-shadow 460ms,border-radius 460ms; } .s3med svg{ width:52%;height:52%;fill:none;stroke:#FFF6EE;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1; } .steps3.seen .s3med svg{animation:s3draw 1100ms var(--eo-quart) calc(var(--sd,0s) + .25s) forwards} @keyframes s3draw{to{stroke-dashoffset:0}} .s3med .num{ position:absolute;left:auto;top:auto;right:-6px;bottom:-6px; width:23px;height:23px;min-width:0;border-radius:50%; display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:800; color:var(--ink);background:var(--paper3);border:1px solid rgba(160,118,47,.45); box-shadow:0 4px 10px rgba(26,18,7,.16); transition:transform 380ms var(--e-kagit),background 380ms,color 380ms; } .st3:hover .s3med{transform:rotate(-7deg) scale(1.07);border-radius:24px;box-shadow:0 16px 34px rgba(160,118,47,.45),inset 0 1px 0 rgba(255,255,255,.6)} .st3:hover .s3med .num{transform:rotate(7deg) scale(1.1);background:var(--ink);color:var(--paper3);border-color:var(--ink)} .s3tx{display:block;min-width:0} .s3tx b{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(16px,1.35vw,18px);line-height:1.25} .s3tx p{font-size:13.5px;color:var(--ink2);line-height:1.55;margin-top:4px} .s3tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px} .s3tags em{ font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em; padding:5px 11px;border-radius:999px;color:var(--brass); background:rgba(160,118,47,.09);border:1px solid rgba(160,118,47,.24); transition:background 340ms,color 340ms,border-color 340ms,transform 340ms var(--e-kagit); } .st3:hover .s3tags em{background:rgba(160,118,47,.16);border-color:rgba(160,118,47,.42)} .st3:hover .s3tags em:nth-child(2){transform:translateY(-2px)} .s3go{ flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--line);color:var(--ink3);background:rgba(251,247,238,.7); opacity:0;transform:translateX(-8px); transition:opacity 380ms var(--eo-quart),transform 380ms var(--e-kagit), background 380ms,color 380ms,border-color 380ms; } .s3go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0} .st3:hover .s3go{opacity:1;transform:none;background:var(--ink);color:var(--paper3);border-color:var(--ink)} /* ---------- akreditasyon şeridi ---------- */ .lstrip{ margin-top:clamp(30px,3.6vw,52px);border:1px solid var(--line);border-radius:22px; background: radial-gradient(70% 180% at 12% 0%,rgba(216,172,92,.16),transparent 62%), linear-gradient(140deg,#FCF9F1,#F1E7D6); box-shadow:0 2px 4px rgba(26,18,7,.04),0 18px 44px rgba(26,18,7,.1); padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,30px); display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);flex-wrap:wrap; } .lstrip .ltitle{ display:flex;flex-direction:column;gap:5px;flex:none; padding-right:clamp(16px,2vw,28px);border-right:1px solid var(--line); text-transform:none;letter-spacing:normal;font-size:inherit;font-weight:400;color:inherit; } .lstrip .ltitle b{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)} .lstrip .ltitle i{font-style:normal;font-size:12px;color:var(--ink3);letter-spacing:.01em;text-transform:none} .lstrip .ltiles{display:flex;align-items:stretch;gap:clamp(8px,1vw,14px);flex:1;flex-wrap:wrap;justify-content:flex-start} .ltile{ position:relative;overflow:hidden;flex:1 1 0;min-width:112px; display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px; height:auto;min-height:104px;padding:14px 12px 12px;border-radius:16px; background:rgba(251,247,238,.68);border:1px solid var(--line); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); animation:lglow 8.4s ease-in-out var(--ld,0s) infinite; transition:transform 420ms var(--e-kagit),box-shadow 420ms,border-color 420ms,background 420ms; } .ltile::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,var(--brass2),#A0762F); transform:scaleX(0);transform-origin:0 50%; transition:transform 480ms var(--eo-quart); } .ltile:hover::before{transform:scaleX(1)} .lmark{height:38px;display:grid;place-items:center;transition:transform 460ms var(--e-kagit)} .ltile img{ height:34px;max-height:34px;width:auto;max-width:100%;object-fit:contain; filter:grayscale(1) contrast(.78) opacity(.5); animation:lcolor 8.4s ease-in-out var(--ld,0s) infinite; transition:filter 420ms; } .ltile .lfb{font-size:12px;font-weight:800;color:var(--ink2);text-align:center;line-height:1.2} .ltile em{ font-style:normal;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--ink3);text-align:center;line-height:1.3;white-space:normal; animation:lname 8.4s ease-in-out var(--ld,0s) infinite; transition:color 380ms; } .ltile i{ font-style:normal;font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--brass); text-align:center;line-height:1.3; max-height:0;opacity:0;transform:translateY(6px); transition:max-height 420ms var(--eo-quart),opacity 320ms,transform 420ms var(--e-kagit); } .ltile:hover{ transform:translateY(-6px);background:var(--paper3); border-color:rgba(160,118,47,.42); box-shadow:0 10px 20px rgba(26,18,7,.07),0 26px 50px -14px rgba(160,118,47,.34); animation-play-state:paused; } .ltile:hover .lmark{transform:scale(1.08) translateY(-2px)} .ltile:hover img{filter:grayscale(0) contrast(1) opacity(1);animation-play-state:paused} .ltile:hover em{color:var(--ink);animation-play-state:paused} .ltile:hover i{max-height:32px;opacity:1;transform:none} @keyframes lglow{ 0%,12%,100%{border-color:var(--line);box-shadow:none;transform:translateY(0)} 5%{border-color:rgba(160,118,47,.5);box-shadow:0 10px 26px -8px rgba(160,118,47,.34);transform:translateY(-3px)} } @keyframes lcolor{ 0%,12%,100%{filter:grayscale(1) contrast(.78) opacity(.5)} 5%{filter:grayscale(0) contrast(1) opacity(1)} } @keyframes lname{0%,12%,100%{color:var(--ink3)}5%{color:var(--brass)}} @media (max-width:1020px){ .lstrip .ltitle{border-right:none;width:100%;padding:0 0 6px} .s3rail{left:38px} } @media (max-width:760px){ .st3{grid-template-columns:auto minmax(0,1fr);padding:16px} .s3go{display:none} .s3rail{left:34px} .s3rail-r{left:auto;right:34px} } @media (prefers-reduced-motion:reduce){ .st3,.steps3.seen .st3{opacity:1;transform:none;transition:none} .st3::after{display:none} .s3med svg{stroke-dashoffset:0;animation:none} .s3rail i{height:100%;transition:none} .ltile,.ltile img,.ltile em{animation:none} .ltile img{filter:grayscale(.3) opacity(.85)} } /* V89 — seans bandındaki yuvarlak video küçültüldü (13vw/180px çok baskındı) */ .circ-vid{width:clamp(78px,8.2vw,120px);border-width:3px;right:18px;bottom:18px} @media (max-width:760px){.circ-vid{width:66px;border-width:2px;right:12px;bottom:12px}} /* ========================================================================== V90 — RANDEVU AL BUTONU: künye plakasının altında ortalandı + canlandı Eskiden inline align-self:flex-start ile sola yapışıktı; plakanın genişliğiyle hizasız duruyordu. Artık ortada ve dikkat çeken bir nefes/halka ritmi var (hover'da durur, buton öne çıkar). ========================================================================== */ .seans-btn{ align-self:center; position:relative; min-height:52px;padding-inline:34px;font-size:15.5px; transition:transform 380ms var(--e-kagit,cubic-bezier(.2,.7,.2,1)),box-shadow 380ms; animation:seansBreath 3.6s ease-in-out infinite; } @keyframes seansBreath{ 0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px rgba(26,18,7,.22),0 0 0 0 rgba(160,118,47,0)} 50% {box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 28px rgba(26,18,7,.26),0 0 0 9px rgba(160,118,47,.12)} } /* dışa açılan ince pirinç halka */ .seans-btn::after{ content:"";position:absolute;inset:-2px;border-radius:inherit; border:1px solid rgba(216,172,92,.6);pointer-events:none; opacity:0;animation:seansRing 3.6s ease-out infinite; } @keyframes seansRing{ 0% {opacity:.6;transform:scale(1)} 65% {opacity:0;transform:scale(1.16)} 100%{opacity:0;transform:scale(1.16)} } .seans-btn:hover{ animation-play-state:paused; transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px rgba(26,18,7,.2),0 30px 56px -16px rgba(160,118,47,.5); } .seans-btn:hover::after{animation-play-state:paused;opacity:0} .seans-btn:active{transform:translateY(0)} @media (max-width:1020px){.seans-btn{align-self:stretch;justify-content:center}} @media (prefers-reduced-motion:reduce){ .seans-btn,.seans-btn::after{animation:none} .seans-btn:hover{transform:none} } /* ========================================================================== V83 — ŞEFLER BÖLÜMÜ EKOSİSTEMİN ÜSTÜNE KAYARAK ÇIKAR Hero → deck geçişindeki "perde yükselir" hareketinin aynısı, ama tek bir bölüm çiftine sınırlı. Sarmalayıcı (.stkpair) olmadan sticky bölüm sayfanın sonuna kadar iğneli kalır ve sonraki bölümlerin arkasına düşer; sarmalayıcı bitince sticky serbest bırakılıyor. KRİTİK: üstüne kayan bölüme overflow:clip/hidden VERİLMEZ. V69'da tam bu kombinasyon (sticky kardeş + kırpan katman + video) Chromium'un katman rasterini bozuyordu. .living'in clip'i burada kaldırılır. ========================================================================== */ .stkpair{position:relative} .stkpair > #ekosistem{position:sticky;top:0;z-index:0} .stkpair > #sefler, .stkpair > .stkslide{ position:relative;z-index:2;overflow:visible; margin-top:clamp(-90px,-7vh,-40px); border-radius:clamp(20px,3vw,34px) clamp(20px,3vw,34px) 0 0; box-shadow:0 -26px 64px rgba(15,10,5,.42); } @media (prefers-reduced-motion:reduce){ .stkpair > #ekosistem{position:relative;top:auto} .stkpair > #sefler,.stkpair > .stkslide{margin-top:0} } /* ========================================================================== V62 — AKREDİTASYON ŞERİDİ: kesintisiz kayan bant Kutular iki kez basılır; ray tam yarısı kadar kayınca döngü dikişsiz kapanır. ========================================================================== */ /* flex-basis 0: içerik genişliği max-content olduğu için `auto` bırakılırsa şerit alt satıra kayıyor ve soldaki başlıkla hizası bozuluyor */ .lstrip{flex-wrap:nowrap} .lmarq{ position:relative;flex:1 1 0;min-width:0;overflow:hidden;align-self:stretch; display:flex;align-items:center; padding-block:4px; /* hover'daki yükselme kırpılmasın */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%); } .ltrack{ --lgap:clamp(9px,1vw,14px); display:flex;align-items:stretch;width:max-content; animation:lmarquee 46s linear infinite; will-change:transform; } /* boşluk gap yerine margin: ray genişliğinin tam yarısı = kusursuz döngü */ .ltrack .ltile{ flex:0 0 auto;width:clamp(138px,11.5vw,172px);min-width:0 !important; margin-right:var(--lgap); animation:none; /* bantta sıralı parlama yok */ } .ltrack .ltile img{animation:none;filter:grayscale(1) contrast(.78) opacity(.5)} .ltrack .ltile em{animation:none} @keyframes lmarquee{to{transform:translateX(-50%)}} /* imleç bandın üstündeyken akış durur — rol yazısı okunabilsin */ .lmarq:hover .ltrack,.lmarq:focus-within .ltrack{animation-play-state:paused} @media (max-width:1020px){ .lstrip{flex-wrap:wrap;gap:12px} .lmarq{ width:100%;flex:1 1 100%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%); } .ltrack{animation-duration:26s} .ltrack .ltile{width:clamp(130px,36vw,160px);min-width:0 !important} } @media (prefers-reduced-motion:reduce){ .ltrack{animation:none;width:auto;overflow-x:auto} .lmarq{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none} .lmarq::-webkit-scrollbar{display:none} } /* ========================================================================== V84 — İLK EKRANDA ALTTAKİ ŞERİT GÖRÜNMESİN .deck hero'nun üstüne -5vh (mobilde -3.5vh) binerek başlıyor; hero yüksekliği ise 100svh − (anons+header) olarak hesaplanıyordu. Sonuç: deck'in tepesi katlamanın 5vh yukarısında kalıyor ve deck'in ilk öğesi olan kayan şerit ilk ekranda görünüyordu. Çözüm: hero'ya bindirme kadar yükseklik ekle — deck'in tepesi tam katlamaya otursun. Bindirme değerleri değişirse burası da güncellenmeli. ========================================================================== */ .hero{min-height:calc(100svh - var(--hoff,112px) + 5vh)} @media (max-width:760px){ .hero{min-height:calc(100svh - var(--hoff,104px) + 3.5vh)} } /* V91 — "dört durak" ile "platform bir bakışta" arasındaki dikey boşluk azaltıldı (iki .section'ın 150px'lik padding'leri üst üste binip ~300px ölü alan yapıyordu) */ #yolculuk{padding-bottom:clamp(44px,4.6vw,80px)} .bxsec{padding-top:clamp(44px,4.6vw,80px)} /* ========================================================================== V85 — SEANS BÖLÜMÜ SERTİFİKANIN ÜSTÜNE KAYARAK ÇIKAR V83'ün aynısı, tek fark: #sefler koyu bir bant ve kendi zemini var. #seans ise saydam — bölümlerin data-bg'si DECK'i boyuyor, bölümün kendisini değil. Üstüne kayan katman saydam olursa arkasındaki sabitlenmiş bölüm içinden görünür; bu yüzden #seans'a kendi zemini veriliyor (data-bg ile aynı renk, görsel fark yok). Yuvarlak üst köşe geldiği için satır içi border-top da kaldırılıyor. ========================================================================== */ .stkpair > #sertifika{position:sticky;top:0;z-index:0} .stkpair > #seans{ position:relative;z-index:2;overflow:visible; background:#FFFFFF;border-top:0; margin-top:clamp(-90px,-7vh,-40px); border-radius:clamp(20px,3vw,34px) clamp(20px,3vw,34px) 0 0; box-shadow:0 -26px 64px rgba(15,10,5,.16); } @media (prefers-reduced-motion:reduce){ .stkpair > #sertifika{position:relative;top:auto} .stkpair > #seans{margin-top:0} } /* ========================================================================== V63 — #sertifika: SOLDAN uçan sertifika materyalleri .kobj motoru aynen kullanılır; --tx negatif, --ry ters işaretli. ========================================================================== */ /* katmanda hem soldan hem sağdan giren nesne var: bakış merkezi ortada */ .kobjs--l{perspective-origin:50% 42%} /* Bölüm sticky ve alt kısmı bir sonraki bölüm tarafından örtülüyor; nesneler bu yüzden başlığın solundaki açık banda toplanır. */ .co-roll {--w:clamp(190px,20vw,300px);--tx:-660px;--ty:-70px;--rot:26deg;--ry:52deg;--dp:16;--fdur:8s;top:-1%;left:-4%;z-index:5} .co-books{--w:clamp(112px,11.5vw,172px);--tx:-560px;--ty:-40px;--rot:34deg;--ry:58deg;--dp:26;--fdur:5.8s;--fdel:.45s;top:2%;left:14%;z-index:6} .co-pen {--w:clamp(155px,15.5vw,238px);--tx:-760px;--ty:60px;--rot:-20deg;--ry:44deg;--dp:12;--fdur:6.8s;--fdel:.9s;top:17%;left:-2%;z-index:4} /* sağ üst köşe: madalya sağdan girer (--tx pozitif, --ry ters) */ .co-seal {--w:clamp(122px,13vw,196px);--tx:640px;--ty:-60px;--rot:-26deg;--ry:-50deg;--dp:22;--fdur:7.4s;--fdel:1.25s;top:1%;right:-2%;z-index:5} @media (max-width:1280px){ .co-pen{display:none} .co-roll{--w:clamp(170px,18vw,230px)} } /* V85b — şefler bandı biraz daha aşağı sürsün. Bölüm 775px'ti; alt boşluğu 100px olduğu için koyu bant erken bitiyor, hemen ardından "Stüdyodan kareler"in 91px'lik üst boşluğu geliyordu — ikisi üst üste ~190px'lik boş bir kuşak yapıyordu. */ /* Bant en az bir ekran boyu olsun: ekranda hiç beyaz kalmasın. İçerik dikeyde ortalanır, yoksa alt kısımda kocaman boşluk kalıyordu. */ .stkpair > #sefler{ /* display DEĞİŞTİRİLMEZ: flex de grid de .container'ı shrink-to-fit yapıp şef kartlarını ve haritayı daraltıyor. */ padding-top:clamp(80px,10vh,140px); padding-bottom:clamp(48px,6vh,90px); } #kareler{padding-top:clamp(48px,5vh,72px)} /* ========================================================================== V64 — ÖĞRENCİ NOTLARI: merkezde şef, etrafında iğnelenmiş notlar Dış katman (.stnote) = yerleşim + giriş + imleç parallax'ı İç katman (.stcard) = iğneden sallanma animasyonu + hover ölçeği (iki katman ayrı; animasyon ile geçiş aynı özelliği çekişmesin) ========================================================================== */ .ststage{ position:relative;min-height:clamp(500px,42vw,628px); --mx:0;--my:0; } /* --- merkezdeki şef --- */ .stfig{ position:absolute;left:50%;bottom:0;z-index:2;pointer-events:none; width:clamp(380px,50vw,760px); translate:calc(-50% + var(--mx) * 6px) 0; opacity:0;transform:translateY(38px) scale(.96); transition:opacity 900ms var(--eo-quart) .1s,transform 1000ms var(--eo-quart) .1s; } .ststage.seen .stfig{opacity:1;transform:none} .stfig img{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 46px rgba(26,18,7,.28))} /* arkasında sıcak hale + zemine oturan gölge */ .stfig::before{ content:"";position:absolute;left:50%;top:12%;translate:-50% 0;z-index:-1; width:118%;aspect-ratio:1;border-radius:50%; background:radial-gradient(closest-side,rgba(216,172,92,.34),rgba(216,172,92,.1) 58%,transparent 74%); animation:stHalo 7s ease-in-out infinite alternate; } .stfig::after{ content:"";position:absolute;left:50%;bottom:-14px;translate:-50% 0; width:74%;height:34px;border-radius:50%; background:radial-gradient(closest-side,rgba(26,18,7,.28),transparent 72%); filter:blur(6px); } @keyframes stHalo{from{opacity:.72;scale:.97}to{opacity:1;scale:1.04}} /* --- notlar --- */ .stnote{ position:absolute;margin:0;padding:0;background:none;border:0;box-shadow:none; rotate:0deg;width:clamp(240px,25vw,368px);z-index:3; opacity:0; transform:translate3d(var(--ex,0px),26px,0) scale(.94); transition:opacity 640ms var(--eo-quart) var(--sd,0s),transform 760ms var(--eo-quart) var(--sd,0s); } .stnote::after{content:none} .ststage.seen .stnote{ opacity:1; transform:translate3d(calc(var(--mx) * var(--dp,10) * 1px),calc(var(--my) * var(--dp,10) * .5px),0); } /* yerleşim: iki sol, iki sağ, biri önde ortada */ .stnote.n1{left:0;top:0;--ex:-90px;--dp:14} .stnote.n2{left:2%;top:48%;--ex:-110px;--dp:20} .stnote.n3{right:0;top:0;--ex:90px;--dp:14} .stnote.n4{right:2%;top:48%;--ex:110px;--dp:20} .stnote.n5{ left:50%;bottom:-6%;top:auto;width:clamp(240px,23vw,332px);z-index:4;--ex:0px;--dp:8; margin-left:calc(clamp(240px,23vw,332px) / -2); } /* iç kart: iğneden sallanır */ .stcard{ position:relative;padding:30px 24px 22px; background:linear-gradient(178deg,#FCF8EF,#F4EBD9); border:1px solid rgba(26,18,7,.1);border-radius:5px; box-shadow:0 2px 5px rgba(26,18,7,.07),0 18px 40px -12px rgba(26,18,7,.24); transform-origin:50% 0; rotate:var(--tt,0deg); animation:stSway var(--fd,7s) ease-in-out var(--fdel,0s) infinite alternate; transition:scale 420ms var(--e-kagit),box-shadow 420ms,border-color 420ms; } @keyframes stSway{ from{translate:0 0;rotate:calc(var(--tt,0deg) - 1.1deg)} to {translate:0 -10px;rotate:calc(var(--tt,0deg) + 1.3deg)} } .stcard::after{ content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:12px;z-index:-1; background:radial-gradient(60% 100% at 50% 0%,rgba(26,18,7,.18),transparent 72%); filter:blur(3px); } /* sırayla vurgu + hover: yerinde büyür, pirinç kenar */ .stnote.on .stcard,.stnote:hover .stcard{ scale:1.045;animation-play-state:paused; border-color:rgba(160,118,47,.5); box-shadow:0 6px 14px rgba(26,18,7,.09),0 34px 66px -16px rgba(160,118,47,.45),0 0 0 4px rgba(216,172,92,.1); } .stnote.on .stpin,.stnote:hover .stpin{scale:1.18} .stnote:hover{z-index:6} .stcard blockquote{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink);font-weight:500} .stcard blockquote::before{content:"“";color:var(--brass);font-size:26px;line-height:0;vertical-align:-6px;margin-right:2px} .stcard figcaption{ margin-top:16px;padding-top:12px;border-top:1px dashed rgba(26,18,7,.18); display:flex;flex-direction:column;gap:2px; } .stcard figcaption b{font-size:13px;font-weight:800;color:var(--ink)} .stcard figcaption i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)} .stcard .stpin{ position:absolute;top:-9px;left:50%;translate:-50% 0;width:16px;height:16px;border-radius:50%; background:radial-gradient(circle at 34% 30%,#E7BC6C,#9A7226 62%,#6E4E17); box-shadow:0 3px 7px rgba(26,18,7,.34),inset 0 1px 0 rgba(255,255,255,.5); transition:scale 380ms var(--e-kagit); } /* --- dar ekran: sahne dağılır, klasik ızgara --- */ @media (max-width:1180px){ .stnote{width:clamp(210px,22vw,290px)} .stnote.n5{width:clamp(210px,21vw,280px);margin-left:calc(clamp(210px,21vw,280px) / -2)} .stfig{width:clamp(300px,38vw,500px)} } @media (max-width:1020px){ .ststage{ min-height:0;display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(16px,2.4vw,26px); } .stfig{position:relative;left:auto;bottom:auto;translate:none;order:-1;flex:0 0 100%;width:100%;margin-inline:auto} /* flex-basis:100% width'i ezdiği için ölçü görselin kendisinden verilir */ .stfig img{max-width:min(320px,62vw);margin-inline:auto} .stfig::before{width:min(360px,70vw);left:50%} .stfig::after{display:none} .stnote,.stnote.n1,.stnote.n2,.stnote.n3,.stnote.n4,.stnote.n5{ position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-left:0; flex:1 1 clamp(250px,42%,340px);width:auto; } } @media (max-width:640px){ .stnote,.stnote.n5{flex:1 1 100%} .stcard{padding:26px 18px 18px} } @media (prefers-reduced-motion:reduce){ .stcard{animation:none} .stfig::before{animation:none} .stnote,.ststage.seen .stnote{opacity:1;transform:none;transition:none} .stfig,.ststage.seen .stfig{opacity:1;transform:none;transition:none} } /* V86b — dalga kenar + ocak parıltısı tüm koyu bantlarda geçerli. .band-dark zaten position:relative; .living'in overflow:clip'i dalgayı temiz kırpıyor. #sefler hariç: o bir sticky çiftin üst katmanı, üstünde dalga anlamsız olurdu. */ .band-dark:not(#sefler) > .nb-wave{z-index:1} /* ========================================================================== V65 — #sefler: dikey "ŞEFLERİMİZ" konturu sağ kenardan alınıp bölümün altındaki boş banda yatay imza olarak yerleştirildi. ========================================================================== */ #sefler > .vlabel{ writing-mode:horizontal-tb; top:auto;right:auto;left:50%;bottom:clamp(10px,2.2vw,34px); transform:translateX(-50%); width:max-content;max-width:calc(100% - 2 * var(--gut)); font-size:clamp(44px,10.2vw,152px); letter-spacing:.16em;text-indent:.16em; /* son harfin sağ boşluğu dengelensin */ line-height:.9;white-space:nowrap; -webkit-text-stroke:1.4px rgba(216,172,92,.22); } #sefler:hover > .vlabel{-webkit-text-stroke-color:rgba(216,172,92,.42);color:rgba(216,172,92,.06)} @media (max-width:1180px){ #sefler > .vlabel{display:block} /* dikey sürümde gizleniyordu, altta görünsün */ } @media (max-width:760px){ #sefler > .vlabel{font-size:clamp(34px,12vw,64px);bottom:8px;letter-spacing:.1em;text-indent:.1em} } /* ========================================================================== V66 — TİPOGRAFİ: Fraunces (başlık) + Plus Jakarta Sans (gövde) Fraunces değişken bir opsz eksenine sahip: punto büyüdükçe kontrast artar, küçüldükçe kalınlaşıp okunur kalır. Tarayıcı bunu font-size'dan türetsin. ========================================================================== */ html{font-optical-sizing:auto} body{font-family:var(--sans);letter-spacing:-.002em} /* Fraunces'ın x-yüksekliği Montserrat'tan düşük: başlıklarda satır arası biraz açılır */ .h1,.h2,.h3,.display,.display2,h1,h2,h3{font-family:var(--serif)} .h1,.display,.display2{line-height:1.04} .h2{line-height:1.12} /* rakamlar serif'te eski-stil çıkmasın — tabloda hizalı, modern rakam */ .stat b,.numband .n b,.event .date b,.event .amt,.ccard .price,.buy-panel .amt, .keyfacts b,.hero-meta2 b,.hero-statsbar b,.hero-stats b,.hero-meta b, .fprice,.kt span,.fbar .fp,.ic-foot,.fps b{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; } /* küçük punto büyük harf blokları (eyebrow, etiket) gövde ailesinde kalsın */ .eyebrow,.lbl,.kicker,.ltitle,.mlegend,.plabel,.ftag,.s3tags em,.fpk{font-family:var(--sans)} /* ========================================================================== V67 — Fraunces satır aralığı düzeltmesi Fraunces'ın alt uzantıları (g ğ y ş p) Montserrat'tan belirgin derin. Eski 1.0–1.05 satır aralığında: (a) üst satırın kuyruğu alt satırın üstüne biniyor, (b) bölüm kenarındaki `overflow:clip` kuyruğu kesiyordu. Çözüm: satır aralığını açmak + mürekkebin taşma payı için alt dolgu. ========================================================================== */ .display,.display2,.h1,h1, .hero-copy3 .display2,.hero-copy3 .display{line-height:1.28} .h2,h2{line-height:1.3} .h3,h3{line-height:1.3} .h4,h4{line-height:1.4} /* kuyruklar bölüm kenarında kırpılmasın */ .display,.display2,.h1,.h2,.h3,h1,h2,h3{padding-bottom:.06em} /* tek satırlık dekoratif başlıklarda da aynı pay */ .stroke-word,.vlabel,.chef-row .nm,.fcard .name,.fpt,.cmeta b{line-height:1.16} /* ========================================================================== V68 — MOBİL TEMEL: kadraj disiplini Bu dosya sürüm blokları hâlinde büyüdüğü için birçok masaüstü kuralı kendi medya sorgusundan SONRA yeniden tanımlanmış; mobil düzeltmeler sessizce eziliyordu. Bu blok en sonda durur ve mobil kuralları kesinleştirir. Ana kalıp hatası: `grid-template-columns:1fr` = `minmax(auto,1fr)` — auto minimum içerik genişliğidir; yatay kaydırıcı/uzun metin içeren sütun kadrajı aşar. Her yerde `minmax(0,1fr)` kullanılır. ========================================================================== */ @media (max-width:1020px){ /* --- genel: hiçbir ızgara/esnek çocuk içerik genişliğine şişmesin --- */ .container > *,.hero-mid > *,.fanwrap > *,.chefzone > *,.certx > *, .seansrow > *,.stagegrid > *{min-width:0} /* --- hero: söz üstte, kayıt paneli altta; iki sütun yok --- */ .hero .hero-mid{grid-template-columns:minmax(0,1fr) !important;gap:18px;align-items:start} .hero-copy3{max-width:none !important;width:100%} .hq3{max-width:none;width:100%;margin-inline:0} .hero-copy3 .display2{font-size:clamp(30px,8.6vw,44px);letter-spacing:-.02em;line-height:1.16} /* --- yelpaze: sütun içerik genişliğine şişmesin, ray kendi içinde kaysın --- */ .fanwrap{grid-template-columns:minmax(0,1fr);gap:18px} .fanwrap > *{min-width:0;max-width:100%} .fan{min-width:0;max-width:100%;width:100%;overflow-x:auto;overscroll-behavior-x:contain} .fpanel{min-width:0;max-width:100%} } /* --- V68/b: taşan bileşenler (min-width:auto tuzağı + sabit sütun genişlikleri) --- */ @media (max-width:1020px){ /* esnek/ızgara çocukları içerik genişliğine şişmesin */ .container > *,.split > *,.detail-cols > *,.kd-left > *,.kd-right > *, .csb > *,.kx-fbar > *,.sd-copy > *,.seansrow > *,.certx > *,.chefzone > *, .fanwrap > *,.hero-mid > *,.ststage > *,.certx,.detail-cols,.split{min-width:0} /* sabit px sütunlu ikili düzenler tek sütuna iner */ .split{grid-template-columns:minmax(0,1fr) !important;gap:clamp(16px,4vw,24px)} .detail-cols{grid-template-columns:minmax(0,1fr) !important} /* filtre çipleri: satırı sarmalayan kutu kadraja kilitlenir, çipler içeride kayar */ .kx-chipwrap{flex:1 1 100%;min-width:0;max-width:100%} .chipbar,.cstat-strip,.sd-chips,.ic-chips,.catnav{ max-width:100%;overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none;-ms-overflow-style:none; } .chipbar::-webkit-scrollbar,.cstat-strip::-webkit-scrollbar, .sd-chips::-webkit-scrollbar,.catnav::-webkit-scrollbar{display:none} .csb{flex-wrap:wrap} .cstat-strip{width:100%} .count-note{flex:1 1 100%;max-width:100%} } /* --- V68/c: dokunulabilirlik ve okunabilirlik --- */ @media (max-width:1020px){ /* metin bağlantıları parmak için: 27px yükseklik → ~44px dokunma alanı */ a.lnk{min-height:44px;display:inline-flex;align-items:center;gap:8px} .chipbar button,.catnav button,.ic-chips button,.sugg button,.chip{min-height:40px} .tabbar .ti{min-height:52px} /* ikon-butonlar kare ve yeterli */ .rail-ctl button,.bq-nav button,.fab,.ann-social a{min-width:40px;min-height:40px} } @media (max-width:640px){ /* en küçük yazılar okunur tabana çekilir (tümü büyük harf + aralıklı olanlar hariç) */ .fanit .fbar .fk{font-size:10px} .fanit .ftag{font-size:10px;padding:6px 12px} .ic-uni,.ic-sub{font-size:11px} .ltile em{font-size:10.5px} .ltile i{font-size:10.5px} .stcard figcaption i,.s3tags em{font-size:11px} /* gövde metni mobilde biraz büyür, satır arası açılır */ body{font-size:16px;line-height:1.62} .lead{font-size:15.5px;line-height:1.6} p{text-wrap:pretty} } /* iOS'ta 16px altı input odakta sayfayı zumluyor */ @media (max-width:1020px){ input,select,textarea{font-size:16px} } /* --- V68/d: scroll koreografisi mobilde kapalı --- İki bölümün üst üste kayması (sticky çift) küçük ekranda yön duygusunu bozuyor ve alta uzun boş bantlar bırakıyor. Telefonda bölümler normal akar. */ @media (max-width:1020px){ .stkpair > #ekosistem,.stkpair > #sertifika{position:relative;top:auto;z-index:auto} /* üst üste binme kalkınca gölge/negatif marj gereksiz; ama mobildeki "çerçeveli kart" görünümü (margin-inline+radius) korunur */ .stkpair > #sefler{margin-top:0;box-shadow:none} .stkpair > #seans{margin-top:0;border-radius:0;box-shadow:none} /* sticky hero de mobilde sabitlenmesin */ .hero{position:relative} /* min-height sticky için 100svh'ydi; mobilde içerik kadar yer kaplasın */ .hero{min-height:auto;padding-bottom:clamp(24px,6vw,40px)} #sefler,#sertifika{min-height:0} } /* --- V68/e: mobil kontrast — hareketli zemin üzerindeki metin okunur olsun --- */ @media (max-width:1020px){ .hero .veil{background:linear-gradient(180deg,rgba(10,7,4,.55) 0%,rgba(10,7,4,.72) 46%,rgba(10,7,4,.88) 100%)} .hero .veil2{opacity:.9} .hero-copy3 .lead{color:rgba(241,233,215,.92)} } /* --- V68/f: bento ızgarası (satır 5768'deki geç tanım mobil kuralları eziyordu) --- */ @media (max-width:1020px){ .bxwrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-block:0;max-width:none} .bxl,.bxr{transform:none} .bxcol{gap:12px} .bx{min-height:132px;padding:18px 16px} .bx .bd{max-width:none} } @media (max-width:640px){ .bxwrap{grid-template-columns:minmax(0,1fr)} .bx{min-height:0;padding:20px 18px} .bx .bv{font-size:clamp(26px,8vw,34px)} } /* --- V68/g: odometre — Fraunces metriği 1em hücreye sığmıyordu --- Rakam kutuları 1em adımla kaydırılıyor (JS translateY(-Nem)); ancak line-height:1em ile yazı tipinin ascent/descent'i hücreye sığmadığından komşu rakamın mürekkebi sızıyordu. Adım korunur, glif hücrede ortalanır. */ .od-col{display:block;height:1em;overflow:hidden;line-height:1} .od-strip{display:block} .od-strip > *{ display:flex;align-items:center;justify-content:center; height:1em;line-height:1;font-variant-numeric:lining-nums tabular-nums; } /* --- V68/h: sıkışan sütunlar (kelime kelime saran metinler) --- */ @media (max-width:640px){ /* "Kursunuzu seçin" adım satırı: görsel + başlık + açıklama yan yana sığmıyor */ .rnode{flex-direction:column;align-items:center;text-align:center;gap:12px} .rnode > *{width:100%;min-width:0} .rnode img,.rnode .ph,.rnode .thumb{max-width:190px;margin-inline:auto} .rnode h3,.rnode b,.rnode p{text-align:center;max-width:36ch;margin-inline:auto} /* şef kartı ızgarası tek sütuna iner (176px'e rota metni sığmıyordu) */ .chef-grid{grid-template-columns:minmax(0,1fr)} } /* --- V68/i: mobilde hamburger sağ köşeye --- */ @media (max-width:1020px){ .nav{justify-content:space-between} .menu-btn{margin-left:auto;margin-right:0;order:99} } /* --- V68/j: yelpaze mobilde yatay ray --- Masaüstündeki yay geometrisi (.fanit.act / :hover transform'ları) medya sorgusundan SONRA tanımlı olduğu için mobilde de uygulanıyordu: aktif kart ölçekleniyor ve kayıyor, rayın ortasında boşluk açılıyordu. */ @media (max-width:1020px){ .fan .fanit,.seen .fanit,.fan .fanit.act,.fan .fanit:hover, .seen .fan .fanit:hover,.fan:hover .fanit:not(.act):not(:hover){ transform:none;scale:1;opacity:1;filter:none; } .fan .fanit.act{z-index:auto} .fan{height:auto;align-items:stretch;padding-bottom:14px} .fan .fanit{scroll-snap-align:center} } /* ========================================================================== V69 — HIZLI KAYIT PANELİ: kutu kaldırıldı, metinler gölgeyle okunuyor Koyu cam kart (arka plan + kenarlık + blur + gölge) tamamen kalkar; içerik doğrudan hero fotoğrafının üstünde durur. Etiket/başlık/not metinlerine çift katmanlı text-shadow eklenir (dar+koyu / geniş+yumuşak) ki fonun en parlak (alevli) bölgesinde bile okunur kalsın. Form alanları kendi ince camsı stilini korur — kaldırılan "kutu" büyük dış kart, form kontrolleri değil. ========================================================================== */ .hq3{ position:relative; background:none;border:none;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; padding:0;border-radius:0; } /* kenarsız, yumuşak karartma: "kutu" değil ama metnin arkasına biraz kontrast koyar — fotoğrafın en parlak (alevli) yerinde bile okunsun */ .hq3::before{ content:"";position:absolute;inset:-10% -14%;z-index:-1;pointer-events:none; background:radial-gradient(60% 70% at 38% 40%,rgba(0,0,0,.42),transparent 72%); filter:blur(6px); } .hq3 .eyebrow, .hq3 .qtitle, .hq3 .qnote, .hq3 .qform label, .hq3 input::placeholder, .hq3 .sugg button{ text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.7),0 14px 30px rgba(0,0,0,.55); } .hq3 .eyebrow{color:var(--brass2);font-weight:700} .hq3 .qtitle{color:#FFFDF8} .hq3 .qnote{color:var(--cream)} .hq3 input,.hq3 select{ background:rgba(15,10,5,.5);border-color:rgba(241,233,215,.32); } .hq3 .sugg button{border-color:rgba(241,233,215,.34);color:var(--cream)} @media (max-width:1020px){ .hq3{padding:0} } /* ========================================================================== V70 — BİRE BİR SEANS: beyaz zeminde asimetrik editoryal düzen Eski: 21:9 tam-genişlik video + altında düz metin satırı + inline stille boyanmış camsı krem kutu (istatistikler). Yeni: sol dikey/portre video paneli (perde efekti korunur) + sağda başlık/açıklama/ikonlu istatistik listesi — kutu yok, ince ayraç çizgileriyle bölünür. ========================================================================== */ .seans2{ display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(28px,4.4vw,68px);align-items:center; } /* eski .wide21{min-height:280px} tabanı, dar sütunda aspect-ratio ile çakışıp genişliği kutunun dışına taşırıyordu (Safari'de belirginleşiyor) — genişlik burada açıkça sabitlenip o taban devre dışı bırakılıyor */ .seans2-media{ width:100%; position:relative; border-radius:26px; overflow:hidden; box-shadow:0 1px 2px rgba(26,18,7,.06),0 24px 48px -18px rgba(26,18,7,.22),0 60px 100px -40px rgba(26,18,7,.2); transform:translateZ(0); } .seans2-media .media{width:100%} .seans2-media .wide21{ width:100%;min-height:0;max-width:100%; aspect-ratio:4/5;border-radius:26px; } .seans2-content{ padding-block:4px; min-width:0; position:relative; z-index:1; } .seans2-content::before{ content:""; position:absolute; top:-80px; right:10px; width:140px; height:140px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath id='c' fill='none' d='M 50,50 m -35,0 a 35,35 0 1,1 70,0 a 35,35 0 1,1 -70,0'/%3E%3Ctext font-size='11' font-weight='700' font-family='sans-serif' letter-spacing='2.5' fill='%23a0762f' opacity='0.3'%3E%3CtextPath href='%23c'%3EBIRE BIR SEANS %E2%80%A2 MASTERCLASS %E2%80%A2 %3C/textPath%3E%3C/text%3E%3C/svg%3E") center/contain no-repeat, radial-gradient(circle, rgba(160,118,47,0.06) 0%, transparent 65%); z-index:-1; pointer-events:none; animation:badgeSpin 24s linear infinite; } @keyframes badgeSpin{ to{transform:rotate(360deg)} } /* ---------- ikonlu istatistik listesi: kutu yok, ince ayraç ---------- */ .seans-facts{ display:grid;grid-template-columns:repeat(2, 1fr);gap:20px; margin-top:clamp(28px,3.2vw,40px); } .sf{ display:flex;align-items:center;gap:16px; padding:22px 24px; background:rgba(26,18,7,.03); border:1px solid rgba(26,18,7,.06); border-radius:20px; transition:background 320ms,transform 320ms,box-shadow 320ms var(--e-kagit),border-color 320ms; } .sf:hover{ background:#fff; transform:translateY(-3px); box-shadow:0 12px 24px -10px rgba(26,18,7,.12); border-color:rgba(160,118,47,.2); } .sf-ic{ flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:rgba(160,118,47,.09);border:1px solid rgba(160,118,47,.22); transition:background 320ms,border-color 320ms,transform 320ms var(--e-kagit); } .sf-ic svg{width:20px;height:20px;fill:none;stroke:var(--brass);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .sf:hover .sf-ic{background:var(--brass);border-color:var(--brass);transform:scale(1.08)} .sf:hover .sf-ic svg{stroke:#FFF8EA} .sf-tx{display:flex;flex-direction:column;gap:2px;min-width:0} .sf-tx i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)} .sf-tx b{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sf-tx b.sf-price{color:var(--appetite)} .seans-btn{margin-top:clamp(36px,4vw,52px);min-height:56px;font-size:16.5px;padding:0 36px} @media (max-width:1020px){ .seans2{grid-template-columns:minmax(0,1fr);gap:26px} .seans2-media .wide21{aspect-ratio:16/9} .seans-facts{grid-template-columns:1fr} } @media (max-width:520px){ .sf-tx b{white-space:normal} } /* ========================================================================== V71 — MOBİL BAŞLIK: hamburgerin soluna "Bize Ulaşın" ikonu Telefon numarası site genelinde yayınlanmıyor (form/geri arama akışı var), bu yüzden ahize ikonu iletisim.html'e yönlendiriyor. Yalnızca dar ekranda (nav-links/nav-actions'ın gizlendiği eşikte) görünür. ========================================================================== */ .call-btn{ display:none;align-items:center;justify-content:center; width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:50%;color:inherit; } .call-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .call-btn:hover{background:rgba(160,118,47,.1)} @media (max-width:760px){ .nav-actions{display:none} .call-btn{display:flex;order:98;margin-left:auto} .menu-btn{margin-left:8px} } /* ---------- topbar: beyaz üst bilgi çubuğu (announce yerine) ---------- */ .topbar{background:#fff;color:#1f1a16;border-top:1px solid var(--brass);border-bottom:1px solid var(--brass)} .topbar .row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px;padding-inline:var(--gut)} .topbar .tb-left,.topbar .tb-right{display:flex;align-items:center;gap:28px;min-width:0} .topbar .tb-item{display:inline-flex;align-items:center;gap:8px;color:#1f1a16;text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;transition:color .2s} .topbar a.tb-item:hover{color:#c8552f} .topbar .tb-item svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .topbar .tb-item svg.chev{width:12px;height:12px;opacity:.9} .topbar .tb-item svg.flag{width:21px;height:14px;stroke:none;border-radius:3px;box-shadow:0 0 0 1px rgba(31,26,22,.12)} .topbar .tb-lang b{font-weight:700} body.menu-open .topbar{visibility:visible} .topbar .tb-cta{min-height:0;height:26px;padding:0 14px;font-size:11.5px;font-weight:700;letter-spacing:.02em;border-radius:999px;white-space:nowrap;gap:0} @media (max-width:900px){.topbar .tb-form,.topbar .tb-cta{display:none}} @media (max-width:760px){ .topbar .row{height:40px} .topbar .tb-left,.topbar .tb-right{gap:16px} .topbar .tb-item{font-size:12px;gap:6px} .topbar .tb-item svg{width:15px;height:15px} .topbar .tb-item svg.chev{display:none} } /* ========================================================================== V25 — HERO BANNER SLIDER (USLA tarzı): header altında banner şeridi · düz chevron oklar · nokta navigasyon · fade geçiş · 7s autoplay ========================================================================== */ .hsl{ position:relative;top:auto; /* sticky/deck bindirmesi yok — banner düz akışta */ min-height:0;height:clamp(400px,42vw,660px); } .hsl+.deck{margin-top:0;border-radius:0;box-shadow:none} .hsl .hsl-slide{ position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .8s var(--ease-in),visibility 0s linear .8s; } .hsl .hsl-slide.is-on{ opacity:1;visibility:visible;pointer-events:auto;z-index:2; transition:opacity .8s var(--ease-in); } .hsl .hsl-media{position:absolute;inset:0;overflow:hidden} .hsl .hsl-media>img,.hsl .hsl-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hsl .hsl-slide.is-on .hsl-media>img,.hsl .hsl-slide.is-on .hsl-media>video{animation:hslSettle 1s var(--ease-in) both} @keyframes hslSettle{from{transform:scale(1.02)}to{transform:scale(1)}} .hsl .hsl-copy{position:relative;z-index:2;width:100%;padding-bottom:0} /* banner metni: dikeyde ortalı, banner ölçüsüne göre biraz kompakt */ .hsl .hero-copy3{max-width:600px;padding-bottom:0} .hsl .hero-copy3 .display2{font-size:clamp(30px,3.6vw,52px)} .hsl .hero-copy3 .eyebrow{margin-bottom:12px} .hsl .hero-copy3 .eyebrow,.hsl .hero-copy3 .display2,.hsl .hero-copy3 .lead,.hsl .hero-copy3 .hero-ctas{ animation:none;opacity:0;transform:translateY(12px); transition:opacity .5s var(--ease-in),transform .5s var(--ease-in); } .hsl .is-on .hero-copy3 .eyebrow{opacity:1;transform:none;transition-delay:.12s} .hsl .is-on .hero-copy3 .display2{opacity:1;transform:none;transition-delay:.2s} .hsl .is-on .hero-copy3 .lead{opacity:1;transform:none;transition-delay:.28s} .hsl .is-on .hero-copy3 .hero-ctas{opacity:1;transform:none;transition-delay:.36s} /* oklar: emsaldeki gibi düz, dairesiz chevron */ .hsl-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:6; width:52px;height:64px;padding:0;border:0;background:transparent;cursor:pointer; display:flex;align-items:center;justify-content:center;color:var(--cream); filter:drop-shadow(0 2px 8px rgba(15,10,5,.55)); transition:color .18s var(--ease),transform .18s var(--ease); } .hsl-arrow svg{width:30px;height:30px} .hsl-arrow:hover{color:var(--brass2)} .hsl-prev:hover{transform:translateY(-50%) translateX(-2px)} .hsl-next:hover{transform:translateY(-50%) translateX(2px)} .hsl-arrow:focus-visible{outline:2px solid var(--brass2);outline-offset:2px;border-radius:8px} .hsl-prev{left:clamp(8px,1.4vw,26px)} .hsl-next{right:clamp(8px,1.4vw,26px)} /* noktalar: emsaldeki gibi alt ortada, aktif olan pirinç */ .hsl-tabs{ position:absolute;left:50%;bottom:clamp(14px,2.4vh,26px);transform:translateX(-50%); z-index:6;display:flex;gap:6px; } .hsl-tabs button{ position:relative;width:22px;height:22px; background:transparent;border:0;padding:0;cursor:pointer; } .hsl-tabs button i{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:9px;height:9px;border-radius:50%;display:block; background:rgba(241,233,215,.55); transition:background .2s var(--ease),transform .2s var(--ease); } .hsl-tabs button:hover i{background:var(--cream)} .hsl-tabs button.on i{background:var(--brass2);transform:translate(-50%,-50%) scale(1.25)} .hsl-tabs button:focus-visible i{outline:2px solid var(--brass2);outline-offset:3px} /* reduced-motion: geçişler anlık, autoplay JS tarafında kapalı */ @media (prefers-reduced-motion:reduce){ .hsl .hsl-slide{transition:none} .hsl .hsl-slide.is-on .hsl-media>img,.hsl .hsl-slide.is-on .hsl-media>video{animation:none} .hsl .hero-copy3 .eyebrow,.hsl .hero-copy3 .display2,.hsl .hero-copy3 .lead,.hsl .hero-copy3 .hero-ctas{ transition:none;opacity:1;transform:none; } } /* mobil: daha kısa şerit, küçük oklar, metin sıkıştırma */ @media (max-width:760px){ .hsl{height:clamp(360px,62svh,520px)} .hsl-arrow{width:38px;height:52px} .hsl-arrow svg{width:22px;height:22px} .hsl .hero-copy3{padding-inline-end:8px} .hsl .hero-copy3 .display2{font-size:clamp(26px,7.4vw,34px)} .hsl .hsl-copy{padding-bottom:0} .hsl-tabs{bottom:12px} } /* ---------- navbar: site içi arama ---------- */ .nav-search{ display:flex;align-items:center;gap:6px;flex:none; height:40px;padding:0 6px 0 16px; background:#eeeeef;border:1px solid transparent;border-radius:12px; transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease); } .nav-search:focus-within{background:#fff;border-color:var(--line);box-shadow:0 0 0 3px rgba(160,118,47,.14)} .nav-search input{ width:150px;min-width:0;border:0;background:transparent;outline:0; font:inherit;font-size:13.5px;font-weight:500;color:#4a4a52;letter-spacing:.005em; } .nav-search input::placeholder{color:#9a9aa4;font-weight:500} .nav-search input::-webkit-search-cancel-button{-webkit-appearance:none} .nav-search button{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:30px;height:30px;border:0;background:transparent;border-radius:8px; color:#54545e;cursor:pointer;transition:color .2s var(--ease),background .2s var(--ease); } .nav-search button:hover{color:var(--brass);background:rgba(160,118,47,.1)} .nav-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .nav-links,.nav-actions .ghost,.nav-actions .btn,.nav-search{transition:opacity .25s var(--ease),visibility .25s} body.menu-open .nav-search{opacity:0;visibility:hidden;pointer-events:none} @media (max-width:1180px){.nav-search input{width:104px}} @media (max-width:1040px){.nav-search{display:none}} /* ---------- banner slaytları: metin yerine hızlı kayıt formu ---------- */ .hsl .hsl-copy{flex:none;justify-content:center;padding-top:0;padding-bottom:0;gap:0;padding-inline-start:clamp(56px,5vw,96px)} .hsl .hsl-hq{max-width:460px;margin:0} .hsl .hsl-hq .qtitle{font-size:17px;margin-top:4px} .hsl .hsl-hq input,.hsl .hsl-hq select{padding:10px 14px} .hsl .hsl-hq .qgrid{margin-top:10px} @media (max-width:1020px){.hsl .hsl-copy{padding-inline-start:var(--gut,20px)}} @media (max-width:760px){.hsl .hsl-hq{max-width:none}} /* ---------- rakam bandı: eyebrow yerine beyaz logo ---------- */ .nb-logo{display:flex;justify-content:center;margin:0 0 clamp(26px,3.4vw,44px)} .nb-logo img{ width:min(230px,58vw);height:auto;display:block; filter:brightness(0) invert(1) sepia(.62) saturate(2.5) brightness(.93); } @media (max-width:760px){.nb-logo{margin-bottom:clamp(20px,2.4vw,32px)}.nb-logo img{width:min(180px,54vw)}} /* ---------- final banner: sadece görsel, metin yok ---------- */ .final.stkslide{min-height:clamp(520px,62vw,820px)} @media (max-width:1020px){.final.stkslide{min-height:clamp(400px,66vw,560px);padding-block:0}} /* ---------- şefler bölümü: koyu banttan beyaz zemine ---------- */ #sefler.band-dark{background:#FFFFFF;color:var(--ink)} #sefler.band-dark::before,#sefler.band-dark::after{opacity:.5;mix-blend-mode:multiply} #sefler.on-dark .eyebrow{color:var(--brass)} #sefler.on-dark .h2{color:var(--ink)} #sefler.on-dark em.tone{color:var(--brass)} #sefler.on-dark .lead{color:var(--ink2)} #sefler.on-dark .lnk{color:var(--brass)} #sefler .cmap .cmeta b{color:var(--ink)} #sefler .cmap .cmeta .desc{color:var(--ink3)} #sefler .cmap .cmeta .route{color:var(--brass)} #sefler .cmap .mlegend{color:var(--ink3)} #sefler .band-dark .hoverglow,#sefler .hoverglow{background:radial-gradient(380px at var(--gx,50%) var(--gy,50%),rgba(160,118,47,.08),transparent 72%)} /* ---------- reel şeridi: koleksiyon kartlarındaki hızlı bilgi paneli ---------- */ .reel .qsheet{ left:9px;right:9px;bottom:9px;z-index:6; gap:10px;padding:11px 12px;border-radius:15px;justify-content:space-between; } .reel .qsheet .qrow{gap:4px} .reel .qsheet .qrow i{font-size:8px;letter-spacing:.12em} .reel .qsheet .qrow b{font-size:11.5px} .reel .qsheet .qchip{font-size:10px;padding:4px 8px;border-radius:7px;letter-spacing:.02em} .reel:hover .qsheet,.reel:focus-within .qsheet{transform:none} .reel .qeye{z-index:6;width:34px;height:34px;top:10px;right:10px} .reel .qeye svg{width:15px;height:15px} .reel:hover .qeye,.reel:focus-within .qeye{opacity:1;transform:scale(1)} .reel .rl,.reel .rtag{transition:opacity 300ms var(--e-kagit),transform 300ms var(--e-kagit)} .reel:hover .rl,.reel:focus-within .rl{opacity:0;transform:translateY(8px)} .reel:hover .rtag,.reel:focus-within .rtag{opacity:0;transform:translateY(-6px)} @media (max-width:760px){ .reel .qsheet{display:none} .reel .qeye{opacity:1;transform:scale(1);width:32px;height:32px} .reel:hover .rl,.reel:hover .rtag{opacity:1;transform:none} } /* ---------- harita paneli: beyaz şefler bölümüyle uyumlu açık tema ---------- */ #sefler .cmap .mapbox{ border:1px solid rgba(160,118,47,.26); background: radial-gradient(64% 128% at 56% 24%,rgba(216,172,92,.20),transparent 66%), radial-gradient(88% 118% at 18% 94%,rgba(172,66,36,.07),transparent 62%), linear-gradient(168deg,#F1E9D9,#E9DFCB 56%,#DFD3BB); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 80px rgba(92,69,38,.10), 0 2px 6px rgba(26,18,7,.06), 0 26px 58px -26px rgba(26,18,7,.32); } /* kadraj kenarı: sıcak, derin vinyet — kart gömülü dursun */ #sefler .cmap .mapbox::before{ background: radial-gradient(128% 140% at 50% 42%,transparent 52%,rgba(74,55,32,.22) 100%), linear-gradient(180deg,rgba(74,55,32,.07),transparent 22%,transparent 78%,rgba(74,55,32,.09)); } #sefler .cmap .wmap{opacity:.95} /* rota yayları ve pinler: sıcak zeminde derin brass */ #sefler .cmap .marc{stroke:#8A6526;filter:drop-shadow(0 0 5px rgba(122,91,39,.35))} #sefler .cmap .mhub{border-color:rgba(122,91,39,.8);box-shadow:0 0 10px rgba(122,91,39,.28)} #sefler .cmap .mhub::after{border-color:rgba(122,91,39,.26)} #sefler .pin{background:rgba(122,91,39,.6);box-shadow:0 0 0 3px rgba(241,233,217,.85)} #sefler .pin.on{box-shadow:0 0 0 3px rgba(241,233,217,.9),0 0 14px 3px rgba(172,66,36,.38)} #sefler .pin.on::after{border-color:#8A6526} #sefler .cmap .mlegend{color:rgba(46,34,18,.5)} #sefler .cmap .mlegend i{border-color:rgba(122,91,39,.8)} /* ---------- hero slider formu: sadece tipografi ile okunurluk ---------- */ .hsl .hsl-hq .eyebrow{color:#F2D394;font-weight:800;letter-spacing:.2em} .hsl .hsl-hq .qtitle{color:#FFFFFF;font-weight:700;font-size:19px;letter-spacing:.004em} .hsl .hsl-hq input,.hsl .hsl-hq select{color:#FFFFFF;font-weight:600} .hsl .hsl-hq input::placeholder{color:rgba(255,255,255,.82);font-weight:500} .hsl .hsl-hq .sugg button{color:#FFFFFF;font-weight:700;border-color:rgba(255,255,255,.5)} .hsl .hsl-hq .qnote{color:rgba(255,255,255,.9);font-weight:600}