/* ============================================================
   KAMALI MÜHENDİSLİK — Çelik / Mühendislik Teması
   ------------------------------------------------------------
   Palet logodan türetildi:
     gümüş metal  rgb(184,184,184)  → nötr gri ailesi
     turuncu vurgu rgb(231,109,12)  → #E76D0C
   Sıcak bej/bronz yerine soğuk çelik grisi; vurgu rengi turuncu.
   Değişken adları korundu (--ember = vurgu) ki tüm bileşenler
   tek dosyadan renk değiştirsin.
   ============================================================ */
:root{
  --paper:#EEF0F3; --paper2:#E2E6EB; --card:#F8FAFC;
  --ink:#14171B; --slate:#5D666F; --faint:#8B949E;
  --line:rgba(20,23,27,.13); --line2:rgba(20,23,27,.07);
  --ember:#E76D0C; --emberd:#B4510A;
  --steel:#8A939C;
  --r:30px; --r2:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1500px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(120% 80% at 80% -10%, #dfe6ee 0%, transparent 55%),
    radial-gradient(120% 90% at -10% 110%, #dde3ea 0%, transparent 50%),
    var(--paper);
  color:var(--ink);
  font-family:"Manrope",system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:300;line-height:1.05;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,3.5vw,56px)}
.micro{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.7;color:var(--slate)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--emberd);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--emberd)}

/* ---- buttons ---- */
.arrowbtn{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none;transition:.3s var(--ease)}
.arrowbtn svg{width:15px;height:15px}
.pillcta{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink);padding:6px 6px 6px 22px;border-radius:40px;font-weight:600;font-size:14px;box-shadow:0 6px 24px -10px rgba(0,0,0,.35);transition:.3s var(--ease)}
.pillcta:hover{transform:translateY(-2px)}
.pillcta:hover .arrowbtn{transform:rotate(45deg)}
.pillcta.ink{background:var(--ink);color:#fff}.pillcta.ink .arrowbtn{background:#fff;color:var(--ink)}
.pillcta.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:none;backdrop-filter:blur(8px)}
.pillcta.ghost .arrowbtn{background:#fff;color:var(--ink)}

/* ===== HEADER (sticky, transparent→frost) ===== */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;transition:.4s var(--ease)}
.hd .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px}
.hd .logo img{height:30px;width:auto;display:block;transition:.3s}
.hd .logo .dark{display:none}
.pillnav{display:flex;gap:4px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:40px}
.pillnav>li{list-style:none;position:relative}
.pillnav a{display:block;padding:9px 16px;border-radius:30px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.92);transition:.25s var(--ease);white-space:nowrap}
.pillnav a.on,.pillnav>li:hover>a{background:rgba(255,255,255,.16)}
.pillnav a.cur{background:#fff;color:var(--ink);font-weight:600}
.dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);min-width:225px;background:rgba(22,18,14,.86);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:8px;opacity:0;visibility:hidden;transition:.28s var(--ease)}
.pillnav>li:hover .dd{opacity:1;visibility:visible;transform:translateX(-50%)}
.dd a{color:rgba(255,255,255,.9);border-radius:10px;font-size:13.5px}
.dd a:hover{background:rgba(255,255,255,.12)}
.hd .right{display:flex;align-items:center;gap:10px}
.hd .soc{display:flex;gap:7px}
.hd .soc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff;transition:.25s}
.hd .soc a:hover{background:rgba(255,255,255,.16)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font-size:17px;cursor:pointer}

