/* Tema "cini": İznik çinisi — kobalt, turkuaz, mercan kırmızısı ve biraz yeşil, sırlı beyaz zemin.
   Desenli çini çerçeve, derzli karo ızgaraları (köşe çeyrek daireleri yan yana gelince madalyon olur), sekiz köşeli yıldız ikon zeminleri. */
:root{
  --bg:#f4f1e9;--tile:#fcfbf7;--glaze2:#e9eef4;
  --cob:#1c3f94;--cob-d:#122a66;--cob-dd:#0c1d4a;
  --tq:#2f9e9b;--tq-d:#17706e;--coral:#c63b2e;--green:#3c7a4f;
  --ink:#17213d;--ink2:#4a5472;--grout:#d8d3c5;--line:rgba(28,63,148,.18);
  --f-head:"Bodoni Moda",Georgia,"Times New Roman",serif;--f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Sekiz köşeli yıldız ve pahlı çerçeve */
  --oct:polygon(50% 0,64.5% 14.9%,85.4% 14.6%,85.1% 35.5%,100% 50%,85.1% 64.5%,85.4% 85.4%,64.5% 85.1%,50% 100%,35.5% 85.1%,14.6% 85.4%,14.9% 64.5%,0 50%,14.9% 35.5%,14.6% 14.6%,35.5% 14.9%);
  --cham:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px);
  --cham-s:polygon(19px 0,calc(100% - 19px) 0,100% 19px,100% calc(100% - 19px),calc(100% - 19px) 100%,19px 100%,0 calc(100% - 19px),0 19px);
  /* Karo köşesi: mercan nokta, turkuaz disk, kobalt halka (dört karo birleşince tam madalyon) */
  --qc:var(--coral) 0 5px,var(--tq) 5.5px 15px,transparent 15.5px 20px,var(--cob) 20.5px 22px,transparent 22.5px;
  /* Bordür karosu (24px): kobalt zemin, beyaz dört yapraklı çiçek, mercan göbek, turkuaz köşe noktaları */
  --pat-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='%231c3f94'/%3E%3Cpath d='M12 4c2.2 2.6 2.2 5.4 0 8c-2.2-2.6-2.2-5.4 0-8zM12 20c-2.2-2.6-2.2-5.4 0-8c2.2 2.6 2.2 5.4 0 8zM4 12c2.6-2.2 5.4-2.2 8 0c-2.6 2.2-5.4 2.2-8 0zM20 12c-2.6 2.2-5.4 2.2-8 0c2.6-2.2 5.4-2.2 8 0z' fill='%23fcfbf7'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%23c63b2e'/%3E%3Cg fill='%232f9e9b'%3E%3Ccircle r='3.2'/%3E%3Ccircle cx='24' r='3.2'/%3E%3Ccircle cy='24' r='3.2'/%3E%3Ccircle cx='24' cy='24' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  /* Alan karosu (96px): köşelerde kesişen halkalar, ortada sekiz yapraklı gül, kenarlarda yeşil baklava, derz çizgisi */
  --pat-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cdefs%3E%3Cpath id='p' d='M48 30c4 4.8 4 9.6 0 14c-4-4.4-4-9.2 0-14z'/%3E%3C/defs%3E%3Cpath d='M.5 0V96M0 .5H96' stroke='%231c3f94' stroke-opacity='.35'/%3E%3Cg fill='none' stroke='%231c3f94' stroke-width='1.3'%3E%3Ccircle r='30'/%3E%3Ccircle cx='96' r='30'/%3E%3Ccircle cy='96' r='30'/%3E%3Ccircle cx='96' cy='96' r='30'/%3E%3C/g%3E%3Cg fill='none' stroke='%232f9e9b' stroke-width='1.1'%3E%3Ccircle r='20'/%3E%3Ccircle cx='96' r='20'/%3E%3Ccircle cy='96' r='20'/%3E%3Ccircle cx='96' cy='96' r='20'/%3E%3Ccircle cx='48' cy='48' r='23'/%3E%3C/g%3E%3Cg fill='%231c3f94'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(90 48 48)'/%3E%3Cuse href='%23p' transform='rotate(180 48 48)'/%3E%3Cuse href='%23p' transform='rotate(270 48 48)'/%3E%3C/g%3E%3Cg fill='%232f9e9b'%3E%3Cuse href='%23p' transform='rotate(45 48 48)'/%3E%3Cuse href='%23p' transform='rotate(135 48 48)'/%3E%3Cuse href='%23p' transform='rotate(225 48 48)'/%3E%3Cuse href='%23p' transform='rotate(315 48 48)'/%3E%3C/g%3E%3Ccircle cx='48' cy='48' r='3.6' fill='%23c63b2e'/%3E%3Cg fill='%233c7a4f'%3E%3Cpath d='M48-7l4.5 7-4.5 7-4.5-7z'/%3E%3Cpath d='M48 89l4.5 7-4.5 7-4.5-7z'/%3E%3Cpath d='M-7 48l7-4.5 7 4.5-7 4.5z'/%3E%3Cpath d='M89 48l7-4.5 7 4.5-7 4.5z'/%3E%3C/g%3E%3Cg fill='%23c63b2e'%3E%3Ccircle r='4'/%3E%3Ccircle cx='96' r='4'/%3E%3Ccircle cy='96' r='4'/%3E%3Ccircle cx='96' cy='96' r='4'/%3E%3C/g%3E%3C/svg%3E");
  /* Aynı alan karosu koyu zemin için (beyaz çizgi ve yapraklar) */
  --pat-b-dk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cdefs%3E%3Cpath id='p' d='M48 30c4 4.8 4 9.6 0 14c-4-4.4-4-9.2 0-14z'/%3E%3C/defs%3E%3Cpath d='M.5 0V96M0 .5H96' stroke='%23ffffff' stroke-opacity='.4'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.3'%3E%3Ccircle r='30'/%3E%3Ccircle cx='96' r='30'/%3E%3Ccircle cy='96' r='30'/%3E%3Ccircle cx='96' cy='96' r='30'/%3E%3C/g%3E%3Cg fill='none' stroke='%2364c9c5' stroke-width='1.1'%3E%3Ccircle r='20'/%3E%3Ccircle cx='96' r='20'/%3E%3Ccircle cy='96' r='20'/%3E%3Ccircle cx='96' cy='96' r='20'/%3E%3Ccircle cx='48' cy='48' r='23'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(90 48 48)'/%3E%3Cuse href='%23p' transform='rotate(180 48 48)'/%3E%3Cuse href='%23p' transform='rotate(270 48 48)'/%3E%3C/g%3E%3Cg fill='%2364c9c5'%3E%3Cuse href='%23p' transform='rotate(45 48 48)'/%3E%3Cuse href='%23p' transform='rotate(135 48 48)'/%3E%3Cuse href='%23p' transform='rotate(225 48 48)'/%3E%3Cuse href='%23p' transform='rotate(315 48 48)'/%3E%3C/g%3E%3Ccircle cx='48' cy='48' r='3.6' fill='%23ff8a7a'/%3E%3C/svg%3E");
}
body{font-size:17px;background:var(--bg);color:var(--ink)}
h1,h2,h3{font-weight:600;color:var(--cob-dd);letter-spacing:-.005em}
::selection{background:var(--cob);color:#fff}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.progress{background:linear-gradient(90deg,var(--cob),var(--tq) 60%,var(--coral))}
.narrow{max-width:860px}

/* Gül süsü */
.ros{width:40px;height:40px;display:block}
.ros-ring{fill:none;stroke:var(--tq);stroke-width:1.4}
.ros-p{fill:var(--cob)}
.ros-q{fill:var(--tq)}
.ros-c{fill:var(--coral)}
.ros.sm{width:22px;height:22px}
.ros.lt .ros-p{fill:#fff}
.ros.lt .ros-q,.ros.lt .ros-ring{fill:#64c9c5;stroke:#64c9c5}
.ros.lt .ros-ring{fill:none}
.head-orn{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.head-orn i{display:block;width:52px;height:5px;border-block:1px solid var(--cob)}
.js .head-orn.in .ros{animation:ros-in 1.5s cubic-bezier(.2,.8,.2,1)}
@keyframes ros-in{from{transform:rotate(-135deg) scale(.4)}}

/* Bölüm başlıkları */
.sec{padding:110px 0}
.head{max-width:720px;margin-bottom:54px}
.head h2{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.08}
.head p{margin-top:16px;color:var(--ink2);max-width:600px;font-size:1.06rem}
.head.center{text-align:center;margin-left:auto;margin-right:auto}
.head.center .head-orn{justify-content:center}
.head.center p{margin-left:auto;margin-right:auto}

/* Çini karo dönerek yerine oturur */
.js .rv.flip{translate:none;rotate:y 86deg;transition-duration:.9s,.9s,.9s,.3s,1.1s,.3s,.4s,.3s,.4s;transition-delay:calc(var(--d,0) * 110ms),calc(var(--d,0) * 110ms),0s,0s,calc(var(--d,0) * 110ms),0s,0s,0s,0s}
.js .rv.flip.in{rotate:y 0deg}

/* Sekiz köşeli yıldız ikon zemini */
.star{flex:none;display:grid;place-items:center;width:52px;height:52px;background:var(--cob);color:#fff;clip-path:var(--oct);transition:rotate .7s cubic-bezier(.2,.8,.2,1),background .4s}
.star svg{width:22px;height:22px;transition:rotate .7s cubic-bezier(.2,.8,.2,1)}

/* Butonlar */
.btn{border-radius:3px;font-weight:600;letter-spacing:.01em}
.btn-cob{background:var(--cob);color:#fff;box-shadow:0 12px 26px -16px rgba(12,29,74,.9)}
.btn-cob:hover{background:var(--cob-d);transform:translateY(-2px)}
.btn-wa:hover{transform:translateY(-2px)}
.btn-line{color:var(--cob);background:transparent;box-shadow:inset 0 0 0 1.5px var(--cob)}
.btn-line:hover{background:var(--cob);color:#fff}

/* Üst menü */
.top{color:var(--cob-dd)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;opacity:0;transition:opacity .35s;pointer-events:none;background:linear-gradient(var(--cob),var(--cob)) 0 0/100% 2px no-repeat,radial-gradient(circle,var(--tq) 1.6px,transparent 2.1px) 0 2px/12px 4px repeat-x}
.top.scrolled{background:rgba(250,248,242,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top.scrolled::after{opacity:1}
.logo{font-family:var(--f-head);font-weight:600;font-size:1.2rem;color:var(--cob-dd);letter-spacing:0}
.logo-mark{width:40px;height:40px;background:var(--cob);color:#fff;clip-path:var(--oct);transition:rotate .8s cubic-bezier(.2,.8,.2,1)}
.logo-mark svg{width:19px;height:19px;transition:rotate .8s cubic-bezier(.2,.8,.2,1)}
.logo:hover .logo-mark{rotate:45deg}
.logo:hover .logo-mark svg{rotate:-45deg}
.nav a.link{position:relative;color:var(--ink);padding:6px 0}
.nav a.link::after{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;margin-left:-3px;background:var(--coral);transform:rotate(45deg) scale(0);transition:transform .3s}
.nav a.link:hover{color:var(--cob)}
.nav a.link:hover::after,.nav a.link[aria-current]::after{transform:rotate(45deg) scale(1)}
.top .btn-call{background:var(--cob);color:#fff;padding:11px 18px;font-size:.92rem}
.top .btn-call:hover{background:var(--cob-d)}
/* Numara dar masaüstünde de görünsün */
@media (min-width:901px) and (max-width:1180px){
  .nav{gap:16px}
  .top .btn-call span{display:inline}
  .top .btn-call{padding-inline:14px;font-size:.88rem}
}

/* Kahraman: çini panel */
.hero{padding:112px 0 56px;overflow:hidden;background:radial-gradient(ellipse at 75% 20%,#eaf0f7,var(--bg) 65%)}
.hero-tiles{position:absolute;left:-96px;top:-96px;right:0;bottom:0;background:var(--pat-b) 0 0/96px 96px;opacity:.2;pointer-events:none;animation:drift 70s linear infinite;-webkit-mask:linear-gradient(#000 30%,rgba(0,0,0,.35));mask:linear-gradient(#000 30%,rgba(0,0,0,.35))}
@keyframes drift{to{transform:translate(96px,96px)}}
.panel{position:relative;padding:14px;background:var(--pat-a) 0 0/24px 24px;box-shadow:0 34px 60px -44px rgba(12,29,74,.7)}
.js .panel{animation:panel-in 1.3s cubic-bezier(.2,.8,.2,1) both}
@keyframes panel-in{from{clip-path:inset(46% 0 46% 0)}to{clip-path:inset(-90px)}}
.panel-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:center;padding:60px 56px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--cob),inset 0 0 0 6px var(--tile),inset 0 0 0 7px var(--tq)}
.kicker{display:flex;align-items:center;gap:10px;color:var(--tq-d);font-weight:600;font-size:1rem}
.hero h1{margin-top:20px;line-height:.98;letter-spacing:-.02em}
.h1-a{display:block;font-size:clamp(2.7rem,7vw,5.8rem);color:var(--cob)}
.h1-b{display:block;margin-top:.16em;font-size:clamp(1.65rem,3.6vw,2.9rem);font-weight:500;color:var(--cob-dd);letter-spacing:-.01em}
.lead{margin-top:24px;font-size:1.1rem;color:var(--ink2);max-width:540px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.offer{list-style:none;padding:20px 0 0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:.95rem;font-weight:600;color:var(--cob-dd);border-top:1px solid var(--line)}
.offer li{display:flex;align-items:center;gap:7px}
.offer svg{width:18px;height:18px;color:var(--tq-d)}
.hero-fig{margin:0}
.hero-img{aspect-ratio:4/5;padding:6px;background:var(--cob);clip-path:var(--cham)}
.hero-img img{width:100%;height:100%;object-fit:cover;clip-path:var(--cham-s)}
.hero-fig figcaption{margin-top:12px;text-align:center;font-size:.86rem;color:var(--ink2)}

/* Desen şeridi ve üstünden geçen çini kamyon */
.band{position:relative;overflow:hidden;background:var(--cob-dd)}
.band-strip{height:24px;background:var(--pat-a) 0 0/24px 24px repeat-x;animation:strip 9s linear infinite}
.band-strip.rev{animation-direction:reverse}
@keyframes strip{to{background-position:240px 0}}
.band-road{position:relative;height:132px;background:linear-gradient(#e6f1f0,var(--bg))}
.band-road::before{content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;background:repeating-linear-gradient(90deg,var(--cob) 0 18px,transparent 18px 34px);opacity:.3}
.band-truck{position:absolute;left:0;bottom:14px;width:210px;animation:drive 15s linear infinite;will-change:transform}
@keyframes drive{from{transform:translateX(-240px)}to{transform:translateX(calc(100vw + 20px))}}
.kamyon{display:block;width:100%;height:auto;overflow:visible;animation:bob .45s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-1.5px)}}
.k-box{fill:var(--tile);stroke:var(--cob);stroke-width:3}
.k-frame{fill:none;stroke:var(--tq);stroke-width:1.5}
.k-dots{fill:var(--cob)}
.tul-st{fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round}
.tul-f{fill:var(--coral)}
.k-cab{fill:var(--tq);stroke:var(--cob);stroke-width:3;stroke-linejoin:round}
.k-win{fill:var(--tile);stroke:var(--cob);stroke-width:2;stroke-linejoin:round}
.k-door{stroke:var(--cob);stroke-width:2;stroke-linecap:round}
.k-lamp{fill:var(--coral)}
.k-chassis{fill:var(--cob-dd)}
.whl-t{fill:var(--cob-dd)}
.whl-s{fill:var(--tq);transform-box:fill-box;transform-origin:center;animation:spin .8s linear infinite}
.whl-c{fill:var(--coral)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Tanıtım */
.intro-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.intro-head{position:sticky;top:120px}
.intro-head h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.08}
.intro-txt p{font-size:1.07rem;color:var(--ink2);max-width:64ch}
.intro-txt p+p{margin-top:1.1em}
.intro-txt p:first-child{color:var(--ink)}
.intro-txt p:first-child::first-letter{float:left;font-family:var(--f-head);font-weight:600;font-size:3.3em;line-height:1;padding:.1em .17em .06em;margin:.08em .16em 0 0;background:var(--cob);color:#fff;box-shadow:inset 0 0 0 3px var(--cob),inset 0 0 0 4px var(--tq)}
.points{list-style:none;padding:0;margin:84px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--grout);border-left:1px solid var(--grout);perspective:1400px}
.points li{display:flex;align-items:center;gap:16px;padding:24px 22px;background:var(--tile);border-right:1px solid var(--grout);border-bottom:1px solid var(--grout)}
.points .star{background:var(--tq-d)}
.points b{font-weight:600;color:var(--cob-dd);line-height:1.38;font-size:.98rem}

/* Hizmet karoları */
.svc-sec{background:var(--glaze2)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--grout);border-left:1px solid var(--grout);perspective:1600px}
.tile{position:relative;padding:46px 28px 38px;border-right:1px solid var(--grout);border-bottom:1px solid var(--grout);text-align:center;background:radial-gradient(circle at 0 0,var(--qc)),radial-gradient(circle at 100% 0,var(--qc)),radial-gradient(circle at 0 100%,var(--qc)),radial-gradient(circle at 100% 100%,var(--qc)),var(--tile)}
.tile .star{width:66px;height:66px;margin:0 auto 22px}
.tile .star svg{width:26px;height:26px}
.tile:hover .star{rotate:45deg;background:var(--tq-d)}
.tile:hover .star svg{rotate:-45deg}
.tile h3{font-size:1.38rem;line-height:1.2}
.tile h3 a{text-decoration:none}
.tile h3 a::after{content:"";position:absolute;inset:0}
.tile h3 a:hover{color:var(--cob)}
.tile p{margin-top:12px;font-size:.95rem;line-height:1.62;color:var(--ink2)}

/* İşlerimiz */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:14px}
.ph{position:relative;margin:0;overflow:hidden;padding:5px;background:var(--cob)}
.ph.big{grid-column:span 2;grid-row:span 2}
.ph img{width:100%;height:100%;object-fit:cover;transition:scale .9s cubic-bezier(.2,.8,.2,1)}
.ph:hover img{scale:1.05}
.ph figcaption,.reel figcaption{position:absolute;left:5px;right:5px;bottom:5px;padding:30px 14px 11px;background:linear-gradient(transparent,rgba(12,29,74,.88));color:#fff;font-size:.86rem;font-weight:500;line-height:1.4}
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.reel{position:relative;margin:0;aspect-ratio:4/5;padding:5px;overflow:hidden;background:var(--cob)}
.reel figcaption{bottom:auto;top:5px;padding:11px 14px 30px;background:linear-gradient(rgba(12,29,74,.88),transparent);pointer-events:none}

/* Süreç: adım adım döşenen bordür */
.steps-sec{background:var(--tile)}
.steps{list-style:none;padding:0;margin:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));perspective:1600px}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:38px;height:24px;background:var(--pat-a) 0 0/24px 24px repeat-x}
.steps::before{opacity:.16}
.steps::after{clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0)}
.steps li{position:relative;z-index:1;padding:0 14px;text-align:center}
.medal{display:grid;place-items:center;width:100px;height:100px;margin:0 auto;background:var(--tile);clip-path:var(--oct)}
.medal b{display:grid;place-items:center;width:84px;height:84px;background:var(--cob);color:#fff;clip-path:var(--oct);font-family:var(--f-head);font-size:2.1rem;font-weight:600;line-height:1}
.steps li:nth-child(even) .medal b{background:var(--tq-d)}
.steps h3{margin-top:22px;font-size:1.3rem;line-height:1.2}
.steps p{margin-top:10px;font-size:.95rem;line-height:1.62;color:var(--ink2)}

/* İlçe karoları */
.areas{background:var(--glaze2)}
.areas [hidden]{display:none!important}
.finder{max-width:470px;margin:0 auto 48px;text-align:center}
.find{display:none}
.js .find{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;background:var(--tile);border:1.5px solid var(--cob);border-radius:3px;transition:box-shadow .3s}
.find:focus-within{box-shadow:0 0 0 4px rgba(47,158,155,.3)}
.find svg{width:20px;height:20px;color:var(--cob)}
.find input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:1rem;color:var(--ink)}
.find input::placeholder{color:#6b7390}
.find-none{margin-top:14px;color:var(--ink2)}
.groups{display:grid;gap:56px}
.grp{--qa:var(--cob)}
.grp.g1{--qa:var(--green)}
.grp h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:18px;font-size:clamp(1.6rem,3vw,2.2rem)}
.grp h3 small{font-family:var(--f-body);font-size:.95rem;font-weight:600;color:var(--tq-d)}
.hoods{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));border-top:1px solid var(--grout);border-left:1px solid var(--grout)}
.hoods li{position:relative;border-right:1px solid var(--grout);border-bottom:1px solid var(--grout);background:radial-gradient(circle at 0 0,var(--qa) 0 5px,transparent 5.5px),radial-gradient(circle at 100% 0,var(--qa) 0 5px,transparent 5.5px),radial-gradient(circle at 0 100%,var(--qa) 0 5px,transparent 5.5px),radial-gradient(circle at 100% 100%,var(--qa) 0 5px,transparent 5.5px),var(--tile)}
.hoods li>*{display:flex;align-items:center;justify-content:center;min-height:62px;padding:12px 10px;text-align:center;font-weight:600;font-size:.98rem;line-height:1.25;color:var(--cob-dd);text-decoration:none;transition:background .3s,color .3s}
.hoods a:hover{background:var(--cob);color:#fff}
.g1 .hoods a:hover{background:var(--tq-d)}
.all{margin-top:44px;text-align:center}
.all .btn svg{width:18px;height:18px}

/* SSS */
.faq details{margin-bottom:10px;background:var(--tile);border:1px solid var(--grout);border-radius:3px;transition-property:opacity,translate,border-color,box-shadow}
.faq details[open]{border-color:var(--cob);box-shadow:inset 4px 0 0 var(--cob)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;font-family:var(--f-head);font-size:1.22rem;font-weight:600;line-height:1.3;color:var(--cob-dd)}
.pm{flex:none;display:grid;place-items:center;width:36px;height:36px;background:var(--cob);color:#fff;clip-path:var(--oct);transition:rotate .5s cubic-bezier(.2,.8,.2,1),background .3s}
.pm svg{width:16px;height:16px}
.faq details[open] .pm{rotate:135deg;background:var(--coral)}
.faq details p{padding:0 22px 22px;color:var(--ink2);animation:fadeup .5s}
@keyframes fadeup{from{opacity:0;transform:translateY(-6px)}}

/* Teklif */
.form-sec{overflow:hidden;background:var(--cob-d);color:#dde4f4;padding-top:134px}
.form-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:24px;background:var(--pat-a) 0 0/24px 24px repeat-x}
.form-tiles{position:absolute;inset:0;background:var(--pat-b-dk) 0 0/96px 96px;opacity:.09;pointer-events:none}
.form-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.form-txt .head-orn i{border-color:rgba(255,255,255,.55)}
.form-txt h2{color:#fff;font-size:clamp(2rem,4vw,3rem);line-height:1.1}
.form-txt p{margin-top:16px;color:#c9d3ee;max-width:470px}
.form-phone{display:inline-flex;align-items:center;gap:12px;margin-top:28px;font-family:var(--f-head);font-weight:600;font-size:clamp(1.7rem,4vw,2.5rem);color:#fff;text-decoration:none}
.form-phone svg{width:30px;height:30px;color:#64c9c5}
.form-phone:hover span{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.form-txt .form-hours{margin-top:6px;color:#9fdcd8;font-weight:600;font-size:.95rem}
.form-frame{padding:12px;background:var(--pat-a) 0 0/24px 24px}
.quote{padding:36px 32px;background:var(--tile);color:var(--ink)}
.quote h3{font-size:1.9rem;line-height:1.15}
.quote .sub{margin:8px 0 24px;color:var(--ink2);font-size:.94rem}
.field{display:block;margin-bottom:14px}
.field span{display:block;margin-bottom:6px;font-size:.88rem;font-weight:600;color:var(--cob-dd)}
.field input,.field select{width:100%;height:50px;padding:0 14px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #c5ccdb;border-radius:3px;transition:border-color .3s,box-shadow .3s}
.field input:focus,.field select:focus{outline:0;border-color:var(--cob);box-shadow:0 0 0 3px rgba(28,63,148,.18)}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.quote .btn-wa{width:100%;margin-top:6px}
.quote .note{margin-top:12px;text-align:center;font-size:.82rem;color:var(--ink2)}

/* Alt bilgi */
.foot{position:relative;background:var(--cob-dd);color:#c9d3ee;padding:96px 0 28px}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:24px;background:var(--pat-a) 0 0/24px 24px repeat-x;opacity:.9}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}
.foot .logo{color:#fff;margin-bottom:16px}
.foot .logo-mark{background:var(--tq-d)}
.foot p{font-size:.94rem;max-width:400px}
.foot h4{font-family:var(--f-head);font-size:1.25rem;font-weight:600;color:#fff;margin-bottom:14px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.95rem}
.foot a{text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot-pages{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.93rem}
.copy{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:.84rem;color:#a9b6d8}

.mbar{background:rgba(252,251,247,.97);border-top:3px solid var(--cob);box-shadow:0 -12px 30px -22px rgba(12,29,74,.6)}
.mbar .btn-call{background:var(--cob);color:#fff}

@media (max-width:1060px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel-in{gap:36px;padding:46px 40px}
  .steps li{padding:0 8px}
  .steps h3{font-size:1.15rem}
}
@media (max-width:900px){
  .top .nav{background:var(--tile);border-bottom:3px solid var(--cob);box-shadow:0 24px 40px -24px rgba(12,29,74,.5)}
  .top:has(.nav.open){background:var(--tile)}
  .nav a.link{border-bottom:1px solid var(--line)}
  .nav a.link::after{display:none}
  .sec{padding:80px 0}
  .head{margin-bottom:40px}
  .hero{padding:94px 0 40px}
  .panel{padding:10px}
  .panel-in{grid-template-columns:minmax(0,1fr);gap:30px;padding:34px 24px 30px;box-shadow:inset 0 0 0 1px var(--cob),inset 0 0 0 5px var(--tile),inset 0 0 0 6px var(--tq)}
  .hero-fig{width:100%;max-width:440px;margin:0 auto}
  .hero-img{aspect-ratio:4/3}
  .band-road{height:108px}
  .band-truck{width:160px;bottom:13px}
  .intro-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .intro-head{position:static}
  .points{margin-top:56px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px;gap:10px}
  .reels{grid-template-columns:minmax(0,1fr);max-width:400px;margin-left:auto;margin-right:auto;gap:10px;margin-top:10px}
  .steps{grid-template-columns:minmax(0,1fr);gap:30px}
  .steps::before,.steps::after{left:26px;right:auto;top:0;bottom:0;width:24px;height:auto;background-repeat:repeat-y}
  .steps::after{clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0)}
  .steps li{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:18px;align-items:start;padding:0;text-align:left}
  .medal{grid-row:span 2;width:76px;height:76px;margin:0}
  .medal b{width:64px;height:64px;font-size:1.7rem}
  .steps h3{margin-top:12px;font-size:1.25rem}
  .steps p{grid-column:2;margin-top:6px}
  .form-sec{padding-top:104px}
  .form-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .quote{padding:28px 20px}
  .foot{padding-top:76px}
  .foot-in{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:560px){
  .tiles,.points{grid-template-columns:minmax(0,1fr)}
  .tile{padding:36px 22px 32px}
  .hoods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hoods li>*{min-height:56px;font-size:.94rem;padding:10px 6px}
  .cta .btn{flex:1 1 100%}
  .row2{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-auto-rows:130px}
  .faq summary{font-size:1.08rem;padding:16px 16px}
  .faq details p{padding:0 16px 18px}
  .form-frame{padding:8px}
  .lead{font-size:1.02rem}
  .offer{gap:8px 18px;font-size:.9rem}
}
@media (max-width:420px){
  .top .logo{font-size:.95rem;gap:8px}
  .logo-mark{width:34px;height:34px}
  .panel-in{padding:28px 18px 24px}
}