:root {
    --ink:#19201d;
    --gold:#c2a16b;
    --paper:#f5f1e9;
    --line:#dcd5c8;
}

* {
    box-sizing:border-box;
}

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

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.75 'Segoe UI',Arial,sans-serif;
}

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

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

button,a {
    touch-action:manipulation;
}

button {
    cursor:pointer;
}

img {
    display:block;
    width:100%;
    object-fit:cover;
}

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

p {
    color:#62665f;
    margin:16px 0;
}

h1,h2,h3 {
    font-family:Georgia,'Times New Roman',serif;
    font-weight:400;
    line-height:1.12;
}

h1 {
    font-size:clamp(48px,5.7vw,86px);
    letter-spacing:-2px;
}

h2 {
    font-size:clamp(35px,3.8vw,53px);
    letter-spacing:-1px;
}

h3 {
    font-size:27px;
}

header {
    background:#171c1a;
    color:#f5f1e9;
    border-bottom:1px solid #ffffff20;
    position:sticky;
    top:0;
    z-index:30;
}

.nav-wrap {
    max-width:1380px;
    margin:auto;
    min-height:94px;
    display:flex;
    align-items:center;
    padding:16px 4%;
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-family:Georgia,serif;
    font-size:24px;
    white-space:nowrap;
    color:var(--gold);
    letter-spacing:1px;
}

.brand small {
    display:block;
    font:9px 'Segoe UI',sans-serif;
    letter-spacing:2.5px;
    color:#ddd1bb;
    margin-top:7px;
}

.brand-icon {
    font-size:43px;
    font-weight:normal;
}

nav {
    display:flex;
    gap:24px;
    margin-left:auto;
}

nav a {
    font-size:13px;
    color:#d6d6cf;
    white-space:nowrap;
}

nav a:hover,nav .active {
    color:var(--gold);
}

.nav-cta {
    font-size:12px;
    border:1px solid #c2a16b70;
    padding:11px 16px;
    color:var(--gold);
    white-space:nowrap;
}

.menu-toggle {
    display:none;
    background:none;
    color:var(--gold);
    border:1px solid var(--gold);
    font-size:24px;
}

.hero {
    min-height:690px;
    height:calc(100svh - 94px);
    max-height:960px;
    position:relative;
    display:flex;
    align-items:center;
    color:var(--paper);
}

.hero-content {
    width:min(1380px,100%);
    margin:auto;
    padding:55px 7% 110px;
}

.eyebrow {
    display:block;
    font-size:10px;
    letter-spacing:3px;
    font-weight:600;
    color:#947644;
    margin-bottom:23px;
}

.hero .eyebrow {
    color:#debd85;
}

.hero h1 {
    max-width:770px;
}

.hero em {
    color:#dec293;
    font-weight:400;
}

.hero p {
    max-width:490px;
    color:#e0dfd6;
    margin:28px 0;
    font-size:17px;
}

.actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:32px;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 24px;
    background:var(--gold);
    color:#16201b;
    border:1px solid var(--gold);
    font-size:13px;
    letter-spacing:.3px;
}

.button:hover {
    background:#dfc18f;
}

.button.outline {
    background:transparent;
    color:inherit;
    border-color:#9a967e;
}

.hero-bottom {
    position:absolute;
    bottom:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:26px 7%;
    border-top:1px solid #ffffff30;
    font-size:9px;
    letter-spacing:2px;
    color:#e3ddcf;
}

.ribbon {
    padding:23px 20px;
    display:flex;
    justify-content:center;
    gap:40px;
    background:#202a24;
    color:#d5c3a2;
    font-size:10px;
    letter-spacing:2.6px;
}

.ribbon span {
    color:var(--gold);
}

.wrap {
    width:min(1200px,88%);
    margin-inline:auto;
}

.section {
    padding:100px 0;
}

.split {
    width:min(1200px,88%);
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:85px;
    align-items:center;
}

.split img {
    height:510px;
}

.split .story-image {
    height:540px;
    object-position:53% center;
}

.section-heading {
    max-width:730px;
    margin-bottom:40px;
}

.section-heading p {
    font-size:17px;
}

.text-link {
    display:inline-block;
    border-bottom:1px solid var(--gold);
    padding-bottom:8px;
    margin-top:24px;
    color:#8e703e;
    font-size:13px;
}

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



.card-body .eyebrow {
    margin-bottom:16px;
}

.card-body p {
    font-size:14px;
}

.dark {
    background:#1a241e;
    color:#eee8dc;
}

.dark .eyebrow {
    color:var(--gold);
}

.dark p {
    color:#bbc1b7;
}

.features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:55px;
    margin-top:65px;
}

.features article {
    border-top:1px solid #c2a16b50;
    padding-top:25px;
}

