/*
 * KOD REHBERİ — assets/css/agency.css
 * Çatalca Web Tasarım sitesinin marka tasarımı ve sayfa bileşenleri.
 * Genel okuma sırası ve örnekler: proje kökündeki KOD-OKUMA-REHBERI.md.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
/* Tema değişkenleri: var(--...) kullanan kurallar bu ortak değerleri okur. */
:root {
    --ink:#172b36;
    --muted:#667078;
    --paper:#f9faf6;
    --lime:#d9f46e;
    --line:#e3e6df;
    --white:#fff;
    --radius:18px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:100px
}

body {
    margin:0;
    color:var(--ink);
    background:var(--paper);
    font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:15px;
    line-height:1.7
}

a {
    color:inherit;
    text-decoration:none
}

button,input,select,textarea {
    font:inherit
}

button,a {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid #6c861f;
    outline-offset:5px
}

img {
    max-width:100%;
    display:block
}

h1,h2,h3,p {
    margin:0
}

h1,h2,h3 {
    line-height:1.16;
    letter-spacing:-.05em
}

h2 {
    font-size:clamp(30px,3.2vw,46px);
    font-weight:750
}

h3 {
    font-size:23px;
    font-weight:750
}

p {
    color:var(--muted)
}

.container {
    width:min(1240px,calc(100% - 96px));
    margin:auto
}

.section {
    padding:100px 0
}

.eyebrow {
    font-size:10px;
    font-weight:800;
    letter-spacing:.18em;
    display:block;
    margin-bottom:22px
}

.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#88a834;
    margin-right:8px;
    box-shadow:0 0 0 4px #b9d36522
}

.skip {
    position:fixed;
    top:-100px;
    left:20px;
    z-index:100;
    background:var(--lime);
    padding:10px
}

.skip:focus {
    top:10px
}

.site-header {
    height:100px;
    background:var(--paper);
    position:relative;
    z-index:30;
    border-bottom:1px solid #e6e8e15c
}

.header-inner {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:11px;
    flex-shrink:0
}

.brand>span {
    font-size:29px;
    line-height:1;
    font-weight:800;
    letter-spacing:-1.5px
}

.brand small {
    display:block;
    letter-spacing:2.3px;
    font-size:8px;
    font-weight:700;
    margin-top:7px
}

.brand img {
    border-radius:12px
}

.header-inner nav {
    display:flex;
    gap:30px;
    align-items:center;
    font-size:12px;
    font-weight:700
}

.header-inner nav>a:not(.nav-cta):hover {
    color:#6e8731
}

.nav-cta {
    padding:12px 20px;
    border:1px solid #b5bcb8;
    border-radius:7px;
    margin-left:8px;
    display:flex;
    gap:24px
}

.nav-cta:hover {
    background:var(--lime);
    border-color:var(--lime)
}

.menu-toggle {
    display:none
}

.hero {
    overflow:hidden;
    padding:70px 0 65px
}

.hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:center
}

.hero h1 {
    font-size:clamp(46px,4.5vw,68px);
    font-weight:800;
    line-height:1.09;
    letter-spacing:-.065em
}

.hero h1>span:not(.lime-dot) {
    position:relative;
    display:inline-block;
    z-index:0
}

.hero h1>span:not(.lime-dot):before {
    content:"";
    position:absolute;
    left:-5px;
    right:-8px;
    bottom:2px;
    height:32%;
    background:var(--lime);
    z-index:-1;
    transform:rotate(-2deg)
}

.lime-dot {
    color:#88a333
}

.hero-copy>p {
    font-size:14px;
    margin-top:25px;
    line-height:1.9;
    max-width:430px
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:26px;
    margin-top:30px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:36px;
    border-radius:7px;
    padding:15px 24px;
    border:0;
    font-size:12px;
    font-weight:750;
    transition:transform .2s,background .2s
}

.button:hover {
    transform:translateY(-3px)
}

.button span {
    font-size:21px;
    font-weight:400;
    line-height:1
}

.button-dark {
    background:var(--ink);
    color:white
}

.button-lime {
    background:var(--lime);
    color:var(--ink)
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:20px;
    font-size:12px;
    font-weight:750
}

.text-link span {
    font-size:20px
}

.text-link:hover {
    text-decoration:underline;
    text-underline-offset:5px
}

.hero-note {
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:35px;
    font-size:10px;
    color:var(--muted);
    line-height:1.7
}

.hero-note strong {
    color:var(--ink);
    font-weight:650
}

.mini-mark {
    display:grid;
    place-items:center;
    width:33px;
    height:33px;
    border-radius:50%;
    border:1px solid #dfe4d9;
    font-size:22px;
    color:var(--ink)
}

.hero-art {
    height:485px;
    position:relative;
    isolation:isolate
}

