/* ==========================================================================
   Berkant Oto Cam — ortak stil dosyası (index + 3 hizmet sayfası + 404 kullanır)
   1) Tailwind CSS — cdn.tailwindcss.com'un ürettiği çıktı, statik olarak alındı
   2) Projeye özel stiller (glassmorphism, reveal, akordiyon, ba-slider…)

   ⚠️ HTML'e YENİ bir Tailwind sınıfı eklersen 1. bölüm güncellenmeli.
   Adımlar: _araclar/OKU-css.md  (tarama sayfası tüm sayfaları birleştirir)
   ========================================================================== */

/* ---------- 1) TAILWIND ---------- */
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter, system-ui, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.inset-x-0{left:0px;right:0px}.-left-1\/3{left:-33.333333%}.-right-8{right:-2rem}.-top-1\/4{top:-25%}.-top-8{top:-2rem}.bottom-0{bottom:0px}.bottom-5{bottom:1.25rem}.bottom-6{bottom:1.5rem}.left-0{left:0px}.left-1\/2{left:50%}.left-4{left:1rem}.left-5{left:1.25rem}.right-4{right:1rem}.right-5{right:1.25rem}.top-0{top:0px}.top-4{top:1rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mt-1{margin-top:0.25rem}.mt-1\.5{margin-top:0.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:0.5rem}.mt-2\.5{margin-top:0.625rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-9{margin-top:2.25rem}.mb-6{margin-bottom:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[16\/10\]{aspect-ratio:16/10}.aspect-\[16\/9\]{aspect-ratio:16/9}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-14{height:3.5rem}.h-28{height:7rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.h-\[150\%\]{height:150%}.h-\[16\%\]{height:16%}.h-full{height:100%}.h-px{height:1px}.min-h-\[100svh\]{min-height:100svh}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-14{width:3.5rem}.w-28{width:7rem}.w-4{width:1rem}.w-40{width:10rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-9{width:2.25rem}.w-\[1500px\]{width:1500px}.w-full{width:100%}.w-px{width:1px}.min-w-\[620px\]{min-width:620px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-12{--tw-rotate:12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize-y{resize:vertical}.appearance-none{-webkit-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.gap-1\.5{gap:0.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.gap-2\.5{gap:0.625rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-\[1px\]{gap:1px}.gap-\[2px\]{gap:2px}.gap-x-8{column-gap:2rem}.gap-y-3{row-gap:0.75rem}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-none{border-radius:0px}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-brand-500\/20{border-color:rgb(56 189 248 / 0.2)}.border-red-500\/30{border-color:rgb(239 68 68 / 0.3)}.border-white\/10{border-color:rgb(255 255 255 / 0.1)}.border-white\/5{border-color:rgb(255 255 255 / 0.05)}.bg-\[\#080d18\]{--tw-bg-opacity:1;background-color:rgb(8 13 24 / var(--tw-bg-opacity, 1))}.bg-brand-500{--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity, 1))}.bg-brand-500\/10{background-color:rgb(56 189 248 / 0.1)}.bg-brand-500\/15{background-color:rgb(56 189 248 / 0.15)}.bg-carbon\/50{background-color:rgb(15 23 42 / 0.5)}.bg-carbon\/60{background-color:rgb(15 23 42 / 0.6)}.bg-carbon\/90{background-color:rgb(15 23 42 / 0.9)}.bg-carbon\/95{background-color:rgb(15 23 42 / 0.95)}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-500\/15{background-color:rgb(34 197 94 / 0.15)}.bg-ink{--tw-bg-opacity:1;background-color:rgb(8 13 24 / var(--tw-bg-opacity, 1))}.bg-ink\/60{background-color:rgb(8 13 24 / 0.6)}.bg-red-500\/10{background-color:rgb(239 68 68 / 0.1)}.bg-royal-500{--tw-bg-opacity:1;background-color:rgb(6 182 212 / var(--tw-bg-opacity, 1))}.bg-royal-500\/10{background-color:rgb(6 182 212 / 0.1)}.bg-royal-500\/15{background-color:rgb(6 182 212 / 0.15)}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}.bg-\[radial-gradient\(1100px_600px_at_72\%_18\%\2c rgba\(6\2c 182\2c 212\2c \.22\)\2c transparent_62\%\)\]{background-image:radial-gradient(1100px 600px at 72% 18%,rgba(6,182,212,.22),transparent 62%)}.bg-\[radial-gradient\(700px_400px_at_10\%_50\%\2c rgba\(56\2c 189\2c 248\2c \.1\)\2c transparent_60\%\)\]{background-image:radial-gradient(700px 400px at 10% 50%,rgba(56,189,248,.1),transparent 60%)}.bg-\[radial-gradient\(700px_400px_at_20\%_10\%\2c rgba\(56\2c 189\2c 248\2c \.1\)\2c transparent_60\%\)\]{background-image:radial-gradient(700px 400px at 20% 10%,rgba(56,189,248,.1),transparent 60%)}.bg-\[radial-gradient\(760px_420px_at_88\%_25\%\2c rgba\(6\2c 182\2c 212\2c \.13\)\2c transparent_62\%\)\]{background-image:radial-gradient(760px 420px at 88% 25%,rgba(6,182,212,.13),transparent 62%)}.bg-\[radial-gradient\(800px_420px_at_85\%_0\%\2c rgba\(6\2c 182\2c 212\2c \.12\)\2c transparent_60\%\)\]{background-image:radial-gradient(800px 420px at 85% 0%,rgba(6,182,212,.12),transparent 60%)}.bg-\[radial-gradient\(800px_500px_at_75\%_30\%\2c rgba\(6\2c 182\2c 212\2c \.12\)\2c transparent_62\%\)\]{background-image:radial-gradient(800px 500px at 75% 30%,rgba(6,182,212,.12),transparent 62%)}.bg-\[radial-gradient\(900px_520px_at_18\%_82\%\2c rgba\(56\2c 189\2c 248\2c \.18\)\2c transparent_60\%\)\]{background-image:radial-gradient(900px 520px at 18% 82%,rgba(56,189,248,.18),transparent 60%)}.bg-\[url\(\'data\:image\/svg\+xml\;utf8\2c \%3Csvg\%20xmlns\%3D\%22http\%3A\/\/www\.w3\.org\/2000\/svg\%22\%20viewBox\%3D\%220\%200\%2024\%2024\%22\%20fill\%3D\%22none\%22\%20stroke\%3D\%22\%2394a3b8\%22\%20stroke-width\%3D\%222\%22\%3E\%3Cpath\%20d\%3D\%22M6\%209l6\%206\%206-6\%22\/\%3E\%3C\/svg\%3E\'\)\]{background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E')}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.bg-\[radial-gradient\(700px_420px_at_10\%_90\%\2c rgba\(56\2c 189\2c 248\2c \.16\)\2c transparent_60\%\)\]{background-image:radial-gradient(700px 420px at 10% 90%,rgba(56,189,248,.16),transparent 60%)}.bg-\[radial-gradient\(900px_520px_at_78\%_10\%\2c rgba\(6\2c 182\2c 212\2c \.20\)\2c transparent_62\%\)\]{background-image:radial-gradient(900px 520px at 78% 10%,rgba(6,182,212,.20),transparent 62%)}.from-brand-300{--tw-gradient-from:#7dd3fc var(--tw-gradient-from-position);--tw-gradient-to:rgb(125 211 252 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-brand-500\/10{--tw-gradient-from:rgb(56 189 248 / 0.1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(56 189 248 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-brand-500\/60{--tw-gradient-from:rgb(56 189 248 / 0.6) var(--tw-gradient-from-position);--tw-gradient-to:rgb(56 189 248 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-carbon{--tw-gradient-from:#0f172a var(--tw-gradient-from-position);--tw-gradient-to:rgb(15 23 42 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-ink{--tw-gradient-from:#080d18 var(--tw-gradient-from-position);--tw-gradient-to:rgb(8 13 24 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-white\/15{--tw-gradient-from:rgb(255 255 255 / 0.15) var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-brand-500{--tw-gradient-to:rgb(56 189 248 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #38bdf8 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-brand-500\/60{--tw-gradient-to:rgb(56 189 248 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(56 189 248 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-carbon\/40{--tw-gradient-to:rgb(15 23 42 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(15 23 42 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-ink\/80{--tw-gradient-to:rgb(8 13 24 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(8 13 24 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:rgb(0 0 0 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white\/10{--tw-gradient-to:rgb(255 255 255 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-brand-600{--tw-gradient-to:#0ea5e9 var(--tw-gradient-to-position)}.to-royal-500\/10{--tw-gradient-to:rgb(6 182 212 / 0.1) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-white\/5{--tw-gradient-to:rgb(255 255 255 / 0.05) var(--tw-gradient-to-position)}.bg-\[length\:20px_20px\]{background-size:20px 20px}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-\[right_\.9rem_center\]{background-position:right .9rem center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-3\.5{padding-left:0.875rem;padding-right:0.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-7{padding-top:1.75rem;padding-bottom:1.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-1{padding-bottom:0.25rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-5{padding-bottom:1.25rem}.pr-11{padding-right:2.75rem}.pr-20{padding-right:5rem}.pt-16{padding-top:4rem}.pt-28{padding-top:7rem}.pt-4{padding-top:1rem}.pt-32{padding-top:8rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.font-display{font-family:Montserrat, Inter, sans-serif}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[\.65rem\]{font-size:.65rem}.text-\[\.68rem\]{font-size:.68rem}.text-\[\.72rem\]{font-size:.72rem}.text-\[\.74rem\]{font-size:.74rem}.text-\[\.76rem\]{font-size:.76rem}.text-\[\.78rem\]{font-size:.78rem}.text-\[\.7rem\]{font-size:.7rem}.text-\[\.82rem\]{font-size:.82rem}.text-\[\.84rem\]{font-size:.84rem}.text-\[\.85rem\]{font-size:.85rem}.text-\[\.88rem\]{font-size:.88rem}.text-\[\.8rem\]{font-size:.8rem}.text-\[\.92rem\]{font-size:.92rem}.text-\[\.95rem\]{font-size:.95rem}.text-\[\.9rem\]{font-size:.9rem}.text-\[1\.02rem\]{font-size:1.02rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[2\.1rem\]{font-size:2.1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[\.98rem\]{font-size:.98rem}.text-\[2rem\]{font-size:2rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.leading-\[1\.08\]{line-height:1.08}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.leading-\[1\.1\]{line-height:1.1}.tracking-\[\.14em\]{letter-spacing:.14em}.tracking-\[\.16em\]{letter-spacing:.16em}.tracking-\[\.18em\]{letter-spacing:.18em}.tracking-\[\.22em\]{letter-spacing:.22em}.tracking-tight{letter-spacing:-0.025em}.tracking-wider{letter-spacing:0.05em}.text-brand-400{--tw-text-opacity:1;color:rgb(92 201 251 / var(--tw-text-opacity, 1))}.text-brand-500{--tw-text-opacity:1;color:rgb(56 189 248 / var(--tw-text-opacity, 1))}.text-carbon{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.text-royal-300{--tw-text-opacity:1;color:rgb(103 232 249 / var(--tw-text-opacity, 1))}.text-royal-400{--tw-text-opacity:1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline-offset-4{text-underline-offset:4px}.placeholder-slate-500::placeholder{--tw-placeholder-opacity:1;color:rgb(100 116 139 / var(--tw-placeholder-opacity, 1))}.opacity-\[\.16\]{opacity:.16}.opacity-\[\.5\]{opacity:.5}.opacity-\[\.12\]{opacity:.12}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-card{--tw-shadow:0 22px 60px -22px rgba(0,0,0,.85);--tw-shadow-colored:0 22px 60px -22px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-glow{--tw-shadow:0 0 40px -8px rgba(56,189,248,.55);--tw-shadow-colored:0 0 40px -8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.ring-\[14px\]{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(14px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.ring-brand-500\/25{--tw-ring-color:rgb(56 189 248 / 0.25)}.ring-carbon\/95{--tw-ring-color:rgb(15 23 42 / 0.95)}.ring-green-500\/25{--tw-ring-color:rgb(34 197 94 / 0.25)}.ring-royal-500\/25{--tw-ring-color:rgb(6 182 212 / 0.25)}.ring-white\/10{--tw-ring-color:rgb(255 255 255 / 0.1)}.ring-white\/15{--tw-ring-color:rgb(255 255 255 / 0.15)}.blur-2xl{--tw-blur:blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:inset-0::after{content:var(--tw-content);inset:0px}.last\:border-0:last-child{border-width:0px}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-brand-500\/50:hover{border-color:rgb(56 189 248 / 0.5)}.hover\:border-brand-500\/60:hover{border-color:rgb(56 189 248 / 0.6)}.hover\:border-green-500\/50:hover{border-color:rgb(34 197 94 / 0.5)}.hover\:border-pink-500\/50:hover{border-color:rgb(236 72 153 / 0.5)}.hover\:border-royal-500\/50:hover{border-color:rgb(6 182 212 / 0.5)}.hover\:bg-brand-400:hover{--tw-bg-opacity:1;background-color:rgb(92 201 251 / var(--tw-bg-opacity, 1))}.hover\:bg-brand-500:hover{--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity, 1))}.hover\:bg-brand-500\/10:hover{background-color:rgb(56 189 248 / 0.1)}.hover\:bg-green-400:hover{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1)}.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05)}.hover\:text-brand-400:hover{--tw-text-opacity:1;color:rgb(92 201 251 / var(--tw-text-opacity, 1))}.hover\:text-carbon:hover{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\:text-green-400:hover{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.hover\:text-pink-400:hover{--tw-text-opacity:1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.hover\:text-royal-400:hover{--tw-text-opacity:1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:ring-brand-500:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248 / var(--tw-ring-opacity, 1))}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:fixed:focus{position:fixed}.focus\:left-4:focus{left:1rem}.focus\:top-4:focus{top:1rem}.focus\:z-\[60\]:focus{z-index:60}.focus\:rounded-xl:focus{border-radius:0.75rem}.focus\:border-brand-500:focus{--tw-border-opacity:1;border-color:rgb(56 189 248 / var(--tw-border-opacity, 1))}.focus\:bg-brand-500:focus{--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity, 1))}.focus\:px-5:focus{padding-left:1.25rem;padding-right:1.25rem}.focus\:py-3:focus{padding-top:0.75rem;padding-bottom:0.75rem}.focus\:font-display:focus{font-family:Montserrat, Inter, sans-serif}.focus\:text-sm:focus{font-size:0.875rem;line-height:1.25rem}.focus\:font-bold:focus{font-weight:700}.focus\:text-carbon:focus{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-brand-500\/25:focus{--tw-ring-color:rgb(56 189 248 / 0.25)}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-brand-500\/25{background-color:rgb(56 189 248 / 0.25)}.group:hover .group-hover\:bg-royal-500\/25{background-color:rgb(6 182 212 / 0.25)}.group:hover .group-hover\:text-brand-400{--tw-text-opacity:1;color:rgb(92 201 251 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.sm\:col-span-2{grid-column:span 2 / span 2}.sm\:block{display:block}.sm\:inline-flex{display:inline-flex}.sm\:hidden{display:none}.sm\:h-16{height:4rem}.sm\:h-8{height:2rem}.sm\:w-16{width:4rem}.sm\:w-8{width:2rem}.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:p-8{padding:2rem}.sm\:p-9{padding:2.25rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-24{padding-top:6rem;padding-bottom:6rem}.sm\:py-28{padding-top:7rem;padding-bottom:7rem}.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:pt-32{padding-top:8rem}.sm\:pb-20{padding-bottom:5rem}.sm\:pt-36{padding-top:9rem}.sm\:text-left{text-align:left}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-\[2\.4rem\]{font-size:2.4rem}.sm\:text-\[2\.6rem\]{font-size:2.6rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-\[2\.9rem\]{font-size:2.9rem}.sm\:opacity-\[\.62\]{opacity:.62}}@media (min-width: 768px){.md\:col-span-2{grid-column:span 2 / span 2}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:items-center{align-items:center}.lg\:gap-16{gap:4rem}.lg\:gap-8{gap:2rem}.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}.lg\:text-\[3\.85rem\]{font-size:3.85rem}}

/* ---------- 2) PROJEYE ÖZEL ---------- */
:root{
  --vurgu:#38bdf8;
  --royal:#06b6d4;
}
html{ -webkit-tap-highlight-color: transparent; }
body{ background:#080d18; overflow-x:hidden; }

/* ---------- Cam efekti (glassmorphism) ---------- */
.glass{
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.glass-strong{
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* ---------- Başlık satır dengesi ----------
   Uzun başlıklarda son satırda tek kelime kalmasını önler.
   Desteklemeyen tarayıcı sessizce yok sayar. */
h1, h2{ text-wrap: balance; }

/* ---------- Bölüm başlığı dili ---------- */
.sec-label{ letter-spacing:.24em; font-size:.72rem; font-weight:700; text-transform:uppercase; color:var(--vurgu); display:inline-flex; align-items:center; gap:.7rem; }
.sec-label::before{ content:''; width:34px; height:2px; background:linear-gradient(90deg,var(--vurgu),transparent); display:block; }

/* ---------- Kart hover ---------- */
.lift{ transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .45s; }
.lift:hover{ transform: translateY(-10px); border-color: rgba(56,189,248,.45); box-shadow: 0 28px 60px -24px rgba(56,189,248,.28), 0 18px 50px -20px rgba(0,0,0,.9); }

/* ---------- Buton parlaması ---------- */
.btn-shine{ position:relative; overflow:hidden; }
.btn-shine::after{
  content:''; position:absolute; inset:0; transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:transform .75s ease;
}
.btn-shine:hover::after{ transform:translateX(120%) skewX(-18deg); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Hero fotoğrafı ----------
   Opaklık burada; Tailwind'i yeniden üretmeden ayarlanabilsin diye.
   NOT: Eskiden mix-blend-mode:luminosity vardı — tam ekran bir görselde
   tarayıcıyı pahalı bir katman birleştirmesine zorluyordu. Aynı görüntü
   artık görselin kendisine işlendi (doygunluk giderilip lacivert tonlandı),
   karışım modu kaldırıldı. Hero fotoğrafı değişirse _araclar/OKU-css.md'ye bak. */
.hero-foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.75;
}
@media (max-width:640px){ .hero-foto{ opacity:.55; object-position:58% center; } }

/* ---------- Garaj LED şeritleri ----------
   Işıklar fotoğrafa gömülü; doğrudan canlandırılamıyor. İki maskeli katman:
   .hero-isik      → şeritlerin kendisi (keskin maske)
   .hero-isik-hale → ışığın duvara/tavana yayılımı (çok bulanık maske)
   İkisi de karartma perdesinin ÜSTÜNDE duruyor — altında kalınca perde
   ışığı söndürüyor ve efekt görünmüyordu.
   Maskeler fotoğrafın object-fit:cover kırpmasını izlesin diye mask-size:cover. */
.hero-isik, .hero-isik-hale{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  -webkit-mask-size:cover;       mask-size:cover;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  will-change: opacity;
}
.hero-isik{
  background:#ffffff;
  -webkit-mask-image:url('../images/isik-maske.png'); mask-image:url('../images/isik-maske.png');
}
.hero-isik-hale{
  background:#9fd4ff;
  -webkit-mask-image:url('../images/isik-hale.png'); mask-image:url('../images/isik-hale.png');
}
.hero-isik.acik     { animation: isikSerit 7s ease-in-out infinite; }
.hero-isik-hale.acik{ animation: isikHale  7s ease-in-out infinite; }

@keyframes isikSerit{
  0%    { opacity:.05 }
  6%    { opacity:.95 }
  6.8%  { opacity:.10 }   /* kısa titreme */
  7.8%  { opacity:1    }
  30%   { opacity:.45 }
  48%   { opacity:1    }
  49%   { opacity:.12 }   /* ikinci titreme */
  50%   { opacity:.92 }
  72%   { opacity:.18 }
  88%   { opacity:.85 }
  89%   { opacity:.14 }   /* üçüncü */
  90%   { opacity:.78 }
  100%  { opacity:.05 }
}
@keyframes isikHale{
  0%    { opacity:.02 }
  6%    { opacity:.42 }
  6.8%  { opacity:.05 }
  7.8%  { opacity:.46 }
  30%   { opacity:.18 }
  48%   { opacity:.48 }
  49%   { opacity:.06 }
  50%   { opacity:.42 }
  72%   { opacity:.08 }
  88%   { opacity:.38 }
  89%   { opacity:.06 }
  90%   { opacity:.34 }
  100%  { opacity:.02 }
}

/* ---------- Hero: gerçek fotoğraf konunca açılan sol karartma ----------
   hero.jpg aydınlık bir kare olabilir; ortadaki başlık okunaklı kalsın diye
   merkezde yoğunlaşan bir perde. Fotoğraf yoksa görünmez (opacity 0). */
.hero-karartma{
  position:absolute; inset:0; opacity:0; transition:opacity .7s ease;
  background:
    radial-gradient(760px 440px at 50% 46%, rgba(8,13,24,.62) 0%,
                    rgba(8,13,24,.34) 52%, transparent 100%),
    linear-gradient(180deg, rgba(8,13,24,.45) 0%, rgba(8,13,24,.10) 40%,
                    rgba(8,13,24,.55) 100%);
}
.hero-karartma.acik{ opacity:1; }

/* ---------- Hero ışık animasyonu ---------- */
@keyframes sweep{ 0%{transform:translateX(-60%) rotate(8deg); opacity:0} 45%{opacity:.55} 100%{transform:translateX(160%) rotate(8deg); opacity:0} }
.sweep{ animation: sweep 7s linear infinite; }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.floaty{ animation: floaty 6s ease-in-out infinite; }
@keyframes pulseRing{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)} 70%{box-shadow:0 0 0 18px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
.pulse-ring{ animation: pulseRing 2.4s infinite; }

/* ---------- Metalik ayraç ---------- */
.hairline{ height:1px; background:linear-gradient(90deg,transparent,rgba(148,163,184,.35),transparent); }

/* ---------- Akordiyon ---------- */
.acc-body{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,1,.3,1); }
.acc.open .acc-body{ max-height:460px; }
.acc.open .acc-ico{ transform:rotate(45deg); color:var(--vurgu); }
.acc-ico{ transition:transform .4s, color .4s; }

/* ---------- Yorum kaydırıcı ---------- */
.rail{ display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:.5rem; }
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:center; flex:0 0 clamp(280px, 82vw, 400px); }

/* ---------- Öncesi / Sonrası ---------- */
.ba-wrap{ position:relative; overflow:hidden; border-radius:1.25rem; cursor:ew-resize;
  user-select:none; -webkit-user-select:none; touch-action:pan-y; }
/* Tarayıcının kendi "resmi sürükle" davranışı karşılaştırmayı bozuyordu:
   fare basılı sürüklenince yarı saydam bir kopya uçuyordu. Görseller olayları
   hiç almasın, sarmalayıcı alsın. */
.ba-wrap img, .ba-wrap svg{ pointer-events:none; -webkit-user-drag:none; user-drag:none; }
.ba-after{ position:absolute; inset:0; clip-path: inset(0 0 0 50%); }
/* Filmli kare, filmsiz karenin üstünde opaklıkla karışıyor. İki fotoğraf
   yalnız cam bölgesinde farklı olduğu için sadece camlar koyulaşıyor. */
.ba-film{ opacity:1; transition: opacity .55s ease; }
/* Film koyuluğu seçim butonları */
.seviye-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1.05rem; border-radius:.85rem;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
  font-family:Montserrat,Inter,sans-serif; font-weight:700; font-size:.82rem;
  color:#cbd5e1; cursor:pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.seviye-btn span{ font-weight:800; color:#94a3b8; transition:color .25s; }
.seviye-btn:hover{ border-color:rgba(56,189,248,.5); color:#fff; transform:translateY(-1px); }
.seviye-btn.aktif{
  background:var(--vurgu); border-color:var(--vurgu); color:#0f172a;
  box-shadow:0 0 22px -6px rgba(56,189,248,.75);
}
.seviye-btn.aktif span{ color:#0f172a; opacity:.75; }
.ba-handle{ position:absolute; top:0; bottom:0; width:3px; background:linear-gradient(180deg,transparent,var(--vurgu),transparent); left:50%; transform:translateX(-50%); pointer-events:none; }
.ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:99px; background:rgba(15,23,42,.8); border:2px solid var(--vurgu); display:grid; place-items:center; pointer-events:none; backdrop-filter:blur(6px); }

/* ---------- Tonlama simülatörü ---------- */
.tint-layer{ transition: background-color .55s ease; }
.ton-btn{ transition: background-color .25s, color .25s, border-color .25s; }
.ton-btn.aktif{ background:var(--vurgu); border-color:var(--vurgu); color:#0f172a; box-shadow:0 0 22px -6px rgba(56,189,248,.7); }

/* ---------- Mobil menü ---------- */
#mobilMenu{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,1,.3,1); }
#mobilMenu.open{ max-height:520px; }

/* ---------- Seçim rengi ---------- */
::selection{ background:rgba(56,189,248,.35); color:#fff; }

/* ==========================================================================
   MOBİL DÜZEN (≤639px)
   Tamamı bu medya sorgusunun içinde — 640px ve üstü hiç etkilenmez.
   Amaç: hero'yu tek ekrana yaklaştırmak, tekrar eden aksiyonları teke
   indirmek, dikey boşlukları kısmak.
   ========================================================================== */
@media (max-width: 639px){

  body{ padding-bottom: 76px; }

  /* --- Header: telefon ikonu alt çubukla aynı işi yapıyordu, kaldırıldı --- */
  .bas-tel{ display:none !important; }
  #barIc{ padding-left:.85rem; padding-right:.85rem; padding-top:.6rem; padding-bottom:.6rem; }

  /* --- Sabit WhatsApp balonu: alt çubukta WhatsApp olduğu için gereksiz --- */
  .wa-fab{ display:none !important; }

  /* --- Alt çubuk: iki eşit aksiyon, balon için yer ayırmaya gerek yok --- */
  .alt-cubuk > div{ padding-right:.75rem !important; }

  /* --- Hero ---
     Rozetler ayrı şeride taşındı; hero artık sadece başlık + tek cümle.
     Gerçek bir açılış ekranı gibi dursun diye ekranın büyük kısmını kaplıyor,
     içerik dikeyde ortalı, altta kaydırma ipucu var. */
  #ust{ min-height:86svh !important; padding-top:7rem !important; padding-bottom:4.5rem !important; }
  #ust h1{ font-size:2.05rem !important; line-height:1.1 !important; letter-spacing:-.9px; }
  #ust h1 span{ display:block !important; }
  #ust > div > div > p{ font-size:1rem !important; line-height:1.55 !important; margin-top:1.1rem !important;
                        max-width:30ch; text-wrap:pretty; }
  .hero-detay{ display:none; }                 /* ikinci cümle mobilde gizli (masaüstünde ve SEO'da duruyor) */
  .hero-kaydir{ display:flex !important; bottom:1.4rem !important; }
  .hero-foto{ opacity:.6 !important; }
  .hero-isik, .hero-isik-hale{ -webkit-mask-position:58% center; mask-position:58% center; }

  /* --- Güven şeridi: üç dar sütun, ikonsuz, sade --- */
  .guven-serit{ padding-top:1.1rem !important; padding-bottom:1.1rem !important; }
  .guven-serit .grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:.45rem !important; }
  .guven-kart{ flex-direction:column !important; gap:.15rem !important; padding:.65rem .35rem !important; text-align:center; }
  .guven-kart svg{ display:none !important; }
  .guven-kart > div{ line-height:1.25 !important; }
  .guven-kart .text-\[\.82rem\]{ font-size:.7rem !important; }
  .guven-kart .text-\[\.72rem\]{ font-size:.6rem !important; }

  /* --- Hero CTA: alt çubukta zaten var, burada kalabalık yapıyordu --- */
  .hero-cta{ display:none !important; }

  /* --- Google rozeti: yıldızlar dar ekranda yer kaplıyor, puan yazısı yeterli --- */
  .puan-yildiz{ display:none !important; }
  #ust .grid.grid-cols-1 > div:first-child{ justify-content:center; }

  /* --- Bölüm boşlukları ve başlıklar --- */
  section{ padding-top:3rem !important; padding-bottom:3rem !important; }
  #ust{ padding-top:6.5rem !important; }   /* hero'yu geri al */
  section h2{ font-size:1.6rem !important; line-height:1.2 !important; }
  .sec-label{ font-size:.66rem; letter-spacing:.2em; }
  .sec-label::before{ width:22px; }

  /* --- Kartlar --- */
  #hizmetler article{ padding:1.15rem !important; }
  #hizmetler article h3{ margin-top:.9rem !important; font-size:1.02rem !important; }
  #neden-biz .glass{ padding:1.15rem !important; }

  /* --- Öncesi/sonrası --- */
  .seviye-btn{ padding:.5rem .8rem; font-size:.76rem; border-radius:.7rem; }

  /* --- Ton simülatörü ---
     Bilgi kutusu görselin üstünde duruyordu ve dar ekranda manzaranın
     yarısını kapatıyordu. Mobilde kutu görselin ALTINA alınıyor, kare de
     daha dik bir orana geçip büyüyor. Masaüstü etkilenmiyor. */
  .sim-kare{ aspect-ratio: 4 / 3 !important; }
  .sim-bilgi{
    position:static !important; inset:auto !important;
    margin:.8rem .85rem .2rem !important;
  }
  .sim-bilgi .hidden.shrink-0{ display:block !important; text-align:left !important; margin-top:.6rem; }
  .sim-bilgi .hidden.shrink-0 .text-\[\.65rem\]{ display:inline; }
  .sim-bilgi .hidden.shrink-0 p{ display:inline; margin-right:.35rem; }
  #tonAciklama{ font-size:.78rem !important; }

  /* --- Yorum kartları --- */
  .rail > *{ flex-basis:86vw; }

  /* --- Künye: mobilde uzun paragraf yoruyor --- */
  .kunye p{ font-size:.84rem !important; line-height:1.65 !important; }
  .kunye dl{ gap:.75rem !important; }

  /* --- Form --- */
  #teklifForm input, #teklifForm select, #teklifForm textarea{ font-size:16px !important; }
}

/* ---------- Scrollbar ---------- */
@media (min-width:1024px){
  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:#0b1120; }
  ::-webkit-scrollbar-thumb{ background:#27344b; border-radius:99px; }
  ::-webkit-scrollbar-thumb:hover{ background:#38bdf8; }
}
@media (prefers-reduced-motion: reduce){
  .sweep,.floaty,.pulse-ring,.hero-isik,.hero-isik-hale{ animation:none !important; }
  .hero-isik.acik{ opacity:.55 !important; }
  .hero-isik-hale.acik{ opacity:.22 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   AÇILIŞ ANİMASYONU (#intro)
   Oturum başına bir kez. <head>'deki küçük script html'e .intro
   ekler; ekleyemezse (tekrar ziyaret, bot, azaltılmış hareket)
   bu katman hiç görünmez. Tıkla / tuşa bas = atla.
   ============================================================ */
.intro-ekran{ display:none; }
html.intro{ overflow:hidden; }
html.intro .intro-ekran{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 80% at 50% 40%, #111c33 0%, #080d18 60%, #05080f 100%);
  transition:transform .75s cubic-bezier(.7,0,.2,1);
  cursor:pointer;
}
html.intro-bitti .intro-ekran{ transform:translateY(100%); }
.intro-ekran::after{ /* inen camın üst kenarındaki parlak çizgi */
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, #7dd3fc, transparent);
  opacity:0; transition:opacity .2s;
}
html.intro-bitti .intro-ekran::after{ opacity:1; }
.intro-ic{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:0 16px; text-align:center; }
.intro-cam{ width:min(300px, 72vw); height:auto; overflow:visible; filter:drop-shadow(0 18px 40px rgb(56 189 248 / .18)); }
.intro-cerceve{ stroke-dasharray:1; stroke-dashoffset:1; animation:introCiz 1s cubic-bezier(.6,0,.3,1) .1s forwards; }
.intro-zemin{ opacity:0; animation:introBelir .5s ease .6s forwards; }
.intro-film{ transform-box:fill-box; transform:translateY(-101%); animation:introFilm .65s cubic-bezier(.65,0,.35,1) .8s forwards; }
.intro-isik{ transform-box:fill-box; transform:translateX(0); animation:introIsik .7s ease-in-out 1.35s forwards; }
.intro-yazi{ font-family:Montserrat,system-ui,sans-serif; font-weight:900; font-size:clamp(26px,7vw,40px); letter-spacing:.14em; color:#f8fafc; line-height:1; opacity:0; transform:translateY(10px); animation:introYazi .6s ease .95s forwards; }
.intro-yazi span{ color:#38bdf8; }
.intro-alt{ font-family:Inter,system-ui,sans-serif; font-size:11px; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:#94a3b8; margin-top:-10px; opacity:0; animation:introBelir .6s ease 1.25s forwards; }
.intro-bar{ width:140px; height:2px; border-radius:2px; background:rgb(148 163 184 / .18); overflow:hidden; }
.intro-bar i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#06b6d4,#38bdf8,#7dd3fc); transform:scaleX(0); transform-origin:left; animation:introBar 2.2s cubic-bezier(.4,0,.2,1) forwards; }
.intro-gec{ position:absolute; bottom:max(24px, env(safe-area-inset-bottom)); left:0; right:0; text-align:center; font:500 11px/1 Inter,system-ui,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#475569; opacity:0; animation:introBelir .5s ease 1s forwards; }
@keyframes introCiz{ to{ stroke-dashoffset:0; } }
@keyframes introBelir{ to{ opacity:1; } }
@keyframes introFilm{ to{ transform:translateY(0); } }
@keyframes introIsik{ to{ transform:translateX(520px); } }
@keyframes introYazi{ to{ opacity:1; transform:none; } }
@keyframes introBar{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){ .intro-ekran{ display:none !important; } }