/* scrolled state */
.hd.scrolled{background:rgba(247,243,237,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hd.scrolled .logo .white{display:none}
.hd.scrolled .logo .dark{display:block}
.hd.scrolled .pillnav{background:rgba(20,23,27,.05);border-color:var(--line)}
.hd.scrolled .pillnav a{color:var(--slate)}
.hd.scrolled .pillnav a.cur{background:var(--ink);color:#fff}
.hd.scrolled .pillnav a.on,.hd.scrolled .pillnav>li:hover>a{background:rgba(20,23,27,.08);color:var(--ink)}
.hd.scrolled .soc a{border-color:var(--line);color:var(--ink)}
.hd.scrolled .burger{border-color:var(--line);color:var(--ink)}
.hd.scrolled .pillcta.ghost{background:var(--ink);color:#fff;border-color:transparent}

/* inner-page header always frosted (no hero behind it) */
.hd.solid{background:rgba(247,243,237,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hd.solid .logo .white{display:none}.hd.solid .logo .dark{display:block}
.hd.solid .pillnav{background:rgba(20,23,27,.05);border-color:var(--line)}
.hd.solid .pillnav a{color:var(--slate)}
.hd.solid .pillnav a.cur{background:var(--ink);color:#fff}
.hd.solid .pillnav a.on,.hd.solid .pillnav>li:hover>a{background:rgba(20,23,27,.08);color:var(--ink)}
.hd.solid .soc a{border-color:var(--line);color:var(--ink)}
.hd.solid .burger{border-color:var(--line);color:var(--ink)}
.hd.solid .pillcta.ghost{background:var(--ink);color:#fff;border-color:transparent}

@media(max-width:1080px){.pillnav,.hd .soc{display:none}.burger{display:grid;place-items:center}}

/* mobile menu */
.mob{position:fixed;top:74px;left:12px;right:12px;z-index:99;background:rgba(247,243,237,.96);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;display:none}
.mob.open{display:block}
.mob a{display:block;padding:14px 22px;font-size:15px;font-weight:500;border-bottom:1px solid var(--line2);color:var(--ink)}
.mob a.sub{padding-left:40px;font-size:14px;color:var(--slate)}
.mob a:last-child{border-bottom:none;color:var(--emberd)}

/* ===== HERO (home) ===== */
.hero{position:relative;height:calc(100vh - 24px);min-height:600px;max-height:1000px;margin:12px;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px -40px rgba(18,26,36,.5)}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,24,.5) 0%,rgba(14,18,24,0) 24%,rgba(14,18,24,0) 58%,rgba(14,18,24,.55) 100%)}
.hero .word{position:absolute;left:0;right:0;top:18%;text-align:center;z-index:2;font-family:"Fraunces";font-weight:300;font-size:clamp(48px,13vw,230px);letter-spacing:.05em;color:rgba(255,255,255,.5);line-height:.9;pointer-events:none;text-shadow:0 4px 40px rgba(0,0,0,.25)}
.hero-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(26px,3.5vw,56px) clamp(28px,3.5vw,48px)}
.hero-mid{position:absolute;top:96px;left:clamp(26px,3.5vw,56px);right:clamp(26px,3.5vw,56px);display:flex;justify-content:space-between;z-index:3}
.hero-mid .micro{color:rgba(255,255,255,.85);max-width:220px}
.hero-mid .r{text-align:right}
.hero-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;z-index:3}
.tagline{font-family:"Fraunces";font-weight:300;font-size:clamp(20px,2.4vw,32px);color:#fff;line-height:1.12}
.hero-cards{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.glass{background:rgba(25,21,16,.34);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:16px 18px;color:#fff;width:min(290px,42vw)}
.glass b{font-family:"Fraunces";font-weight:300;font-size:34px;display:block;line-height:1}
.glass span{font-size:11.5px;color:rgba(255,255,255,.72);display:block;margin-top:6px}
.hero-cta-center{display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-cta-center .sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
@media(max-width:920px){.hero-bottom{grid-template-columns:1fr}.hero-cards{flex-direction:row;flex-wrap:wrap}.glass{flex:1;min-width:150px;width:auto}.hero-mid .r{display:none}.hero-cta-center{align-items:flex-start}}

/* ===== PAGE HERO (inner pages) ===== */
.pagehero{position:relative;min-height:clamp(380px,52vh,520px);border-radius:var(--r);overflow:hidden;margin:12px;display:flex;align-items:flex-end;box-shadow:0 30px 80px -45px rgba(18,26,36,.5)}
.pagehero .bg{position:absolute;inset:0}
.pagehero .bg img{width:100%;height:100%;object-fit:cover}
.pagehero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,24,.55) 0%,rgba(14,18,24,.15) 40%,rgba(14,18,24,.7) 100%)}
.pagehero .inner{position:relative;z-index:3;padding:0 clamp(26px,3.5vw,56px) clamp(34px,4vw,54px);width:100%}
.crumb{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75);margin-bottom:16px}
.crumb a:hover{color:#fff}
.pagehero h1{font-size:clamp(40px,7vw,96px);font-weight:300;color:rgba(255,255,255,.96);letter-spacing:.01em}
.pagehero .lead{color:rgba(255,255,255,.85);max-width:560px;margin-top:14px;font-size:17px}

/* ===== SECTIONS ===== */
section.block{padding:clamp(64px,8vw,104px) 0}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px;flex-wrap:wrap}
.head-row h2{font-size:clamp(30px,4.2vw,50px);margin-top:18px}
.head-row h2 em,.statement h2 em{font-style:italic;color:var(--emberd)}
.head-row p{color:var(--slate);max-width:340px;font-size:15px}

/* frosted card */
.frost{background:rgba(251,248,243,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);box-shadow:0 1px 0 var(--line) inset, 0 20px 50px -40px rgba(18,26,36,.4);border-radius:var(--r2)}

/* about frost block */
.aboutfrost{padding:clamp(26px,3vw,40px);display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,3vw,46px);align-items:center}
.aboutfrost .gal{position:relative}
.aboutfrost .gal .big{border-radius:var(--r2);overflow:hidden;aspect-ratio:4/3;background:var(--paper2)}
.aboutfrost .gal .big img{width:100%;height:100%;object-fit:cover}
.aboutfrost .thumbs{display:flex;gap:10px;margin-top:12px}
.aboutfrost .thumbs .t{width:74px;height:58px;border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:var(--paper2);opacity:.7;transition:.25s var(--ease)}
.aboutfrost .thumbs .t.on,.aboutfrost .thumbs .t:hover{opacity:1;border-color:var(--emberd)}
.aboutfrost .thumbs .t img{width:100%;height:100%;object-fit:cover}
.aboutfrost .counter{display:flex;align-items:center;gap:14px;margin-top:16px}
.aboutfrost .counter .c{font-size:12px;letter-spacing:.1em;color:var(--faint)}
.aboutfrost .navs{display:flex;gap:8px}
.aboutfrost .navs button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;transition:.25s var(--ease)}
.aboutfrost .navs button:hover{background:var(--ink);color:#fff}
.aboutfrost .rating{display:flex;align-items:center;gap:12px;margin:18px 0 10px}
.aboutfrost .rating .st{color:#F4A847;letter-spacing:2px;font-size:15px}
.aboutfrost .rating b{font-family:"Fraunces";font-weight:300;font-size:26px}
.aboutfrost h2{font-size:clamp(26px,3.4vw,42px);margin:6px 0 14px}
.aboutfrost h2 em{font-style:italic;color:var(--emberd)}
.aboutfrost p{color:var(--slate);font-size:15px;margin-bottom:16px}
@media(max-width:860px){.aboutfrost{grid-template-columns:1fr}}

/* category / generic grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{grid-column:span 4;border-radius:var(--r2);padding:14px;transition:.35s var(--ease);display:flex;flex-direction:column}
.card.feat{grid-column:span 8;flex-direction:row;align-items:stretch}
.card .ph{border-radius:14px;overflow:hidden;position:relative;background:var(--paper2);flex:none}
.card .ph::after{content:attr(data-img);position:absolute;left:10px;bottom:10px;font-size:9px;letter-spacing:.12em;color:#fff;opacity:.7;text-transform:uppercase}
.card:not(.feat) .ph{height:220px;margin-bottom:16px}
.card.feat .ph{width:52%;min-height:300px}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.card:hover .ph img{transform:scale(1.06)}
.card .body{display:flex;flex-direction:column;flex:1;padding:6px 8px 8px}
.card.feat .body{justify-content:center;padding:34px;width:48%}
.card h3{font-size:23px;margin-bottom:8px}.card.feat h3{font-size:clamp(26px,3vw,38px)}
.card p{color:var(--slate);font-size:14px;flex:1}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.card .foot small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.card .arrowbtn{background:transparent;border:1px solid var(--line);color:var(--ink)}
.card:hover{transform:translateY(-4px)}
.card:hover .arrowbtn{background:var(--ink);color:#fff;transform:rotate(45deg)}
@media(max-width:860px){.card,.card.feat{grid-column:span 12;flex-direction:column}.card.feat .ph,.card.feat .body{width:auto}.card.feat .ph{min-height:220px}}

/* statement split */
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.statement h2{font-size:clamp(30px,4.4vw,52px)}
.statement p{color:var(--slate);margin-bottom:26px}
.ministats{display:flex;border-top:1px solid var(--line)}
.ministats div{flex:1;padding:20px 14px 0;border-right:1px solid var(--line)}
.ministats div:last-child{border-right:none}
.ministats b{font-family:"Fraunces";font-weight:300;font-size:28px;display:block}
.ministats span{font-size:12px;color:var(--slate)}
@media(max-width:820px){.statement .wrap{grid-template-columns:1fr;gap:30px}}

/* dark banner (CTA) */
.studio{background:var(--ink);border-radius:var(--r);padding:clamp(36px,5vw,56px);position:relative;overflow:hidden;color:#fff;display:grid;grid-template-columns:1.4fr auto;gap:30px;align-items:center}
.studio::before{content:"";position:absolute;width:480px;height:480px;right:-8%;top:18%;background:radial-gradient(circle,rgba(231,109,12,.5),transparent 65%);filter:blur(20px)}
.studio .eyebrow{color:var(--ember)}
.studio h2{font-size:clamp(28px,3.6vw,44px);margin:16px 0 12px;position:relative}
.studio h2 em{font-style:italic;color:var(--ember)}
.studio p{color:rgba(255,255,255,.7);max-width:520px;position:relative}
.studio .pillcta{position:relative}
@media(max-width:760px){.studio{grid-template-columns:1fr}}

/* ===== REVIEWS MARQUEE ===== */
.reviews{padding:clamp(64px,8vw,104px) 0;overflow:hidden}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee+.marquee{margin-top:14px}
.track{display:flex;gap:14px;width:max-content;will-change:transform}
.track.right{animation:mq-right 46s linear infinite}
.track.left{animation:mq-left 52s linear infinite}
.reviews:hover .track{animation-play-state:paused}
@keyframes mq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.rev{flex:none;width:360px;border-radius:18px;padding:22px 24px}
.rev .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rev .stars{color:#F4A847;font-size:14px;letter-spacing:2px}
.rev p{font-size:14.5px;color:var(--ink);line-height:1.5}
.rev .who{margin-top:14px;display:flex;align-items:center;gap:11px}
.rev .av{width:36px;height:36px;border-radius:50%;background:var(--paper2);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13px}
.rev .who b{font-size:13.5px;font-weight:600}.rev .who span{display:block;font-size:12px;color:var(--slate)}
.gicon{width:20px;height:20px;flex:none}
@media(max-width:560px){.rev{width:300px}}
@media(prefers-reduced-motion:reduce){.track{animation:none!important}}

/* ===== content prose ===== */
.prose{max-width:780px}
.prose p{color:var(--slate);margin-bottom:18px;font-size:16.5px}
.prose h3{font-size:26px;margin:36px 0 14px;color:var(--ink)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
@media(max-width:820px){.twocol{grid-template-columns:1fr;gap:30px}}

/* value cards */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.val{padding:30px}
.val .n{font-family:"Fraunces";font-size:30px;color:var(--emberd);font-weight:300}
.val h4{font-family:"Fraunces";font-size:22px;font-weight:400;margin:12px 0 8px}
.val p{color:var(--slate);font-size:14.5px}
@media(max-width:760px){.vals{grid-template-columns:1fr}}

/* feature list (checks) */
.featlist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin:8px 0 4px}
.featlist li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink)}
.featlist li::before{content:"";width:20px;height:20px;flex:none;margin-top:2px;border-radius:50%;background:var(--emberd);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat}
@media(max-width:620px){.featlist{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cinfo{padding:34px}
.cinfo .row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cinfo .row:last-child{border-bottom:none}
.cinfo .row b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.cinfo .row a,.cinfo .row span{color:var(--ink);font-size:15.5px}
.form{padding:34px}
.form label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:14px 0 6px}
.form input,.form textarea{width:100%;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:15px;color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--emberd)}
.form .pillcta{margin-top:20px;border:none;cursor:pointer;width:auto}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.mapwrap{margin:12px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);height:420px}
.mapwrap iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}

/* footer */
footer.site{margin:30px 12px 12px;border-top:1px solid var(--line);padding-top:54px}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:36px;padding:0 clamp(20px,3.5vw,44px) 40px}
.fgrid h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.fgrid ul{list-style:none}.fgrid li{margin-bottom:10px}
.fgrid a{font-size:14px;color:var(--slate)}.fgrid a:hover{color:var(--ink)}
.fbrand img{height:32px;width:auto;margin-bottom:16px}
.fbrand p{color:var(--slate);font-size:14px;max-width:280px;margin-bottom:18px}
.fbar{border-top:1px solid var(--line);padding:22px clamp(20px,3.5vw,44px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--faint)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(22px);transition:.7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{animation-duration:.001ms!important}}

/* ===== GALLERY MODULE ===== */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:200px;gap:14px}
.gtile{position:relative;border-radius:var(--r2);overflow:hidden;background:var(--paper2);border:1px solid var(--line);cursor:pointer}
.gtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.gtile .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(14,18,24,.7));font-size:13.5px;font-weight:600;letter-spacing:.02em;
  opacity:0;transform:translateY(8px);transition:.35s var(--ease)}