.art-grid {
    position:absolute;
    inset:7% -15% -6% 0;
    background-image:linear-gradient(#859c8020 1px,transparent 1px),linear-gradient(90deg,#859c8020 1px,transparent 1px);
    background-size:31px 31px;
    mask-image:radial-gradient(ellipse,#000 20%,transparent 70%);
    z-index:-2
}

.art-orbit {
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    background:#e9eedb;
    top:55px;
    left:55px;
    z-index:-1
}

.browser-mock {
    position:absolute;
    left:10px;
    top:60px;
    width:94%;
    background:#f1f0e5;
    border:6px solid white;
    border-radius:13px;
    box-shadow:0 25px 60px #27352816,0 0 0 1px #e1e4db;
    transform:rotate(-5deg);
    overflow:hidden
}

.browser-bar {
    height:29px;
    background:#f7f7f4;
    color:#a5aaa7;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 11px;
    font-size:8px;
    border-bottom:1px solid #e5e6dd
}

.browser-dots {
    font-size:6px;
    letter-spacing:2px
}

.browser-bar>span:nth-child(2) {
    background:#edeee7;
    border-radius:4px;
    padding:0 50px;
    color:#7d867d
}

.mock-nav {
    display:flex;
    justify-content:space-between;
    padding:16px 22px;
    align-items:center
}

.mock-nav strong {
    font-size:21px;
    letter-spacing:-2px
}

.mock-nav strong>span {
    font-size:8px;
    vertical-align:top;
    margin-left:3px
}

.mock-nav>span {
    font-size:6px
}

.mock-nav b {
    background:#d6eb7c;
    padding:4px;
    border-radius:50%;
    font-size:12px
}

.mock-body {
    height:226px;
    padding:18px 22px;
    position:relative
}

.mock-kicker {
    font-size:5px;
    letter-spacing:1px;
    font-weight:700
}

.mock-body h2 {
    font-size:32px;
    font-weight:650;
    position:relative;
    z-index:2;
    margin-top:10px;
    letter-spacing:-1.7px
}

.mock-body p {
    font-size:7px;
    margin-top:11px;
    line-height:1.6
}

.mock-button {
    display:inline-flex;
    gap:28px;
    background:#172c36;
    color:white;
    border-radius:3px;
    padding:7px 9px;
    font-size:6px;
    margin-top:13px
}

.mock-bottom {
    display:flex;
    justify-content:space-between;
    padding:16px 22px;
    font-size:6px;
    letter-spacing:1px;
    border-top:1px solid #dfdfcf
}

.sculpture {
    position:absolute;
    width:180px;
    height:240px;
    right:12px;
    top:9px;
    transform:rotate(20deg)
}

.sculpture-ring {
    position:absolute;
    width:146px;
    height:146px;
    border:30px solid #b7ca61;
    border-radius:50%;
    box-shadow:inset 9px 5px 16px #4a641144,5px 9px 15px #596a2a22;
    background:transparent
}

.ring-one {
    top:0;
    left:18px;
    border-color:#d6e899 #b2c86b #88a141 #e0efaa;
    transform:rotate(-15deg)
}

.ring-two {
    top:46px;
    left:18px;
    border-color:#cfe185 #7f9934 #7a902e #c1d776;
    z-index:-1
}

.ring-three {
    top:93px;
    left:18px;
    border-color:#b8d263 #718e23 #617721 #adc658;
    z-index:-2
}

.sculpture-shadow {
    position:absolute;
    width:150px;
    height:17px;
    background:#7f8b3050;
    filter:blur(13px);
    bottom:0;
    left:28px;
    transform:rotate(-20deg)
}

.phone-mock {
    position:absolute;
    right:-4px;
    bottom:18px;
    width:139px;
    height:264px;
    background:#edf0e2;
    border:6px solid #24353b;
    border-radius:24px;
    box-shadow:0 15px 30px #10262a28;
    transform:rotate(7deg);
    padding:25px 13px 12px;
    z-index:3
}

.phone-notch {
    position:absolute;
    width:42px;
    height:9px;
    left:calc(50% - 21px);
    top:0;
    background:#24353b;
    border-radius:0 0 7px 7px
}

.phone-mock strong {
    font-size:17px;
    letter-spacing:-1px
}

.phone-mock strong span {
    font-size:6px;
    vertical-align:top
}

.phone-sculpture {
    height:93px;
    position:relative;
    margin:9px 0
}

.phone-sculpture:before,.phone-sculpture:after {
    content:"";
    position:absolute;
    width:68px;
    height:68px;
    border:17px solid #b3cb5b;
    border-radius:50%;
    left:16px;
    top:0;
    box-shadow:inset 3px 3px 5px #7185234a;
    transform:rotate(-20deg)
}

.phone-sculpture:after {
    top:24px;
    border-color:#8da53a;
    z-index:-1
}

.phone-mock>span {
    font-size:14px;
    font-weight:750;
    line-height:1.2;
    display:block;
    letter-spacing:-.7px
}

.phone-button {
    font-size:7px;
    background:#1b303a;
    color:white;
    padding:6px 8px;
    border-radius:3px;
    margin-top:10px
}

.floating-label {
    position:absolute;
    display:flex;
    align-items:center;
    padding:12px 16px;
    border-radius:8px;
    background:white;
    box-shadow:0 8px 30px #172b3610;
    z-index:4;
    font-size:9px;
    border:1px solid #e5e9df
}

.label-top {
    right:34px;
    top:29px;
    transform:rotate(4deg)
}

.label-top .status-dot {
    width:6px;
    height:6px
}

.label-bottom {
    left:5px;
    bottom:20px;
    gap:11px;
    transform:rotate(-3deg)
}

.label-bottom small {
    display:block;
    color:var(--muted);
    font-size:8px;
    margin-top:2px
}

.responsive-icon {
    font-size:25px;
    color:#789725;
    background:#f1f7da;
    padding:0 8px;
    border-radius:5px
}

.art-caption {
    position:absolute;
    bottom:0;
    left:37%;
    font-size:6px;
    letter-spacing:1px;
    color:#8b9485
}

.principles {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#f1f3ec
}

.principles .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:27px 0
}

.principles .container>span {
    font-size:11px;
    line-height:1.6;
    color:#6a7369
}

.principles strong {
    color:var(--ink);
    font-weight:750
}

.principles .container>div {
    font-size:11px;
    font-weight:650;
    display:flex;
    align-items:center;
    gap:12px
}

.principles b {
    font-size:23px;
    font-weight:500
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:42px
}

.section-heading p {
    font-size:12px;
    line-height:1.9;
    margin-bottom:5px
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.service-card {
    position:relative;
    border:1px solid var(--line);
    padding:28px 27px 30px;
    border-radius:var(--radius);
    background:#fff;
    transition:transform .2s,border-color .2s
}

.service-card:hover {
    transform:translateY(-5px);
    border-color:#9db451
}

.service-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px
}

.service-icon {
    display:grid;
    place-items:center;
    width:47px;
    height:47px;
    background:#f1f5e7;
    border-radius:12px;
    font-size:28px;
    line-height:1
}

.card-number {
    font-size:10px;
    color:#9ba399
}

.service-card h3 {
    font-size:22px;
    letter-spacing:-.8px;
    margin-bottom:14px
}

.service-card p {
    font-size:12px;
    line-height:1.9;
    max-width:270px;
    min-height:70px
}

.tags {
    display:flex;
    gap:7px;
    margin-top:27px;
    flex-wrap:wrap
}

.tags span {
    font-size:8px;
    padding:4px 8px;
    background:#f6f7f2;
    border-radius:4px;
    color:#697369
}

.card-arrow {
    position:absolute;
    right:25px;
    bottom:29px;
    font-size:22px
}

.work-section {
    padding-top:0
}

.work-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:28px
}