.features article>span {
    font:italic 23px Georgia;
    color:var(--gold);
    display:block;
    margin-bottom:30px;
}

.features h3 {
    font-size:29px;
}

.features p {
    font-size:14px;
}

.closing {
    text-align:center;
    padding:100px 0 110px;
}

.closing .button {
    margin-top:34px;
}

footer {
    background:#141c18;
    color:#d9dcd4;
    padding:65px 0 0;
    font-size:13px;
}

footer p {
    color:#9ea89e;
}

footer .brand {
    font-size:22px;
}

footer .eyebrow {
    color:var(--gold);
}

.footer-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr 1.1fr;
    gap:70px;
}

.footer-grid>div:nth-child(2) a {
    display:block;
    padding:4px 0;
}

.footer-bottom {
    border-top:1px solid #ffffff1a;
    margin-top:55px;
    padding:24px 0;
    display:flex;
    justify-content:space-between;
    font-size:9px;
    letter-spacing:1.6px;
}

.page-hero {
    padding:85px 0 60px;
}

.page-hero h1 {
    max-width:950px;
    font-size:clamp(46px,5.5vw,76px);
}

.page-hero p {
    max-width:650px;
    font-size:18px;
    margin-top:28px;
}

.top-zero {
    padding-top:20px;
}

.menu-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:55px;
    border-top:1px solid var(--line);
}

.menu-group h2 {
    font-size:37px;
    margin-bottom:30px;
}

.menu-group article {
    border-bottom:1px solid var(--line);
    padding:19px 0;
}

.menu-group h3 {
    font-size:23px;
}

.menu-group p {
    font-size:14px;
    margin:10px 0;
}

.filters {
    display:flex;
    gap:12px;
    margin-bottom:30px;
}

.filters button {
    padding:10px 23px;
    border:1px solid #b6ac98;
    background:transparent;
    color:var(--ink);
}

.filters button.selected {
    background:var(--ink);
    color:var(--paper);
}

.gallery {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
}

.gallery figure {
    margin:0;
}

.gallery img {
    height:390px;
}

.gallery figcaption {
    padding:13px 0;
    font-family:Georgia;
    font-size:22px;
}

.gallery figure[hidden] {
    display:none;
}

.narrow {
    width:min(850px,88%);
    margin:auto;
}

details {
    border-bottom:1px solid #ccc3b4;
    padding:25px 0;
}

summary {
    font-family:Georgia;
    font-size:24px;
    cursor:pointer;
    padding-right:20px;
}

details p {
    padding:8px 30px 0 0;
}

.planner {
    background:#eae4d8;
    padding:40px;
}

.planner h2 {
    font-size:38px;
    margin-bottom:25px;
}

form {
    display:grid;
    gap:20px;
}

label {
    font-size:12px;
    display:grid;
    gap:7px;
}

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

input,select,textarea {
    background:#f9f6f0;
    border:1px solid #cfc6b6;
    padding:13px;
    width:100%;
    min-width:0;
    color:var(--ink);
    border-radius:0;
}

textarea {
    resize:vertical;
}

.contact-line {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding:15px 0;
    font-size:13px;
}

.contact-line span {
    letter-spacing:2px;
    font-size:10px;
}

#plan-result {
    border-top:1px solid #ccc3b4;
    margin-top:30px;
    padding-top:25px;
}

#plan-text {
    white-space:pre-line;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:2px solid #af843d;
    outline-offset:5px;
}

@media(min-width:1500px) {
    .hero-content {
        padding-left:6%;
    }
}

@media(max-width:1120px) {
    nav {
        gap:13px;
    }
    .nav-cta {
        display:none;
    }
    .brand {
        font-size:21px;
    }
    .split {
        gap:40px;
    }
    .ribbon {
        gap:18px;
        font-size:9px;
    }
}