.gtile:hover img{transform:scale(1.07)}
.gtile:hover .cap{opacity:1;transform:none}
.g-a{grid-column:span 6;grid-row:span 2}
.g-b{grid-column:span 3;grid-row:span 1}
.g-c{grid-column:span 3;grid-row:span 2}
.g-d{grid-column:span 3;grid-row:span 1}
@media(max-width:860px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}.g-a,.g-b,.g-c,.g-d{grid-column:span 1;grid-row:span 1}.g-a{grid-column:span 2}}

/* ===== HOME CONTACT SECTION (image bg + glass form) ===== */
.contactsec{position:relative;margin:12px;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px -45px rgba(18,26,36,.5)}
.contactsec .bg{position:absolute;inset:0}
.contactsec .bg img{width:100%;height:100%;object-fit:cover}
.contactsec .scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(18,13,8,.78) 0%,rgba(18,13,8,.4) 45%,rgba(18,13,8,.25) 100%)}
.cs-inner{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:clamp(40px,5vw,70px)}
.cs-left .tagpill{display:inline-block;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:40px;padding:7px 16px;font-size:12px;letter-spacing:.1em;margin-bottom:26px}
.cs-left h2{font-family:"Fraunces";font-weight:300;font-size:clamp(34px,5vw,68px);color:#fff;line-height:1.02;letter-spacing:.005em}
.cs-left h2 em{font-style:italic;color:var(--ember)}
.cs-left p{color:rgba(255,255,255,.82);max-width:420px;margin-top:20px;font-size:16px}
.cs-tags{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap}
.cs-tags span{background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:30px;padding:9px 18px;font-size:13px}
.gform{background:rgba(22,26,31,.34);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.2);border-radius:var(--r2);padding:clamp(28px,3vw,40px)}
.gform .fld{margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.32);padding:14px 2px 6px}
.gform .fld:focus-within{border-color:#fff}
.gform input,.gform textarea{width:100%;background:none;border:none;color:#fff;font-family:inherit;font-size:15.5px;outline:none}
.gform input::placeholder,.gform textarea::placeholder{color:rgba(255,255,255,.72)}
.gform textarea{resize:vertical;min-height:46px}
.gform .pillcta{margin-top:24px;border:none;cursor:pointer}
@media(max-width:860px){.cs-inner{grid-template-columns:1fr;gap:28px}}

/* ---- footer üstü dev wordmark ---- */
.prefoot{position:relative;overflow:hidden;text-align:center;padding-top:clamp(30px,5vw,70px)}
.prefoot .bigword{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(64px,18vw,260px);line-height:.78;letter-spacing:.03em;color:rgba(20,23,27,.05);white-space:nowrap;user-select:none;pointer-events:none}
.prefoot-cta{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:clamp(-12px,-1vw,0);padding:0 20px clamp(34px,5vw,64px)}
.prefoot-cta h2{font-size:clamp(26px,3.6vw,46px)}
.prefoot-cta h2 em{font-style:italic;color:var(--emberd)}

/* dropdown reset */
.dd,.dd ul{list-style:none;margin:0;padding-left:0}
.dd li{list-style:none;margin:0}
.dd li::marker{content:""}
.dd a{display:block;padding:9px 14px}
.hd .soc a svg{display:block}

/* ---- Projeler: kompakt grid ---- */
.pgal{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:clamp(140px,13.5vw,178px);gap:12px;margin-top:34px}
.pj{position:relative;border-radius:var(--r2);overflow:hidden;background:var(--paper2);box-shadow:0 16px 40px -34px rgba(18,26,36,.5);cursor:pointer}
.pj img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.pj:hover img{transform:scale(1.07)}
.pj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(18,12,7,.74));opacity:0;transition:.4s var(--ease)}
.pj:hover::after{opacity:1}
.pj-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;color:#fff;transform:translateY(8px);opacity:0;transition:.4s var(--ease)}
.pj:hover .pj-cap{transform:none;opacity:1}
.pj-cap h4{font-family:"Fraunces",serif;font-weight:300;font-size:17px;line-height:1.12;margin:0 0 2px}
.pj-cap span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.pj-go{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.45);color:#fff;
  display:grid;place-items:center;opacity:0;transform:scale(.8) rotate(-8deg);transition:.4s var(--ease)}
.pj-go svg{width:15px;height:15px}
.pj:hover .pj-go{opacity:1;transform:none}
@media(max-width:980px){.pgal{grid-template-columns:repeat(3,1fr)} .pj-cap,.pj-go{opacity:1;transform:none} .pj::after{opacity:.5}}
@media(max-width:560px){.pgal{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}}

/* ---- Coverflow galeri ---- */
.cf-sec{overflow:hidden}
.cf{position:relative;height:clamp(360px,44vw,470px);perspective:1500px;margin-top:30px}
.cf-stage{position:absolute;inset:0;transform-style:preserve-3d}
.cf-card{position:absolute;top:50%;left:50%;width:clamp(230px,24vw,330px);height:clamp(300px,31vw,430px);margin:0;
  border-radius:24px;overflow:hidden;cursor:pointer;background:var(--paper2);
  box-shadow:0 44px 84px -40px rgba(14,18,24,.62);transition:transform .55s var(--ease),opacity .55s var(--ease),box-shadow .4s;
  transform-origin:center;will-change:transform}
.cf-card img{width:100%;height:100%;object-fit:cover;display:block}
.cf-card figcaption{position:absolute;top:0;left:0;right:0;z-index:3;padding:16px 18px;color:#fff;
  font-family:"Fraunces",serif;font-weight:300;font-size:19px;background:linear-gradient(180deg,rgba(18,12,7,.72),transparent)}
.cf-num{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-family:"Fraunces",serif;font-weight:300;
  font-size:clamp(90px,12vw,150px);color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.5);pointer-events:none;line-height:1}
.cf-card.is-active{box-shadow:0 54px 100px -36px rgba(14,18,24,.72)}
.cf-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.cf-arrow{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;transition:.25s var(--ease)}
.cf-arrow svg{width:20px;height:20px}
.cf-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cf-open{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border:none;border-radius:40px;
  padding:14px 24px 14px 26px;font-weight:600;font-size:14px;cursor:pointer;transition:.25s var(--ease)}
.cf-open svg{width:18px;height:18px}
.cf-open:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(20,23,27,.6)}

/* ---- Lightbox slider ---- */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(14,10,6,.93);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb-img{max-width:86vw;max-height:82vh;border-radius:14px;box-shadow:0 50px 120px -30px rgba(0,0,0,.8);object-fit:contain}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s}
.lb-arrow svg{width:22px;height:22px}
.lb-arrow:hover{background:rgba(255,255,255,.2)}
.lb-prev{left:24px}.lb-next{right:24px}
.lb-close{position:absolute;top:22px;right:24px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:.2s}
.lb-close:hover{background:rgba(255,255,255,.2)}
.lb-cap{position:absolute;bottom:28px;left:0;right:0;text-align:center;color:#fff;font-family:"Fraunces",serif;font-size:18px}
.lb-count{position:absolute;top:28px;left:28px;color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.12em}
@media(max-width:640px){.lb-prev{left:10px}.lb-next{right:10px}.lb-arrow{width:46px;height:46px}}

/* FAQ */
.faq{max-width:860px;margin:0 auto}
.fq{border-bottom:1px solid var(--line)}
.fq button{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:"Fraunces",serif;font-weight:400;font-size:clamp(18px,2.2vw,23px);color:var(--ink)}
.fq button .ic{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;transition:.3s var(--ease)}
.fq.open button .ic{background:var(--ink);color:#fff;transform:rotate(45deg)}
.fq .ans{max-height:0;overflow:hidden;transition:.4s var(--ease);color:var(--slate);font-size:15.5px}
.fq.open .ans{max-height:320px;padding-bottom:24px}

/* ===== HİZMET KARTLARI (büyük görsel kart) ===== */
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scard{position:relative;display:block;border-radius:24px;overflow:hidden;min-height:clamp(420px,40vw,540px);
  box-shadow:0 30px 70px -45px rgba(18,26,36,.55);transition:.45s var(--ease)}
.scard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.7s var(--ease)}
.scard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,12,7,.5) 0%,rgba(18,12,7,.08) 28%,rgba(18,12,7,.5) 68%,rgba(16,10,5,.88) 100%)}
.scard .num{position:absolute;top:24px;left:30px;z-index:3;font-family:"Fraunces",serif;font-weight:300;font-size:34px;color:rgba(255,255,255,.95);line-height:1}
.scard .go{position:absolute;top:22px;right:24px;z-index:3;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:#fff;
  display:grid;place-items:center;transition:.35s var(--ease)}