.work-preview {
    position:relative;
    height:340px;
    border-radius:var(--radius);
    overflow:hidden;
    padding:35px 30px 0
}

.lavender-preview {
    background:#e8e2ed
}

.lavender-site {
    background:#fcfaf6;
    border-radius:8px 8px 0 0;
    position:relative;
    height:100%;
    box-shadow:0 15px 35px #564b6124;
    overflow:hidden
}

.lavender-nav {
    font-family:Georgia,serif;
    font-size:21px;
    color:#665169;
    padding:18px 23px;
    border-bottom:1px solid #ede9e6
}

.lavender-nav span {
    float:right;
    font-family:Manrope,Arial,sans-serif;
    font-size:6px;
    margin-top:9px;
    letter-spacing:.4px
}

.lavender-content {
    padding:33px 23px;
    position:relative;
    z-index:2
}

.lavender-content>span {
    font-size:5px;
    letter-spacing:1.2px;
    color:#76677c
}

.lavender-content h3 {
    font-size:27px;
    font-family:Georgia,serif;
    line-height:1.25;
    font-weight:400;
    color:#4c3d51;
    letter-spacing:-.6px;
    margin-top:10px
}

.lavender-content em {
    color:#8b7698
}

.lavender-line {
    width:24px;
    height:1px;
    background:#8d7e90;
    margin:15px 0
}

.lavender-content p {
    font-size:7px;
    color:#928897
}