@media(max-width:800px) {
    .nav-wrap {
        min-height:78px;
        padding:13px 6%;
        justify-content:space-between;
    }
    .menu-toggle {
        display:block;
    }
    nav {
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        background:#19231d;
        padding:24px 6%;
        flex-direction:column;
        gap:18px;
    }
    nav.open {
        display:flex;
    }
    .hero {
        min-height:650px;
        height:calc(100svh - 78px);
        background-position:58% center;
    }
    .hero h1 {
        letter-spacing:-1px;
    }
    .hero p {
        font-size:16px;
    }
    .hero-bottom {
        padding:20px 6%;
    }
    .hero-bottom span:first-child {
        display:none;
    }
    .hero-bottom {
        font-size:8px;
        letter-spacing:1px;
    }
    .ribbon {
        display:block;
        text-align:center;
        font-size:9px;
        line-height:2.4;
        word-spacing:3px;
    }
    .ribbon span {
        margin:0 9px;
    }
    .section {
        padding:60px 0;
    }
    .split,.cards,.features,.menu-grid,.footer-grid {
        grid-template-columns:1fr;
    }
    .split {
        gap:35px;
    }
    .split img,.split .story-image {
        height:380px;
    }
    .cards {
        gap:20px;
    }
    .features {
        gap:30px;
        margin-top:35px;
    }
    .features article>span {
        margin-bottom:16px;
    }
    .section-heading {
        margin-bottom:28px;
    }
    .closing {
        padding:65px 0;
    }
    .footer-grid {
        gap:36px;
    }
    .footer-bottom {
        gap:15px;
        flex-wrap:wrap;
    }
    .footer-bottom>span:nth-child(2) {
        display:none;
    }
    .page-hero {
        padding:55px 0 35px;
    }
    .top-zero {
        padding-top:10px;
    }
    .gallery {
        gap:24px;
        grid-template-columns:1fr;
    }
    .gallery img {
        height:340px;
    }
    .planner {
        padding:25px;
    }
    .menu-grid {
        gap:40px;
    }
    .form-row {
        grid-template-columns:1fr 1fr;
    }
    .eyebrow {
        letter-spacing:2px;
    }
    .brand small {
        font-size:8px;
    }
    .brand-icon {
        font-size:35px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
}

.brand img.brand-icon {
    width:44px;
    height:44px;
    object-fit:contain;
    flex:0 0 44px;
}

/* Ortak etkileşim ve ekran uyarlamaları */
a,button {
    transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s;
}

button,.button,.nav-cta {
    border-radius:5px;
}

.button:hover,.nav-cta:hover {
    box-shadow:0 8px 24px #0002;
    transform:translateY(-2px);
}

.button:active {
    transform:translateY(0);
}

.nav-wrap {
    gap:25px;
}

header nav {
    gap:clamp(15px,1.8vw,26px);
}

header nav a {
    text-transform:uppercase;
    letter-spacing:.9px;
    font-size:11px;
    position:relative;
    padding:10px 0;
}

header nav a:after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:3px;
    height:1px;
    background:var(--gold);
    transform:scaleX(0);
    transition:transform .2s;
}

header nav a:hover:after,header nav a.active:after {
    transform:scaleX(1);
}

header .brand {
    font-size:clamp(17px,1.8vw,24px);
    max-width:330px;
    min-width:0;
}

header .brand>span {
    white-space:normal;
    overflow-wrap:anywhere;
}

.brand small {
    line-height:1.5;
}

.brand img.brand-icon {
    border-radius:3px;
}

.menu-toggle {
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    padding:9px;
}

.hero {
    background:#18221b;
    isolation:isolate;
}

.hero-media {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:-2;
    object-fit:cover;
    object-position:center;
}

.hero:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#0e1715ed,#10171596 47%,#10171510);
    z-index:-1;
}

.hero-content {
    position:relative;
}

.hero-bottom {
    z-index:1;
}

.card {
    height:100%;
    display:flex;
    flex-direction:column;
    border:1px solid #dcd5c8;
    background:#faf7f0;
    box-shadow:0 6px 20px #19201d06;
    transition:transform .25s,box-shadow .25s;
    overflow:hidden;
    border-radius:6px;
}

.card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 35px #19201d13;
}

.card-body {
    padding:27px 24px;
    flex:1;
}

.card img {
    aspect-ratio:1.2;
    height:auto;
    max-height:350px;
}

.cards {
    align-items:stretch;
}

.split>* {
    min-width:0;
}

.split img {
    border-radius:5px;
}

.split p,.section-heading p {
    white-space:pre-line;
}

.gallery img {
    border-radius:5px;
    transition:filter .25s;
}

.gallery figure:hover img {
    filter:brightness(1.07);
}

.gallery figcaption {
    overflow-wrap:anywhere;
}

.filters {
    flex-wrap:wrap;
}

.filters button {
    transition:background .2s,color .2s;
}

.form-row>* {
    min-width:0;
}

.footer-grid>* {
    min-width:0;
}

.footer-grid .brand {
    white-space:normal;
    overflow-wrap:anywhere;
}

.footer-grid .brand img {
    flex-shrink:0;
}

.footer-bottom {
    flex-wrap:wrap;
    gap:18px;
}

.footer-bottom a[href^='https://hwcenter'] {
    font-size:9px;
    letter-spacing:.5px;
    opacity:.75;
}

.social-links {
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:22px;
}

.quick-contact {
    position:fixed;
    right:max(20px,env(safe-area-inset-right));
    bottom:max(24px,env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap:11px;
    z-index:40;
}

.quick-contact>a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    border-radius:50%;
    color:#fff;
    box-shadow:0 5px 18px #0003;
    position:relative;
    border:1px solid #ffffff30;
}