.scard .go svg{width:18px;height:18px}
.scard .sbody{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(24px,2.3vw,34px)}
.scard .sbody h3{font-size:clamp(24px,2.4vw,31px);color:#fff;margin-bottom:9px;letter-spacing:0}
.scard .sbody p{color:rgba(255,255,255,.8);font-size:14.5px;line-height:1.5;max-width:340px}
.scard:hover{transform:translateY(-5px);box-shadow:0 44px 90px -42px rgba(18,26,36,.7)}
.scard:hover>img{transform:scale(1.05)}
.scard:hover .go{background:#fff;color:var(--ink);transform:rotate(45deg)}
@media(max-width:920px){.scards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.scards{grid-template-columns:1fr}.scard{min-height:400px}}

/* ===== HERO SLIDER ===== */
.hero .bg .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--ease)}
.hero .bg .slide.on{opacity:1}
.hero .dots{position:absolute;right:clamp(18px,2.4vw,40px);top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:11px}
.hero .dots button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.78);background:transparent;cursor:pointer;transition:.3s var(--ease)}
.hero .dots button.on{background:#fff;transform:scale(1.3)}
@media(max-width:920px){.hero .dots{right:14px;gap:9px}}

/* ===== KÜÇÜK HİZMET KARTLARI (anasayfa, 9'lu) ===== */
.scards.mini{gap:16px}
.scards.mini .scard{min-height:clamp(248px,23vw,320px)}
.scards.mini .scard .num{font-size:26px;top:18px;left:22px}
.scards.mini .scard .go{width:44px;height:44px;top:18px;right:18px}
.scards.mini .scard .go svg{width:16px;height:16px}
.scards.mini .scard .sbody{padding:clamp(18px,1.7vw,26px)}
.scards.mini .scard .sbody h3{font-size:clamp(19px,1.7vw,23px);margin-bottom:6px}
.scards.mini .scard .sbody p{font-size:13px;line-height:1.45;max-width:300px}

/* yorum kartı: avatar kaldırıldı, isim/konum dikey */
.rev .who{display:block;margin-top:14px}
.rev .who b{display:block;font-size:13.5px;font-weight:600}
.rev .who span{display:block;font-size:12px;color:var(--slate);margin-top:1px}

/* iletişim formu: parlak arka planda okunabilirlik */
.contactsec .gform{background:rgba(17,21,26,.5)}
.contactsec .scrim{background:linear-gradient(105deg,rgba(16,11,6,.8) 0%,rgba(16,11,6,.32) 45%,rgba(16,11,6,.42) 100%)}

/* ===== FOOTER (koyu yuvarlak kutu — referans tasarım) ===== */
footer.site{margin:30px 12px 12px;border:none;padding:0;border-radius:var(--r);overflow:hidden;color:#fff;
  background:radial-gradient(120% 150% at 88% -25%, #3c2a1b 0%, transparent 55%), var(--ink)}
.fwrap{display:grid;grid-template-columns:1.05fr 1.35fr;gap:clamp(32px,5vw,72px);padding:clamp(40px,5vw,66px) clamp(28px,4vw,58px) clamp(30px,3.4vw,42px)}
.fbrand .flogo img{height:38px;width:auto;margin-bottom:22px}
.fbrand .fdesc{color:rgba(255,255,255,.6);font-size:14.5px;line-height:1.65;max-width:400px;margin-bottom:24px}
.finfo p{font-size:14.5px;color:rgba(255,255,255,.82);margin-bottom:9px}
.finfo p b{color:#fff;font-weight:700}
.finfo a{color:rgba(255,255,255,.82)}.finfo a:hover{color:var(--ember)}
.finfo .muted{color:rgba(255,255,255,.45);font-size:13px}
.fsoc{display:flex;gap:12px;margin-top:24px}
.fsoc a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;transition:.25s var(--ease)}
.fsoc a:hover{background:var(--ember);border-color:var(--ember);transform:translateY(-2px)}
.fsoc a svg{width:17px;height:17px}
.flinks h5{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(21px,2.3vw,28px);color:#fff;letter-spacing:-.01em;margin-bottom:22px;text-transform:none}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,44px)}
.fcol a{display:block;color:rgba(255,255,255,.72);font-size:15px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);transition:.2s var(--ease)}
.fcol a:hover{color:var(--ember);padding-left:5px}
.fsub{display:flex;align-items:center;gap:12px;margin-top:30px;border-bottom:1px solid rgba(255,255,255,.24);padding:14px 2px}
.fsub:focus-within{border-color:var(--ember)}
.fsub input{flex:1;background:none;border:none;outline:none;color:#fff;font-family:inherit;font-size:15px}
.fsub input::placeholder{color:rgba(255,255,255,.5)}
.fsub button{background:none;border:none;color:var(--ember);cursor:pointer;display:grid;place-items:center;padding:4px}
.fsub button svg{width:22px;height:22px}
.fbar{border-top:1px solid rgba(255,255,255,.1);padding:20px clamp(28px,4vw,58px);font-size:12.5px;color:rgba(255,255,255,.5);display:block}
@media(max-width:900px){.fwrap{grid-template-columns:1fr;gap:40px}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}

/* ===== ARKA PLAN DAYANIKLILIK DÜZELTMESİ =====
   Çok katmanlı 'background: gradient, var(--x)' kısaltması bazı
   tarayıcılarda son katman rengini çözemeyip düz zemini boyamıyordu.
   Düz rengi ayrı, gradyanı background-image olarak veriyoruz. */
body{
  background:var(--paper);
  background-image:
    radial-gradient(120% 80% at 80% -10%, #f6e7d6 0%, transparent 55%),
    radial-gradient(120% 90% at -10% 110%, #e7dccb 0%, transparent 50%);
}
footer.site{
  background:var(--ink);
  background-image:radial-gradient(120% 150% at 88% -25%, rgba(22,28,36,.92) 0%, transparent 58%);
}

/* ===== Header logosu webde daha büyük ===== */
@media(min-width:1081px){
  .hd .logo img{height:46px}
}

/* form gönderim teşekkür kutusu */
.form-thanks{background:rgba(231,109,12,.12);border:1px solid var(--emberd);color:var(--ink);
  border-radius:14px;padding:18px 20px;font-size:15px;line-height:1.5}
.gform ~ .form-thanks,.contactsec .form-thanks{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}

/* ===== Header: Instagram ikonu + daha büyük logo (web) ===== */
.hd .soc a svg{width:16px;height:16px;display:block}
@media(min-width:1081px){ .hd .logo img{height:54px} }

/* ===== Mobil menü: akordeon + arka plan kilidi ===== */
body.menu-open{overflow:hidden}
.mob-acc{display:block}
.mob-toggle{width:100%;background:none;border:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;padding:13px 22px;cursor:pointer}
.mob-caret{font-size:20px;line-height:1;color:var(--emberd);transition:transform .25s ease}
.mob-acc.open .mob-caret{transform:rotate(45deg)}
.mob-sub{max-height:0;overflow:hidden;transition:max-height .32s ease;background:rgba(20,23,27,.03)}
.mob-acc.open .mob-sub{max-height:560px}
.mob-sub a.sub{padding:11px 22px 11px 40px;font-size:14px;color:var(--slate)}
.mob .mob-call{margin-top:6px;font-weight:600;color:var(--emberd)}

/* ===== Footer racoun kredisi (altta ortalı) ===== */
.footer-credit{display:flex;justify-content:center;align-items:center;gap:8px;padding:20px 0 28px;opacity:.45;transition:opacity .25s ease}
.footer-credit:hover{opacity:.95}
.footer-credit img{height:24px;width:auto}

/* ===== Çevrimiçi WhatsApp butonu ===== */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;align-items:center;gap:11px;
  background:#25D366;color:#fff;border-radius:44px;padding:9px 18px 9px 9px;text-decoration:none;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.45);transition:transform .2s ease,box-shadow .2s ease}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(0,0,0,.5)}
.wa-ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none}
.wa-ic svg{width:21px;height:21px}
.wa-txt b{display:block;font-size:13.5px;font-weight:700;line-height:1.15}
.wa-txt b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#c8ffd9;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.wa-txt small{display:block;font-size:11px;opacity:.92}
@media(max-width:600px){ .wa-float{right:14px;bottom:14px;padding:11px} .wa-txt{display:none} }

/* ===== Çevrimiçi buton: site renkleriyle sıcak gradyan (yeşil değil) ===== */
.wa-float{background:linear-gradient(135deg, var(--ember) 0%, var(--emberd) 62%, #7c3517 100%)}
.wa-ic{background:rgba(255,255,255,.20)}
.wa-txt b::before{background:#ffe2cf;box-shadow:0 0 0 2px rgba(255,255,255,.28);animation:waPulse 2s ease-in-out infinite}
@keyframes waPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ===== Ambient: sayfa geneli yumuşak spot ışıkları + sıcak gradyanlar ===== */
body{
  background:var(--paper);
  background-image:
    radial-gradient(1100px 600px at 80% -3%, rgba(255,252,247,.92), rgba(255,252,247,0) 60%),
    radial-gradient(950px 600px at 5% 16%, rgba(231,109,12,.07), rgba(231,109,12,0) 58%),
    radial-gradient(1200px 780px at 96% 45%, rgba(255,250,242,.85), rgba(255,250,242,0) 55%),
    radial-gradient(1000px 640px at -5% 70%, rgba(231,109,12,.06), rgba(231,109,12,0) 55%),
    radial-gradient(1250px 840px at 52% 101%, rgba(240,244,248,.95), rgba(240,244,248,0) 60%);
}

/* ===== Her modülün arkasına spot ışığı (düz renk yerine derinlik) ===== */
.block{position:relative}
.block{
  background:
    radial-gradient(920px 540px at 16% 6%, rgba(255,251,245,.75), rgba(255,251,245,0) 60%),
    radial-gradient(760px 520px at 90% 72%, rgba(231,109,12,.055), rgba(231,109,12,0) 60%);
}
.cf-sec{
  background:
    radial-gradient(1050px 640px at 50% 4%, rgba(255,250,242,.85), rgba(255,250,242,0) 58%),
    radial-gradient(840px 560px at 10% 86%, rgba(231,109,12,.07), rgba(231,109,12,0) 60%);
}
.reviews{
  background:
    radial-gradient(920px 600px at 84% 14%, rgba(231,109,12,.075), rgba(231,109,12,0) 58%),
    radial-gradient(940px 580px at 8% 88%, rgba(255,250,242,.8), rgba(255,250,242,0) 60%);
}
.prefoot{
  background:
    radial-gradient(1150px 640px at 50% 125%, rgba(231,109,12,.09), rgba(231,109,12,0) 60%),
    radial-gradient(900px 520px at 12% -10%, rgba(255,251,245,.7), rgba(255,251,245,0) 60%);
}

/* ===== Kurumsal mega-dropdown (kart kırılım) ===== */
.pillnav .has-mega{position:relative}
.pillnav .mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px);
  width:520px;max-width:86vw;background:var(--card);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 34px 70px -24px rgba(16,21,28,.4);padding:14px;opacity:0;visibility:hidden;
  transition:.26s var(--ease);z-index:70}
.pillnav .mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.pillnav .has-mega:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mcard{position:relative;display:block;background:var(--paper);border:1px solid var(--line);border-radius:15px;
  padding:18px 16px 20px;transition:.2s var(--ease);overflow:hidden}
.mcard::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 85% 120%, rgba(231,109,12,.07), transparent 60%);opacity:0;transition:.25s}
.mcard:hover{transform:translateY(-2px);border-color:var(--ember);background:#fff}
.mcard:hover::after{opacity:1}
.mcard b{display:block;font-family:"Fraunces",serif;font-weight:400;font-size:17px;color:var(--ink)}
.mcard small{display:block;color:var(--slate);font-size:12.5px;margin-top:4px;line-height:1.4}
.mc-ar{position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);transition:.2s}
.mc-ar svg{width:13px;height:13px}
.mcard:hover .mc-ar{background:var(--ink);color:#fff;border-color:var(--ink)}
.mc-eyebrow{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--slate);margin-bottom:4px}
.mcard.cta{background:linear-gradient(135deg,var(--ember) 0%,var(--emberd) 75%);border-color:transparent}
.mcard.cta b,.mcard.cta .mc-eyebrow{color:#fff}
.mcard.cta .mc-eyebrow{opacity:.9}
.mcard.cta .mc-ar{border-color:rgba(255,255,255,.55);color:#fff}
.mcard.cta:hover{transform:translateY(-2px);filter:brightness(1.04)}
.mcard.cta:hover .mc-ar{background:#fff;color:var(--emberd);border-color:#fff}

/* ===== Çevrimiçi buton: zarif krem/fildişi ton (turuncu/yeşil değil) ===== */
.wa-float{
  background:linear-gradient(140deg, #F8FAFC 0%, #EEF0F3 100%);
  color:var(--ink);
  border:1px solid rgba(20,23,27,.10);
  box-shadow:0 16px 40px -14px rgba(16,21,28,.3);
}
.wa-float:hover{background:#fff;border-color:rgba(20,23,27,.16)}
.wa-ic{background:var(--ink);color:#F8FAFC}
.wa-txt b{color:var(--ink)}
.wa-txt small{color:var(--slate);opacity:1}
.wa-txt b::before{background:#6BBF8A;box-shadow:0 0 0 2px rgba(107,191,138,.22)}

/* ===== Hizmetler mega (3 sütun, 9 hizmet) ===== */
.pillnav .mega.mega-svc{left:0;transform:translateX(-22px) translateY(10px);width:min(760px,92vw)}
.pillnav .has-mega:hover .mega.mega-svc{transform:translateX(-22px) translateY(0)}
.mega-svc .mega-grid{grid-template-columns:repeat(3,1fr);gap:9px}
.mega-svc .mcard{padding:13px 13px 15px}
.mega-svc .mcard b{font-size:15px;margin-top:2px}
.mega-svc .mcard small{font-size:11.5px;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega-svc .mc-ar{width:26px;height:26px;top:11px;right:11px}
.mega-svc .mc-ar svg{width:12px;height:12px}
@media(max-width:1180px){.pillnav .mega.mega-svc{width:min(620px,92vw)}.mega-svc .mega-grid{grid-template-columns:1fr 1fr}}

/* ===== TAM RESPONSIVE — mobil ince ayarlar ===== */
html{overflow-x:hidden}
/* Hakkımızda galeri küçük resimleri dar ekranda esnesin (360px taşması) */
@media(max-width:440px){
  .aboutfrost .thumbs{gap:8px}
  .aboutfrost .thumbs .t{flex:1 1 0;width:auto;min-width:0;height:56px}
}
/* Çok dar ekran: başlık ve buton ölçüleri */
@media(max-width:400px){
  .bigword{font-size:clamp(48px,16vw,80px)}
  .hd .pillcta.ghost{padding:9px 14px}
  .hd .pillcta.ghost .arrowbtn{width:30px;height:30px}
}
/* İletişim/başvuru formu alanları dar ekranda rahat */
@media(max-width:420px){
  .gform input,.gform textarea,.form input,.form textarea{font-size:15px}
  .contactsec .gform{padding:22px 18px}
}
/* Footer abone alanı taşmasın */
@media(max-width:420px){ .fsub input{font-size:14px} .fcol a{font-size:14.5px} }

/* ministats çok dar ekranda 2x2 sarsın */
@media(max-width:430px){
  .ministats{flex-wrap:wrap}
  .ministats div{flex:1 1 48%;min-width:0;padding:16px 8px 0}
  .ministats div:nth-child(2){border-right:none}
  .ministats b{font-size:23px}
  .ministats span{font-size:11.5px}
}

/* Header CTA çok dar ekranda tek satır kalsın */
.pillcta{white-space:nowrap}
@media(max-width:360px){
  .hd .bar{gap:8px}
  .hd .pillcta.ghost{padding:8px 12px;font-size:12.5px}
  .hd .pillcta.ghost .arrowbtn{width:28px;height:28px}
  .hd .logo img{height:30px}
}

/* ===== Blog ===== */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.bgrid.two{grid-template-columns:repeat(2,1fr)}
.bcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;transition:.28s var(--ease);text-decoration:none}
.bcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(16,21,28,.4);border-color:rgba(231,109,12,.4)}
.bcard-ph{aspect-ratio:16/11;overflow:hidden;background:var(--paper2)}
.bcard-ph img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)}
.bcard:hover .bcard-ph img{transform:scale(1.05)}
.bcard-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.bcard-tag{align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--emberd);background:rgba(231,109,12,.1);border-radius:20px;padding:4px 11px}
.bcard h3{font-family:"Fraunces",serif;font-weight:400;font-size:19px;line-height:1.25;color:var(--ink)}
.bcard p{color:var(--slate);font-size:13.5px;line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard-more{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:13.5px;margin-top:4px}
.arrowbtn.sm{width:26px;height:26px}
.arrowbtn.sm svg{width:13px;height:13px}

/* Blog yazı (post) */
.wrap.narrow{max-width:840px}
.prose.post p{font-size:16.5px;line-height:1.85;color:#39342d;margin-bottom:18px}
.post-cta{margin-top:34px;padding:28px;border-radius:var(--r2);background:linear-gradient(135deg, rgba(231,109,12,.1), rgba(231,109,12,.03));border:1px solid rgba(231,109,12,.25)}
.post-cta h3{font-family:"Fraunces",serif;font-weight:400;font-size:24px;margin-bottom:6px;color:var(--ink)}
.post-cta p{color:var(--slate);margin-bottom:16px}
.post-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.pillcta.ghost-d{background:transparent;border:1px solid var(--line);color:var(--ink)}
.pillcta.ghost-d:hover{border-color:var(--ink);background:rgba(20,23,27,.04)}
.rel-head{margin:44px 0 18px}

@media(max-width:900px){.bgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bgrid,.bgrid.two{grid-template-columns:1fr}.post-cta-btns{flex-direction:column}.post-cta-btns .pillcta{justify-content:center}}

/* Kurumsal mega: İletişim CTA kartı tam genişlik (Blog eklenince 2x2+1) */
.mega .mcard.cta{grid-column:1 / -1}

/* ===== Anasayfa blog teaser — küçük 3 kart ===== */
.blog-teaser .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}
.bgrid.mini .bcard-ph{aspect-ratio:16/9}
.bgrid.mini .bcard-body{padding:14px 16px 16px;gap:7px}
.bgrid.mini .bcard h3{font-size:16px;line-height:1.25}
.bgrid.mini .bcard-more{font-size:13px;margin-top:2px}
@media(max-width:900px){.bgrid.mini{grid-template-columns:1fr 1fr}.blog-teaser .head-row .pillcta{display:none}}
@media(max-width:600px){.bgrid.mini{grid-template-columns:1fr}}


/* ============================================================
   KAMALI MÜHENDİSLİK — marka uyarlamaları
   ============================================================ */
/* Logo iki satırlı bir wordmark olduğu için biraz daha büyük */
.hd .logo img{height:42px}
.hd.scrolled .logo img,.hd.solid .logo img{height:38px}
.fbrand .flogo img{height:52px}
@media(max-width:520px){ .hd .logo img,.hd.scrolled .logo img,.hd.solid .logo img{height:34px} }
@media(max-width:360px){ .hd .logo img,.hd.scrolled .logo img,.hd.solid .logo img{height:30px} }

/* Uzun wordmark: dev başlıkları küçült ki taşmasın */
.hero .word{font-size:clamp(26px,7.4vw,124px);letter-spacing:.08em;top:16%}
.prefoot .bigword{font-size:clamp(34px,9.6vw,168px)}
@media(max-width:520px){ .prefoot .bigword{font-size:clamp(28px,10vw,60px)} }

/* Hero slider noktaları */
.hero-dots{position:absolute;right:clamp(26px,3.5vw,56px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:4}
.hero-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:transparent;cursor:pointer;transition:.3s var(--ease)}
.hero-dots button.on{background:#fff;transform:scale(1.35)}
@media(max-width:920px){
  .hero-dots{right:auto;left:clamp(26px,3.5vw,56px);top:auto;bottom:14px;transform:none;flex-direction:row}
}

/* Hizmetler mega menüsü 11 hizmet için biraz daha geniş */
.pillnav .mega.mega-svc{width:min(820px,92vw)}

/* Hakkımızda rozeti (yıldız + etiket) */
.aboutfrost .rating .st{color:var(--ember)}
.aboutfrost .rating b{font-size:22px}


/* ============================================================
   Öncesi / Sonrası (tut-sürükle) modülü
   ============================================================ */
.basec .ba{max-width:620px;margin:0 auto}
.ba-card{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r2);overflow:hidden;
  user-select:none;cursor:ew-resize;background:var(--card);box-shadow:0 26px 60px -30px rgba(16,21,28,.5)}
.ba-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-after{z-index:1}
.ba-before-wrap .ba-before{position:absolute;left:0;top:0;height:100%;max-width:none}
.ba-before-wrap{position:absolute;inset:0;width:50%;overflow:hidden;z-index:2;border-right:2px solid rgba(255,255,255,.9);will-change:width}
.ba-tag{position:absolute;top:14px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.12em;
  padding:6px 12px;border-radius:30px;color:#fff;background:rgba(14,18,24,.55);backdrop-filter:blur(6px)}
.ba-tag-before{left:14px}
.ba-tag-after{right:14px}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:44px;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;cursor:ew-resize;touch-action:none}
.ba-line{flex:1;width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 8px rgba(0,0,0,.3)}
.ba-knob{width:46px;height:46px;flex:none;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;box-shadow:0 6px 20px -6px rgba(0,0,0,.5);transition:transform .2s var(--ease)}
.ba-knob svg{width:20px;height:20px}
.ba-card.dragging .ba-knob{transform:scale(1.08)}
.ba-handle:focus{outline:none}
.ba-handle:focus-visible .ba-knob{box-shadow:0 0 0 3px var(--ember),0 6px 20px -6px rgba(0,0,0,.5)}
.ba-ctrl{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}
.ba-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.25s var(--ease)}
.ba-arrow:hover{background:var(--ink);color:#fff;border-color:transparent}
.ba-arrow svg{width:18px;height:18px}
.ba-dots{display:flex;gap:9px}
.ba-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:none;cursor:pointer;
  background:rgba(20,23,27,.2);transition:.25s var(--ease)}
.ba-dots button.on{background:var(--emberd);transform:scale(1.3)}
.ba-cap{text-align:center;margin-top:16px;color:var(--slate);font-size:14px}
@media(max-width:560px){
  .ba-knob{width:40px;height:40px}.ba-tag{font-size:10px;padding:5px 10px}
}

/* ============================================================
   Uygulamalar — akan galeri (marquee) + lightbox
   ============================================================ */
.gsec .wrap{margin-bottom:26px}
.gmarquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.gmarquee+.gmarquee{margin-top:16px}
.gtrack{display:flex;gap:16px;width:max-content;will-change:transform}
.gtrack.left{animation:g-left 64s linear infinite}
.gtrack.right{animation:g-right 72s linear infinite}
.gsec:hover .gtrack{animation-play-state:paused}
@keyframes g-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes g-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.gtile{position:relative;flex:none;width:clamp(230px,26vw,340px);height:clamp(230px,26vw,340px);aspect-ratio:1/1;border:none;padding:0;
  border-radius:18px;overflow:hidden;cursor:pointer;background:var(--card);
  box-shadow:0 18px 44px -26px rgba(16,21,28,.5)}
.gtile img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease)}
.gtile:hover img{transform:scale(1.06)}
.gtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,24,0) 45%,rgba(14,18,24,.72) 100%);
  opacity:0;transition:.35s var(--ease)}
.gtile:hover::after{opacity:1}
.gt-cap{position:absolute;left:14px;right:44px;bottom:13px;z-index:2;color:#fff;font-size:13px;font-weight:600;
  text-align:left;line-height:1.3;opacity:0;transform:translateY(6px);transition:.35s var(--ease)}
.gtile:hover .gt-cap{opacity:1;transform:none}
.gt-ic{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;
  opacity:0;transform:scale(.82);transition:.35s var(--ease)}
.gt-ic svg{width:15px;height:15px}
.gtile:hover .gt-ic{opacity:1;transform:none}
@media(max-width:560px){ .gt-cap{font-size:12px;opacity:1;transform:none} .gt-ic{opacity:1;transform:none} }

/* Projeler ızgarası — düz metin caption (yeni yapı) */
.pgal .pj-cap{font-size:13px;font-weight:600;line-height:1.3}
@media(max-width:560px){ .pgal .pj-cap{opacity:1;transform:none;font-size:12px} }

/* Tek slide varken boş nokta kutusunu tamamen gizle */
.hero-dots:empty{display:none}

/* ============================================================
   KAMALI MÜHENDİSLİK — ek düzenlemeler
   ============================================================ */

/* Hizmet mega menüsü: 7 öğeli navigasyonda sağa taşmayı önlemek için
   öğenin altında ortalanır (eskiden sola yapışıktı). */
.pillnav .mega.mega-svc{left:50%;transform:translateX(-50%) translateY(10px);width:min(820px,94vw)}
.pillnav .has-mega:hover .mega.mega-svc{transform:translateX(-50%) translateY(0)}
@media(max-width:1180px){.pillnav .mega.mega-svc{width:min(640px,94vw)}}

/* Değer/adım kartları için kolon varyantları
   (satır içi style yerine sınıf — mobil medya sorgusu çalışsın diye) */
.vals.two{grid-template-columns:repeat(2,1fr)}
.vals.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.vals.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.vals.two,.vals.three{grid-template-columns:1fr}}

/* Teklif formundaki açılır liste */
.form select{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  background:#fff;font-family:inherit;font-size:15px;color:var(--ink);margin-bottom:14px}

/* Hakkımızda alıntısı */
.pullquote{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(19px,2.4vw,25px);
  line-height:1.35;border-left:2px solid var(--ember);padding-left:22px;margin:26px 0 8px;color:var(--ink)}
.pullquote cite{display:block;font-family:"Manrope",sans-serif;font-size:13px;font-style:normal;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:12px}

/* Hakkımızda görsel kartı */
.aboutshot{padding:0;overflow:hidden;min-height:340px}
.aboutshot img{width:100%;height:100%;object-fit:cover}

/* Bölüm altı çift CTA satırı */
.sec-cta{display:flex;justify-content:center;align-items:center;gap:12px;
  flex-wrap:wrap;margin-top:34px}

/* ============================================================
   Footer bağlantıları — 3 kolon tek sıra
   (eskiden .fcols 2 kolondu, 3. kolon alt satıra sarıp
   footer'ı gereksiz uzatıyordu)
   ============================================================ */
.fwrap{grid-template-columns:.85fr 1.65fr}
.fcols{grid-template-columns:repeat(3,1fr);gap:0 clamp(14px,1.8vw,30px)}
.fcol a{font-size:clamp(13px,1.02vw,14.5px);padding:9px 0;line-height:1.35}

/* çok geniş ekranda tek satıra sığar; daha darda kesmek yerine alt satıra sarar */
@media(min-width:1280px){.fcol a{white-space:nowrap}}

/* fwrap tek kolona düşünce linkler tüm genişliği alır, 3 kolon kalabilir */
@media(max-width:900px){.fwrap{grid-template-columns:1fr;gap:40px}}
@media(max-width:640px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.fcols{grid-template-columns:1fr}}

/* ============================================================
   Ekip kartları (ekibimiz.html)
   ============================================================ */
.tmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tm{overflow:hidden;padding:0;display:flex;flex-direction:column}
.tm-ph{aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.tm-ph img{width:100%;height:100%;object-fit:cover}
.tm-body{padding:24px 26px 26px}
.tm-role{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--emberd)}
.tm-body h3{font-family:"Fraunces",serif;font-weight:300;font-size:24px;margin:8px 0 10px}
.tm-body h3 a:hover{color:var(--emberd)}
.tm-body p{color:var(--slate);font-size:14.5px;line-height:1.6}
.tm-soc{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tm-soc a{font-size:12px;font-weight:600;letter-spacing:.04em;padding:7px 13px;border-radius:30px;
  border:1px solid var(--line);color:var(--slate);transition:.25s var(--ease)}
.tm-soc a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:980px){.tmgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tmgrid{grid-template-columns:1fr}}

/* Kurucu sayfasındaki sosyal bağlantılar prose içinde */
.prose .tm-soc{margin-top:22px}

/* 4 kolonlu değer kartı varyantı (iç mimarlık kalemleri) */
.vals.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.vals.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vals.four{grid-template-columns:1fr}}

/* ============================================================
   Logo boyutu — gerçek logo yerleştirildikten sonra bir tık büyütüldü.
   Yeni logo 3.95:1 yatay; 1081–1200px arası menü ile sıkışmaması için
   o aralıkta bir kademe küçük tutuluyor.
   ============================================================ */
.hd .logo img{height:48px}
.hd.scrolled .logo img,.hd.solid .logo img{height:44px}
@media(min-width:1300px){
  .hd .logo img{height:54px}
  .hd.scrolled .logo img,.hd.solid .logo img{height:48px}
}
@media(min-width:1081px) and (max-width:1200px){
  .hd .logo img{height:42px}
  .hd.scrolled .logo img,.hd.solid .logo img{height:40px}
}
@media(max-width:520px){
  .hd .logo img,.hd.scrolled .logo img,.hd.solid .logo img{height:40px}
}
@media(max-width:360px){
  .hd .logo img,.hd.scrolled .logo img,.hd.solid .logo img{height:36px}
}
.fbrand .flogo img{height:58px}

/* ============================================================
   Proje detay sayfası
   Fotoğraflar düşük çözünürlüklü olduğu için kırpılmıyor ve
   büyütülmüyor: height:auto ile doğal oranlarında duruyorlar.
   Kat planlarının kırpılmaması özellikle önemli.
   ============================================================ */
.pagehero.plain{min-height:clamp(260px,32vh,360px);
  background:linear-gradient(145deg,#14171B 0%,#1c232c 55%,#2a333e 100%)}
.pagehero.plain .scrim{background:linear-gradient(180deg,rgba(14,18,24,.1),rgba(14,18,24,.45))}

.pgrid{display:grid;gap:14px;margin-top:26px}
.pgrid.two{grid-template-columns:repeat(2,1fr)}
.pgrid.three{grid-template-columns:repeat(3,1fr)}
.pshot{position:relative;border:none;padding:0;border-radius:var(--r2);overflow:hidden;
  background:var(--paper2);cursor:pointer;display:block;width:100%;
  box-shadow:0 18px 44px -34px rgba(18,26,36,.5)}
.pshot img{width:100%;height:auto;display:block;transition:transform .6s var(--ease)}
.pshot:hover img{transform:scale(1.04)}
.pshot-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px 16px 12px;
  color:#fff;font-size:13px;font-weight:600;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(18,12,7,.8))}
@media(max-width:860px){.pgrid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid.two,.pgrid.three{grid-template-columns:1fr}}

/* proje bilgi tablosu */
.pspecs{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--line)}
.pspecs li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.pspecs b{font-weight:600;color:var(--ink)}
.pspecs span{color:var(--slate);text-align:right}

/* Proje detay — 4 kolonlu ızgara ve tasarım/uygulama etiketi */
.pgrid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.pgrid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pgrid.four{grid-template-columns:1fr}}
.pshot-badge{position:absolute;top:12px;left:12px;z-index:4;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 11px;border-radius:30px;background:rgba(18,12,7,.72);color:#fff;
  backdrop-filter:blur(6px)}
.pshot-badge.built{background:rgba(231,109,12,.92)}

/* ============================================================
   MİMARİ FARE EFEKTLERİ  (assets/effects.js ile birlikte)
   Dokunmatik cihazlarda ve "hareketi azalt" ayarında devre dışı.
   ============================================================ */

/* --- 1) Spot ışığı ---
   Bölümün içine eklenir; bölümde overflow:hidden olduğu için taşmaz.
   z-index 1: karartma katmanının üstünde, yazıların altında kalır —
   böylece başlıklar net durur, ışık yalnızca fotoğrafı aydınlatır. */
.fx-spot-wrap{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .5s var(--ease)}
.fx-spot-wrap.on{opacity:1}
/* mix-blend-mode kullanılmıyor: opacity geçişli bir kapsayıcı yeni yığınlama
   bağlamı yarattığı için harmanlama kipi tarayıcılar arasında tutarsız
   davranıyor. Sıcak tonlu düz gradyan koyu fotoğraf üzerinde aynı spot
   etkisini veriyor ve her tarayıcıda birebir aynı görünüyor. */
.fx-spot{position:absolute;top:0;left:0;width:620px;height:620px;
  margin:-310px 0 0 -310px;will-change:transform;
  background:radial-gradient(circle closest-side,
    rgba(232,242,255,.30) 0%,
    rgba(240,158,88,.19) 38%,
    rgba(231,109,12,.09) 62%,
    rgba(231,109,12,0) 100%)}
@media(max-width:760px){.fx-spot{width:420px;height:420px;margin:-210px 0 0 -210px}}

/* --- 2) Kart eğimi --- */
.scard,.pshot,.tm,.bcard{transform-style:preserve-3d;will-change:transform}

/* --- 3) Ölçü / kadraj işaretleri --- */
.fx-marks{position:absolute;inset:12px;z-index:4;pointer-events:none;opacity:0;
  transition:opacity .35s var(--ease),inset .35s var(--ease)}
.fx-marks::before,.fx-marks::after{content:"";position:absolute;width:18px;height:18px;
  border-color:rgba(226,231,237,.85);border-style:solid;border-width:0}
.fx-marks::before{top:0;left:0;border-top-width:1px;border-left-width:1px}
.fx-marks::after{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.gtile:hover .fx-marks,.pj:hover .fx-marks,.pshot:hover .fx-marks{opacity:1;inset:16px}

/* --- 4) Büyük yazıda ışık takibi --- */
.prefoot .bigword{--fx-x:50%;--fx-y:50%;transition:opacity .4s var(--ease)}
.prefoot .bigword.fx-lit{
  background-image:radial-gradient(220px circle at var(--fx-x) var(--fx-y),
    rgba(231,109,12,.55),transparent 70%);
  -webkit-background-clip:text;background-clip:text}

@media(hover:none),(prefers-reduced-motion:reduce){
  .fx-spot-wrap{display:none}
  .fx-marks{display:none}
  .scard,.pshot,.tm,.bcard{transform-style:flat;will-change:auto}
}

/* Temsilî görsel etiketi — fotoğrafı henüz gelmemiş projeler için.
   Görsel o projenin kendi fotoğrafı olmadığında ziyaretçiye bunu bildirir. */
.tile-demo{position:absolute;top:12px;left:12px;z-index:5;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;border-radius:30px;color:#fff;
  background:rgba(18,12,7,.66);border:1px solid rgba(226,231,237,.28);
  backdrop-filter:blur(6px);pointer-events:none}
.pgal .tile-demo{top:10px;left:10px;font-size:9px;padding:4px 9px}

/* ============================================================
   7 kartlı bölümler — üstte 3, altta 4 (iki sıra)
   ------------------------------------------------------------
   Hizmetlerimiz ve Mekân & Bölüm bölümlerinde 7 kart var; 3'lü
   ızgarada son kart tek başına üçüncü sıraya düşüyordu.
   12 kolonlu ızgarada ilk üç kart 4, kalan dört kart 3 kolon
   kaplayarak tam iki sıra oluyor.

   Kart sayısı :has() ile algılanıyor, HTML'e sınıf eklemek
   gerekmiyor. Desteklemeyen eski tarayıcıda eski 3'lü düzen
   aynen çalışmaya devam eder (bozulma olmaz).
   ============================================================ */
@media(min-width:921px){
  .scards.n7,
  .scards:has(> :first-child:nth-last-child(7)){grid-template-columns:repeat(12,1fr)}

  .scards.n7 > :nth-child(-n+3),
  .scards:has(> :first-child:nth-last-child(7)) > :nth-child(-n+3){grid-column:span 4}

  .scards.n7 > :nth-child(n+4),
  .scards:has(> :first-child:nth-last-child(7)) > :nth-child(n+4){grid-column:span 3}

  /* alt sıra daha dar; yükseklik ve metin genişliğini bir tık kıs */
  .scards:not(.mini).n7 > :nth-child(n+4),
  .scards:not(.mini):has(> :first-child:nth-last-child(7)) > :nth-child(n+4){
    min-height:clamp(380px,34vw,480px)}
  .scards.mini.n7 > :nth-child(n+4),
  .scards.mini:has(> :first-child:nth-last-child(7)) > :nth-child(n+4){
    min-height:clamp(228px,21vw,292px)}
  .scards.n7 > :nth-child(n+4) .sbody p,
  .scards:has(> :first-child:nth-last-child(7)) > :nth-child(n+4) .sbody p{max-width:250px}
}

/* Ekip detay sayfasındaki küçük "diğer ekip" ızgarası */
.tmgrid.mini{grid-template-columns:repeat(4,1fr)}
.tmgrid.mini .tm-body{padding:16px 18px 20px}
.tmgrid.mini .tm-body h3{font-size:19px;margin:6px 0 0}
@media(max-width:980px){.tmgrid.mini{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tmgrid.mini{grid-template-columns:1fr}}

/* ============================================================
   DÜZELTME 1 — Açılır menü kartlarında açıklama kesiliyordu
   ------------------------------------------------------------
   Sebep: .pillnav a{white-space:nowrap} kuralı üst menü pilleri
   için yazılmış ama mega menü içindeki .mcard bağlantılarına da
   sızıyordu. Metin tek satırda kalıp .mcard{overflow:hidden}
   tarafından kesiliyordu. Kart içinde sarmayı geri açıyoruz.
   ============================================================ */
.pillnav .mega a{white-space:normal}

/* başlık satırı sağ üstteki ok düğmesinin altına girmesin */
.mcard b{padding-right:38px}
.mega-svc .mcard b{padding-right:32px}

/* açıklamalar sınırlı satırda — kart yükseklikleri dengeli kalsın.
   Açıklama metinleri 2 satıra sığacak şekilde kısaltıldı, bu yüzden
   her iki menüde de sınır 2 satır. */
.mega .mcard small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* ============================================================
   DÜZELTME 2 — Kişi ve proje sayfalarında başlık, header'la çakışıyordu
   ------------------------------------------------------------
   Fotoğraflı .pagehero 380–520px yüksekliğinde; fotoğrafsız .plain
   sürümünü 260–360px yapmıştım. Header 74px sabit olduğu için
   breadcrumb satırı logonun üstüne biniyordu. Yükseklik fotoğraflı
   sürüme yaklaştırıldı, ayrıca içeriğe üstten güvenlik payı verildi.
   ============================================================ */
.pagehero.plain{min-height:clamp(400px,48vh,500px)}
.pagehero.plain .inner{padding-top:104px}
@media(max-width:760px){
  .pagehero.plain{min-height:clamp(330px,42vh,400px)}
  .pagehero.plain .inner{padding-top:88px}
}

/* ============================================================
   HERO DÜZELTMELERİ — Kamalı
   ------------------------------------------------------------
   1) Logo görünmüyordu: gümüş metal logo, aydınlık hero
      fotoğrafının üzerinde kayboluyordu. Kontur gölgesi eklendi.
   2) Dev "KAMALI MÜHENDİSLİK" filigranı taşıyordu: marka adı
      18 karakter (Özdil'de 12 idi), 13vw ile ekran genişliğini
      aşıp üstteki mikro metinlerin üzerine biniyordu.
      Karakter sayısına orantılı biçimde küçültüldü ve aşağı alındı.
   ============================================================ */

/* --- 1) Logo okunurluğu --- */
.hd .logo img.white{filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))
                            drop-shadow(0 0 18px rgba(0,0,0,.35))}
.hd.scrolled .logo img.dark,.hd.solid .logo img.dark{filter:none}
/* hero üst kenarına logo ve menüyü ayıran hafif karartma */
.hero .scrim::after,.pagehero .scrim::after{content:"";position:absolute;
  left:0;right:0;top:0;height:190px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,20,.55),transparent)}