.bottle {
    position:absolute;
    width:89px;
    height:164px;
    right:37px;
    bottom:-10px;
    border-radius:12px 12px 14px 14px;
    background:linear-gradient(90deg,#e4dfd5,#fffdf3 45%,#ded8cb);
    transform:rotate(9deg);
    box-shadow:9px 12px 20px #66557124
}

.bottle-cap {
    position:absolute;
    top:-24px;
    left:4px;
    width:81px;
    height:32px;
    border-radius:6px 6px 0 0;
    background:repeating-linear-gradient(90deg,#cfcbc1 0 1px,#e6e0d3 1px 3px)
}

.bottle-label {
    background:#f8f3e6;
    margin-top:32px;
    padding:12px 3px 20px;
    text-align:center;
    font-family:Georgia,serif;
    font-size:13px;
    color:#7a6b83
}

.bottle-label small {
    display:block;
    font-size:5px;
    letter-spacing:2px;
    margin-top:9px
}

.bottle-label>span {
    font-size:6px;
    display:block;
    margin-top:16px
}

.bottle-two {
    width:70px;
    height:117px;
    right:4px;
    transform:rotate(-7deg);
    bottom:-30px;
    z-index:3
}

.bottle-two .bottle-cap {
    width:62px
}

.bottle-two .bottle-label {
    font-size:10px;
    margin-top:13px
}

.preview-badge {
    position:absolute;
    left:18px;
    bottom:16px;
    z-index:5;
    font-size:7px;
    letter-spacing:.8px;
    background:#ffffffdf;
    border:1px solid #ffffff70;
    padding:7px 10px;
    border-radius:5px
}

.dashboard-preview {
    background:#e1e8e2;
    display:flex;
    align-items:flex-end;
    padding:35px 24px 0
}

.dash-window {
    background:#fafbf8;
    border:5px solid white;
    box-shadow:0 10px 40px #2a4a4520;
    border-radius:11px 11px 0 0;
    display:flex;
    width:100%;
    height:270px;
    transform:rotate(3deg);
    transform-origin:bottom left
}

.dash-sidebar {
    width:50px;
    background:#203641;
    flex-shrink:0;
    text-align:center;
    padding:16px 10px
}

.dash-sidebar b {
    font-size:25px;
    color:var(--lime);
    position:relative
}

.dash-sidebar b span {
    font-size:12px
}

.dash-sidebar i {
    display:block;
    height:5px;
    border-radius:2px;
    background:#73818a;
    width:20px;
    margin:24px auto
}

.dash-main {
    padding:25px 20px;
    width:100%
}

.dash-greeting {
    font-size:6px;
    color:#8a968f
}

.dash-main h3 {
    font-size:15px;
    letter-spacing:-.4px;
    margin-top:5px;
    display:flex;
    justify-content:space-between
}

.dash-main h3 span {
    font-size:14px;
    color:#83907d
}

.dash-stats {
    display:flex;
    gap:10px;
    margin-top:18px
}

.dash-stats>div {
    border:1px solid #e3e9dd;
    border-radius:5px;
    font-size:6px;
    padding:8px 12px;
    width:50%;
    color:#8a9489
}

.dash-stats>div:first-child {
    background:#e4f2b6
}

.dash-stats b {
    font-size:20px;
    display:block;
    color:var(--ink);
    font-weight:650
}

.dash-chart {
    height:72px;
    display:flex;
    gap:9px;
    align-items:flex-end;
    padding:10px 0 0;
    margin:7px 0;
    border-bottom:1px solid #e4e9dd;
    background:repeating-linear-gradient(0deg,transparent 0 23px,#e8ebdf 23px 24px)
}

.dash-chart span {
    width:100%;
    background:#c5dd7e;
    border-radius:3px 3px 0 0;
    height:50%
}

.dash-chart span:nth-child(2n) {
    height:65%
}

.dash-chart span:nth-child(3n) {
    height:44%
}

.dash-chart span:nth-child(5) {
    height:80%;
    background:#88a344
}

.dash-chart span:last-child {
    height:100%;
    background:#283f41
}

.dash-lines i {
    display:block;
    width:95%;
    height:5px;
    background:#edf0e6;
    margin-top:9px
}

.dash-lines i:last-child {
    width:70%
}

.work-caption {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 2px
}

.work-caption h3 {
    font-size:19px;
    letter-spacing:-.6px
}

.work-caption p {
    font-size:10px;
    margin-top:8px
}

.work-caption>a {
    border:1px solid #dce1d5;
    border-radius:50%;
    height:34px;
    width:34px;
    display:grid;
    place-items:center;
    font-size:20px
}

.work-caption>a:hover {
    background:var(--lime)
}

.approach {
    background:var(--ink);
    color:var(--white)
}

.approach-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center
}

.approach .eyebrow {
    color:#c7d0cd
}

.approach h2 span {
    color:var(--lime)
}

.approach p {
    color:#b3bfc2;
    font-size:12px;
    line-height:1.9;
    margin-top:24px;
    max-width:395px
}

.approach .text-link {
    margin-top:25px;
    color:var(--lime)
}

.benefit-list>div {
    display:flex;
    gap:24px;
    align-items:flex-start;
    border-bottom:1px solid #ffffff20;
    padding:26px 0
}

.benefit-list>div:first-child {
    padding-top:0
}

.benefit-list>div:last-child {
    border:0;
    padding-bottom:0
}

.benefit-list>div>span {
    font-size:10px;
    color:#85969a;
    margin-top:5px
}

.benefit-list h3 {
    font-size:19px;
    letter-spacing:-.6px
}

.benefit-list p {
    font-size:11px;
    margin-top:10px
}

.benefit-list b {
    font-size:20px;
    font-weight:400;
    color:var(--lime);
    margin-left:auto
}

.process-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:45px
}

.process-grid>div {
    border-top:1px solid #d0d9c6;
    padding-top:26px
}

.process-grid>div>span {
    font-size:9px;
    letter-spacing:1.2px;
    color:#748264;
    font-weight:700
}

.process-grid h3 {
    font-size:21px;
    letter-spacing:-.8px;
    margin:18px 0 14px
}

.process-grid p {
    font-size:12px;
    line-height:1.9
}

.faq {
    padding-top:20px
}

.faq-grid {
    display:grid;
    grid-template-columns:.85fr 1.3fr;
    gap:80px
}

.faq-grid>div>p {
    font-size:12px;
    line-height:1.9;
    margin-top:22px
}

.faq-grid p a {
    color:var(--ink);
    text-decoration:underline;
    text-underline-offset:4px
}

.faq-list details {
    border-bottom:1px solid var(--line)
}

.faq-list details:first-child {
    border-top:1px solid var(--line)
}

.faq-list summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 0;
    font-size:13px;
    font-weight:700
}