.quick-whatsapp {
    background:#25d366;
}

.quick-phone {
    background:#1766be;
}

.quick-contact>a:hover {
    transform:translateY(-3px);
    box-shadow:0 9px 24px #0005;
}

.quick-contact svg {
    flex:none;
}

.quick-contact span {
    position:absolute;
    right:65px;
    white-space:nowrap;
    background:#19201d;
    color:#fff;
    padding:5px 12px;
    border-radius:4px;
    opacity:0;
    visibility:hidden;
    transition:opacity .2s;
}

.quick-contact a:hover span,.quick-contact a:focus-visible span {
    opacity:1;
    visibility:visible;
}

.contact-line {
    gap:20px;
    align-items:baseline;
}

.contact-line strong,.contact-line a {
    text-align:right;
    overflow-wrap:anywhere;
}

.skip-link {
    position:fixed;
    top:0;
    left:20px;
    transform:translateY(-110%);
    padding:10px 20px;
    background:var(--gold);
    color:var(--ink);
    z-index:100;
}

.skip-link:focus {
    transform:translateY(0);
}

[hidden] {
    display:none!important;
}

@media(min-width:1600px) {
    .nav-wrap {
        max-width:1500px;
    }
}

@media(max-width:1120px) {
    header nav {
        gap:20px;
    }
}

@media(max-width:980px) {
    .nav-wrap {
        min-height:78px;
        padding:13px 6%;
        justify-content:space-between;
    }
    header .brand {
        font-size:21px;
        max-width:calc(100% - 64px);
    }
    .menu-toggle {
        display:flex;
    }
    header nav {
        display:flex;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#19231d;
        padding:0 6%;
        flex-direction:column;
        gap:0;
        margin:0;
        max-height:0;
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        transition:max-height .3s ease,opacity .2s,visibility .3s,padding .3s;
    }
    header nav.open {
        max-height:min(520px,calc(100dvh - 78px));
        overflow-y:auto;
        opacity:1;
        visibility:visible;
        padding:17px 6% 23px;
        border-bottom:1px solid #c2a16b50;
    }
    header nav a {
        padding:14px 0;
        font-size:12px;
    }
    header nav a:after {
        right:auto;
        width:35px;
        bottom:9px;
    }
    .nav-cta {
        display:none;
    }
    .hero {
        min-height:630px;
        height:calc(100svh - 78px);
    }
    .footer-grid {
        gap:35px;
    }
    .ribbon {
        gap:17px;
        font-size:9px;
    }
}

@media(min-width:801px) and (max-width:980px) {
    .split {
        gap:40px;
    }
    .cards {
        gap:18px;
    }
    .card-body {
        padding:22px 18px;
    }
    .card h3 {
        font-size:24px;
    }
    .features {
        gap:28px;
    }
    .menu-grid {
        gap:25px;
    }
    .menu-group h2 {
        font-size:30px;
    }
}

@media(max-width:800px) {
    .hero-media {
        object-position:58% center;
    }
    .hero-content {
        padding:42px 6% 110px;
    }
    .hero h1 {
        font-size:clamp(40px,10.2vw,64px);
        max-width:100%;
    }
    .hero-bottom {
        gap:12px;
    }
    .hero-bottom span {
        max-width:70%;
    }
    .hero:after {
        background:linear-gradient(90deg,#0e1715ed,#1017158f);
    }
    .card img {
        height:auto;
        max-height:350px;
        aspect-ratio:1.4;
    }
    .card-body {
        padding:24px;
    }
    .closing {
        padding-bottom:85px;
    }
    .quick-contact {
        right:14px;
        bottom:18px;
        gap:10px;
    }
    .quick-contact>a {
        width:48px;
        height:48px;
    }
    .quick-contact span {
        display:none;
    }
    .footer-bottom {
        padding-right:52px;
    }
    .footer-grid .brand {
        font-size:21px;
    }
    .section-heading h2 {
        overflow-wrap:anywhere;
    }
    summary {
        font-size:22px;
    }
}

@media(max-width:380px) {
    header .brand {
        font-size:17px;
        gap:8px;
    }
    .brand img.brand-icon {
        width:36px;
        height:36px;
        flex-basis:36px;
    }
    .brand small {
        font-size:7px;
        letter-spacing:1.6px;
    }
    .hero h1 {
        font-size:42px;
    }
    .hero .actions {
        gap:10px;
    }
    .hero .button {
        font-size:12px;
        padding:12px 17px;
    }
    .form-row {
        grid-template-columns:1fr;
    }
    .planner {
        padding:21px;
    }
    .page-hero h1 {
        font-size:42px;
    }
    .filters button {
        padding:10px 18px;
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        transition:none!important;
        scroll-behavior:auto!important;
    }
}