/* --- 2) Dev marka filigranı: orantılı ölçek --- */
.hero .word{
  font-size:clamp(22px,7.2vw,158px);   /* 18 karakter ≈ 10.4em → ~75vw */
  letter-spacing:.04em;
  top:24%;
  padding:0 4vw;
  color:rgba(255,255,255,.42);
}

/* --- 3) Üst mikro metinler filigrana yer açsın --- */
.hero-mid{top:104px}
.hero-mid .micro{font-size:11.5px;line-height:1.5;max-width:200px}

@media(max-width:1100px){
  .hero .word{top:26%;font-size:clamp(22px,7vw,110px)}
}

/* ============================================================
   ANİMASYONLU SİSTEM ŞEMALARI  (scripts/hvac_sema.py)
   ------------------------------------------------------------
   Akış efekti: boru yolu önce düz çizilir, üzerine aynı yol
   kesikli olarak bindirilir ve stroke-dashoffset kaydırılır.
   JS gerekmez; "hareketi azalt" ayarında animasyon durur,
   şema statik teknik çizim olarak okunmaya devam eder.
   ============================================================ */
.hvac-fig{margin:0;background:linear-gradient(160deg,#151a21,#222b35);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r2);
  padding:clamp(18px,3vw,34px);overflow:hidden}
.hvac-fig svg{width:100%;height:auto;display:block}
.hvac-fig figcaption{margin-top:16px;color:rgba(226,231,237,.62);
  font-size:13.5px;line-height:1.55;max-width:62ch}

.hv-box{fill:rgba(255,255,255,.045);stroke:rgba(226,231,237,.55);stroke-width:2}
.hv-line{fill:none;stroke:rgba(226,231,237,.5);stroke-width:2;stroke-linecap:round}
.hv-vent{fill:rgba(226,231,237,.25)}
.hv-pipe{fill:none;stroke:rgba(226,231,237,.22);stroke-width:5;stroke-linecap:round}
.hv-pipe.warm{stroke:rgba(231,109,12,.24)}

/* akan kesikler */
.hv-flow{stroke:var(--ember);stroke-width:5;stroke-dasharray:8 26;
  animation:hvFlow 1.5s linear infinite}
.hv-pipe.warm.hv-flow{stroke:#ff9a3d}
.hv-flow.rev{animation-direction:reverse}
@keyframes hvFlow{to{stroke-dashoffset:-34}}

/* fan dönüşü */
.hv-fan{animation:hvSpin 4s linear infinite}
.hv-fan.slow{animation-duration:6s}
@keyframes hvSpin{to{transform:rotate(360deg)}}

.hv-lbl{fill:rgba(226,231,237,.72);font-family:"Manrope",sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.12em}
.hv-note{fill:rgba(226,231,237,.42);font-family:"Manrope",sans-serif;
  font-size:12.5px;letter-spacing:.05em}
.hv-note.warm{fill:rgba(255,154,61,.6)}

@media(prefers-reduced-motion:reduce){
  .hv-flow,.hv-fan{animation:none}
  .hv-flow{stroke-dasharray:8 26}
}

/* ============================================================
   HAVA AKIŞI — hizmet kartlarında üzerine gelince
   Split ve VRF kartlarında cihazdan yayılan serin hava hissi.
   ============================================================ */
.scard{--air:0}
.scard .airflow{position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease)}
.scard:hover .airflow{opacity:1}
.airflow span{position:absolute;left:12%;right:12%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(196,226,255,.75),transparent);
  filter:blur(.4px);transform:translateX(-100%)}
.airflow span:nth-child(1){top:34%;animation:airDrift 2.6s linear infinite}
.airflow span:nth-child(2){top:44%;animation:airDrift 2.6s linear .5s infinite}
.airflow span:nth-child(3){top:54%;animation:airDrift 2.6s linear 1s infinite}
@keyframes airDrift{
  0%{transform:translateX(-100%) scaleX(.4);opacity:0}
  25%{opacity:1}
  75%{opacity:1}
  100%{transform:translateX(100%) scaleX(1);opacity:0}
}
@media(prefers-reduced-motion:reduce),(hover:none){
  .scard .airflow{display:none}
}