.faq-list summary::-webkit-details-marker {
    display:none
}

.faq-list summary span {
    font-size:20px;
    font-weight:400
}

.faq-list details[open] summary span {
    transform:rotate(45deg)
}

.faq-list details p {
    font-size:12px;
    line-height:1.9;
    padding-bottom:24px;
    max-width:95%
}

.cta-section {
    background:var(--ink);
    color:white;
    overflow:hidden
}

.cta-inner {
    position:relative;
    padding:70px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    isolation:isolate;
    gap:30px
}

.cta-inner .eyebrow {
    color:#cad3cf;
    margin-bottom:20px
}

.cta-inner h2 {
    font-size:clamp(32px,4vw,52px)
}

.cta-inner h2>span {
    color:var(--lime)
}

.cta-inner .button {
    flex-shrink:0;
    z-index:2
}

.cta-decoration {
    position:absolute;
    font-size:300px;
    line-height:1;
    right:20%;
    top:0;
    color:#ffffff05;
    z-index:-1
}

.site-footer {
    background:#f0f2ea
}

.footer-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:45px 0;
    gap:25px;
    border-bottom:1px solid #dce0d4
}

.footer-top p {
    font-size:11px;
    line-height:1.8
}

.footer-contact {
    font-weight:700;
    font-size:12px;
    display:flex;
    gap:30px;
    align-items:center
}

.footer-contact span {
    font-size:25px
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    padding:20px 0;
    font-size:9px;
    color:#798173
}

.content-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:35px
}

.content-card {
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    padding:26px;
    display:block;
    overflow:hidden
}

.content-card>img {
    width:100%;
    aspect-ratio:1.5;
    object-fit:cover;
    border-radius:7px;
    margin-bottom:20px
}

.content-card .eyebrow {
    margin-bottom:15px
}

.content-card h3 {
    font-size:23px
}

.content-card p {
    font-size:12px;
    margin:15px 0
}

.content-card .text-link {
    margin-top:12px
}

.inner-intro {
    padding:65px 0 45px;
    border-bottom:1px solid var(--line)
}

.inner-intro h1 {
    font-size:clamp(38px,5vw,62px)
}

.inner-intro p {
    max-width:550px;
    font-size:14px;
    margin-top:20px
}

.contact-grid {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:90px
}

.contact-aside h2 {
    font-size:36px
}

.contact-aside p {
    font-size:13px;
    line-height:1.9;
    margin-top:20px
}

.contact-tip {
    margin-top:35px;
    border-top:1px solid var(--line);
    padding-top:25px
}

.contact-tip strong {
    font-size:13px
}

.contact-tip p {
    font-size:12px;
    margin-top:8px
}

.contact-form {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:35px
}

.contact-form h2 {
    font-size:26px;
    margin-bottom:25px
}

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.field {
    margin-bottom:20px
}

.field label {
    display:block;
    font-size:11px;
    font-weight:700;
    margin-bottom:7px
}

.field label small {
    font-weight:400;
    color:var(--muted)
}

.field input,.field textarea,.field select {
    width:100%;
    border:1px solid #dce1d5;
    border-radius:5px;
    padding:12px 13px;
    background:#fbfcf8;
    color:var(--ink);
    outline:none;
    font-size:13px
}

.field input:focus,.field textarea:focus,.field select:focus {
    border-color:#728b30;
    box-shadow:0 0 0 3px #d9f46e40
}

.field textarea {
    resize:vertical;
    min-height:130px
}

.contact-form .button {
    width:100%;
    justify-content:space-between
}

.form-note {
    font-size:10px;
    line-height:1.8;
    margin-top:15px
}

.honeypot {
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden
}

.form-notice {
    padding:16px;
    border-radius:8px;
    margin-bottom:25px;
    font-size:12px;
    background:#f3f8df;
    border:1px solid #d6e4ac
}

.form-notice.error {
    background:#fff2eb;
    border-color:#efcbb4
}

.form-notice p {
    color:inherit
}

.empty-state {
    border:1px dashed #d5dcc9;
    border-radius:14px;
    padding:45px;
    text-align:center
}

.empty-state h2 {
    font-size:26px
}

.empty-state p {
    font-size:13px;
    margin:15px auto 25px;
    max-width:440px
}

.public-pagination {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    margin-top:40px;
    font-size:12px
}

.public-pagination .button {
    background:var(--ink);
    color:white
}

.article {
    max-width:800px;
    margin:auto;
    padding:65px 0 90px
}

.article h1 {
    font-size:clamp(35px,4vw,55px);
    margin:20px 0
}

.article-summary {
    font-size:16px;
    margin-bottom:25px
}

.article time {
    font-size:11px;
    color:var(--muted)
}

.article-cover {
    margin:30px 0
}

.article-cover img {
    border-radius:15px;
    width:100%;
    height:auto
}

.article-body {
    margin-top:35px
}

.article-body p {
    margin:18px 0;
    line-height:1.95
}

.article-body h2 {
    font-size:30px;
    margin-top:35px
}

.article-body h3 {
    margin-top:28px
}

.article-back {
    margin-top:30px
}

.product-detail {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px
}

.product-detail>img {
    width:100%;
    border-radius:18px;
    max-height:560px;
    object-fit:contain;
    background:#eff2e8
}

.product-detail h1 {
    font-size:42px;
    margin:20px 0
}

.product-detail p {
    font-size:14px;
    margin-bottom:25px;
    white-space:pre-line
}

.product-detail h2 {
    font-size:22px;
    margin:25px 0 15px
}

.price {
    font-size:24px;
    font-weight:750;
    margin:20px 0
}

.breadcrumbs {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    font-size:10px;
    color:#798570;
    margin-bottom:30px
}

.error-page {
    padding:100px 30px;
    text-align:center
}

.error-page h1 {
    font-size:44px;
    margin-bottom:20px
}

.error-page p {
    margin-bottom:30px
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(min-width:1500px) {
    .hero {
        padding:90px 0
    }
    .hero-art {
        height:515px
    }
    .browser-mock {
        top:75px
    }
    .phone-mock {
        bottom:20px
    }
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(max-width:1100px) {
    .container {
        width:calc(100% - 56px)
    }
    .header-inner nav {
        gap:19px;
        font-size:11px
    }
    .nav-cta {
        padding:10px 14px;
        gap:12px
    }
    .hero h1 {
        font-size:52px
    }
    .hero-art {
        height:440px
    }
    .mock-body h2 {
        font-size:26px
    }
    .sculpture {
        transform:rotate(20deg) scale(.8);
        right:-10px;
        top:12px
    }
    .mock-body {
        height:210px
    }
    .phone-mock {
        width:122px;
        height:245px;
        right:-8px;
        bottom:7px
    }
    .phone-sculpture:before,.phone-sculpture:after {
        left:8px
    }
    .label-bottom {
        bottom:13px;
        left:-15px
    }
    .hero-actions {
        gap:18px
    }
    .hero-actions .button {
        padding:14px 18px;
        gap:20px
    }
    .hero-actions .text-link {
        font-size:10px;
        gap:10px
    }
    .section {
        padding:80px 0
    }
    .work-section {
        padding-top:0
    }
    .approach-grid {
        gap:55px
    }
    .service-card {
        padding:24px 21px
    }
    .card-arrow {
        right:18px
    }
    .work-preview {
        height:300px;
        padding:25px 20px 0
    }
    .lavender-content {
        padding:25px 18px
    }
    .lavender-content h3 {
        font-size:23px
    }
    .bottle-one {
        right:23px;
        width:76px;
        height:146px
    }
    .bottle-one .bottle-cap {
        width:68px
    }
    .bottle-two {
        right:-5px
    }
    .dash-window {
        height:254px
    }
    .dash-main {
        padding:21px 13px
    }
    .faq {
        padding-top:10px
    }
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(max-width:850px) {
    .site-header {
        height:80px
    }
    .menu-toggle {
        display:flex;
        flex-direction:column;
        gap:6px;
        background:transparent;
        border:1px solid var(--line);
        padding:12px;
        border-radius:7px
    }
    .menu-toggle span {
        height:2px;
        width:21px;
        background:var(--ink)
    }
    .header-inner nav {
        display:none;
        position:absolute;
        top:80px;
        left:0;
        right:0;
        background:var(--paper);
        padding:22px 28px;
        border-bottom:1px solid var(--line);
        box-shadow:0 12px 22px #172b360a;
        align-items:stretch;
        font-size:14px
    }
    .header-inner nav.is-open {
        display:flex;
        flex-direction:column
    }
    .nav-cta {
        margin:0;
        justify-content:space-between
    }
    .hero-grid {
        grid-template-columns:1fr 1fr;
        gap:5px
    }
    .hero h1 {
        font-size:43px
    }
    .hero-art {
        height:390px
    }
    .hero-copy>p {
        font-size:12px
    }
    .hero-actions {
        flex-direction:column;
        align-items:flex-start;
        gap:18px
    }
    .hero-note {
        margin-top:25px
    }
    .browser-mock {
        top:72px;
        left:0;
        width:108%
    }
    .mock-body {
        height:195px;
        padding:10px 15px
    }
    .mock-body h2 {
        font-size:23px
    }
    .mock-nav {
        padding:12px 15px
    }
    .sculpture {
        transform:rotate(20deg) scale(.62);
        right:-35px;
        top:-5px
    }
    .phone-mock {
        width:102px;
        height:213px;
        padding:22px 9px 9px;
        right:-10px;
        bottom:-5px
    }
    .phone-mock>span {
        font-size:12px
    }
    .phone-sculpture {
        height:74px
    }
    .phone-sculpture:before,.phone-sculpture:after {
        width:57px;
        height:57px;
        border-width:14px;
        left:6px
    }
    .phone-sculpture:after {
        top:17px
    }
    .label-top {
        top:33px;
        right:-7px
    }
    .label-bottom {
        bottom:-7px;
        padding:9px;
        font-size:7px;
        left:-17px
    }
    .label-bottom small {
        font-size:6px
    }
    .art-caption {
        display:none
    }
    .principles .container {
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:18px
    }
    .principles .container>span {
        grid-column:1/-1;
        display:flex;
        gap:5px
    }
    .principles .container>span br {
        display:none
    }
    .principles .container>div {
        font-size:10px
    }
    .section-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:18px
    }
    .section-heading p br {
        display:none
    }
    .service-grid {
        gap:10px
    }
    .service-card {
        padding:20px 16px
    }
    .service-card h3 {
        font-size:19px
    }
    .service-card p {
        font-size:11px
    }
    .tags {
        gap:5px
    }
    .tags span {
        font-size:7px
    }
    .card-arrow {
        position:static;
        display:block;
        margin-top:15px
    }
    .service-top {
        margin-bottom:24px
    }
    .work-grid {
        grid-template-columns:1fr 1fr;
        gap:18px
    }
    .work-preview {
        height:265px;
        padding:22px 15px 0
    }
    .lavender-nav {
        padding:15px;
        font-size:17px
    }
    .lavender-nav span {
        display:none
    }
    .lavender-content h3 {
        font-size:22px
    }
    .lavender-content {
        padding:20px 15px
    }
    .bottle-one {
        right:8px;
        bottom:-38px;
        width:65px;
        height:134px;
        z-index:1
    }
    .bottle-one .bottle-cap {
        width:57px
    }
    .bottle-two {
        display:none
    }
    .dash-window {
        height:225px;
        width:115%;
        flex-shrink:0
    }
    .dash-main {
        padding:16px 11px
    }
    .dash-sidebar {
        width:37px;
        padding:13px 5px
    }
    .dash-stats {
        margin-top:12px
    }
    .dash-chart {
        height:57px
    }
    .preview-badge {
        font-size:6px;
        left:10px;
        bottom:10px
    }
    .work-caption h3 {
        font-size:16px
    }
    .work-caption p {
        font-size:8px
    }
    .approach-grid {
        gap:35px
    }
    .approach h2 {
        font-size:32px
    }
    .benefit-list>div {
        gap:16px
    }
    .benefit-list h3 {
        font-size:17px
    }
    .process-grid {
        gap:24px
    }
    .process-grid h3 {
        font-size:18px
    }
    .faq-grid {
        gap:35px;
        grid-template-columns:.8fr 1.2fr
    }
    .content-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .contact-grid {
        gap:35px;
        grid-template-columns:.7fr 1fr
    }
    .contact-form {
        padding:25px
    }
    .form-row {
        grid-template-columns:1fr;
        gap:0
    }
    .product-detail {
        gap:30px
    }
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(max-width:600px) {
    .container {
        width:calc(100% - 40px)
    }
    .brand>span {
        font-size:26px
    }
    .brand img {
        width:38px;
        height:38px
    }
    .hero {
        padding:42px 0 35px
    }
    .hero-grid {
        grid-template-columns:1fr
    }
    .hero .eyebrow {
        font-size:8px;
        margin-bottom:22px
    }
    .hero h1 {
        font-size:clamp(43px,11.5vw,63px)
    }
    .hero-copy>p {
        font-size:13px;
        max-width:360px;
        margin-top:22px
    }
    .hero-actions {
        flex-direction:row;
        align-items:center;
        gap:23px;
        margin-top:25px
    }
    .hero-actions .button {
        font-size:11px;
        padding:14px 18px;
        gap:18px
    }
    .hero-actions .text-link {
        font-size:10px
    }
    .hero-note {
        margin-top:25px
    }
    .hero-art {
        height:380px;
        margin-top:15px;
        max-width:440px;
        width:100%;
        justify-self:center
    }
    .browser-mock {
        width:94%;
        top:55px;
        left:0
    }
    .mock-body {
        height:200px;
        padding:15px 18px
    }
    .mock-body h2 {
        font-size:28px
    }
    .sculpture {
        transform:rotate(20deg) scale(.7);
        right:-21px;
        top:0
    }
    .mock-nav {
        padding:14px 18px
    }
    .phone-mock {
        right:2px;
        bottom:0;
        width:113px;
        height:230px;
        padding:23px 10px 10px
    }
    .phone-sculpture {
        height:86px
    }
    .phone-sculpture:before,.phone-sculpture:after {
        left:7px;
        width:64px;
        height:64px;
        border-width:16px
    }
    .phone-mock>span {
        font-size:13px
    }
    .label-top {
        right:5px;
        top:29px;
        font-size:8px
    }
    .label-bottom {
        left:0;
        bottom:8px;
        font-size:8px;
        padding:10px
    }
    .label-bottom small {
        font-size:7px
    }
    .art-orbit {
        width:300px;
        height:300px;
        left:25px;
        top:40px
    }
    .principles .container {
        gap:18px 12px;
        padding:23px 0
    }
    .principles .container>span {
        font-size:11px
    }
    .principles .container>div {
        font-size:9px;
        gap:8px
    }
    .principles b {
        font-size:20px
    }
    .section {
        padding:60px 0
    }
    .section-heading {
        margin-bottom:27px
    }
    .eyebrow {
        font-size:8px;
        margin-bottom:17px
    }
    h2 {
        font-size:31px
    }
    .section-heading p {
        font-size:12px
    }
    .service-grid {
        grid-template-columns:1fr;
        gap:14px
    }
    .service-card {
        padding:25px
    }
    .service-top {
        margin-bottom:22px
    }
    .service-card h3 {
        font-size:24px
    }
    .service-card p {
        font-size:12px;
        max-width:100%;
        min-height:0
    }
    .tags {
        margin-top:22px
    }
    .tags span {
        font-size:8px
    }
    .card-arrow {
        position:absolute;
        right:24px;
        bottom:24px;
        margin:0
    }
    .work-section {
        padding-top:0
    }
    .work-grid {
        grid-template-columns:1fr;
        gap:25px
    }
    .work-preview {
        height:290px;
        padding:25px 23px 0
    }
    .lavender-nav {
        padding:17px 20px;
        font-size:22px
    }
    .lavender-content {
        padding:25px 20px
    }
    .lavender-content h3 {
        font-size:26px
    }
    .bottle-one {
        width:80px;
        height:153px;
        right:21px;
        bottom:-16px
    }
    .bottle-one .bottle-cap {
        width:72px
    }
    .bottle-two {
        display:block
    }
    .dash-window {
        width:100%;
        height:240px
    }
    .dash-main {
        padding:20px
    }
    .dash-sidebar {
        width:47px
    }
    .dash-chart {
        height:63px
    }
    .work-caption {
        padding:17px 0 0
    }
    .work-caption h3 {
        font-size:18px
    }
    .work-caption p {
        font-size:9px
    }
    .approach-grid {
        grid-template-columns:1fr;
        gap:40px
    }
    .approach h2 {
        font-size:32px
    }
    .approach p {
        font-size:13px
    }
    .benefit-list h3 {
        font-size:20px
    }
    .benefit-list p {
        font-size:12px
    }
    .process-grid {
        grid-template-columns:1fr;
        gap:26px
    }
    .process-grid>div {
        padding-top:22px
    }
    .process-grid h3 {
        font-size:22px;
        margin-top:12px
    }
    .process-grid p {
        font-size:12px;
        max-width:340px
    }
    .faq {
        padding-top:5px
    }
    .faq-grid {
        grid-template-columns:1fr;
        gap:30px
    }
    .faq-list summary {
        font-size:12px;
        padding:22px 0
    }
    .cta-inner {
        padding:48px 0;
        flex-direction:column;
        align-items:flex-start;
        gap:28px
    }
    .cta-inner h2 {
        font-size:35px
    }
    .cta-decoration {
        right:-25px;
        top:10px
    }
    .footer-top {
        align-items:flex-start;
        flex-wrap:wrap;
        padding:32px 0;
        gap:26px
    }
    .footer-top p {
        margin-left:auto;
        font-size:9px
    }
    .footer-contact {
        width:100%;
        justify-content:space-between
    }
    .footer-bottom {
        font-size:8px;
        flex-wrap:wrap;
        gap:14px
    }
    .footer-bottom>span:nth-child(2) {
        display:none
    }
    .content-grid {
        grid-template-columns:1fr
    }
    .inner-intro {
        padding:42px 0 32px
    }
    .inner-intro h1 {
        font-size:40px
    }
    .contact-grid {
        grid-template-columns:1fr;
        gap:35px
    }
    .contact-aside h2 {
        font-size:30px
    }
    .contact-tip {
        margin-top:22px;
        padding-top:20px
    }
    .contact-form {
        padding:24px 20px
    }
    .article {
        padding:40px 0 60px
    }
    .article h1 {
        font-size:36px
    }
    .article-body p {
        font-size:14px
    }
    .empty-state {
        padding:35px 22px
    }
    .product-detail {
        grid-template-columns:1fr;
        gap:35px
    }
    .product-detail>img {
        max-height:330px
    }
    .product-detail h1 {
        font-size:34px
    }
    .error-page h1 {
        font-size:32px
    }
    .desktop-br {
        display:none
    }
}

/* Ekran/tercih uyarlaması: aşağıdaki kurallar yalnızca bu koşul sağlanınca uygulanır. */
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    * {
        transition:none!important;
        animation:none!important
    }
}