/* Sedef Boya — site stilleri */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(../fonts/barlow-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(../fonts/barlow-400-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(../fonts/barlow-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(../fonts/barlow-500-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(../fonts/barlow-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(../fonts/barlow-600-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --lacivert: #1b2a6b;
    --lacivert-koyu: #121d4d;
    --sari: #ffd200;
    --bordo: #8e2430;
    --murekkep: #1e2333;
    --gri-metin: #545b6e;
    --cizgi: #d9dce5;
    --zemin-gri: #f1f2f5;
    --beyaz: #ffffff;

    --yazi-govde: "Barlow", system-ui, sans-serif;
    --yazi-baslik: "Barlow Condensed", "Arial Narrow", sans-serif;

    --kap: 1180px;
    --bosluk: clamp(1rem, 4vw, 2rem);
    --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--beyaz);
    color: var(--murekkep);
    font: 400 1.0625rem/1.6 var(--yazi-govde);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lacivert); }
a:hover { color: var(--bordo); }
:focus-visible { outline: 3px solid var(--lacivert); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--yazi-baslik); font-weight: 700; line-height: 1.05; margin: 0; color: var(--lacivert); }
p { margin: 0 0 1em; }

.kap { width: 100%; max-width: var(--kap); margin-inline: auto; padding-inline: var(--bosluk); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--lacivert); color: var(--beyaz); }
.atla:focus { top: 1rem; }

/* Düğmeler */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3rem; padding: .7rem 1.4rem;
    border: 2px solid var(--lacivert); border-radius: var(--radius);
    font: 600 1.05rem/1.2 var(--yazi-govde); text-decoration: none; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.dugme--koyu { background: var(--lacivert); color: var(--beyaz); }
.dugme--koyu:hover { background: var(--lacivert-koyu); color: var(--sari); }
.dugme--cizgi { background: transparent; color: var(--lacivert); }
.dugme--cizgi:hover { background: var(--lacivert); color: var(--beyaz); }
.dugme[disabled] { opacity: .6; cursor: progress; }

/* Üst bar */
.ust { position: sticky; top: 0; z-index: 50; background: var(--beyaz); border-bottom: 1px solid var(--cizgi); }
.ust__ic { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.75rem; }
.ust__logo img { width: 150px; height: auto; }
.ust__menu { display: flex; align-items: center; gap: 2rem; }
.ust__menu ul { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.ust__menu ul a { font: 600 1.15rem/1 var(--yazi-baslik); color: var(--murekkep); text-decoration: none; padding: .5rem 0; border-bottom: 3px solid transparent; }
.ust__menu ul a:hover, .ust__menu ul a[aria-current] { border-bottom-color: var(--sari); color: var(--lacivert); }
.ust__tel { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: var(--radius); background: var(--sari); color: var(--lacivert); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ust__tel:hover { background: var(--lacivert); color: var(--sari); }
.ust__menu-dugme { display: none; padding: .5rem; border: 0; background: none; color: var(--lacivert); cursor: pointer; }

@media (max-width: 860px) {
    .ust__menu-dugme { display: block; }
    .ust__menu {
        display: none; position: absolute; inset: 100% 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: .5rem var(--bosluk) 1.25rem; background: var(--beyaz); border-bottom: 1px solid var(--cizgi);
    }
    .ust__menu.acik { display: flex; }
    .ust__menu ul { flex-direction: column; gap: 0; }
    .ust__menu ul a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--cizgi); }
    .ust__tel { margin-top: 1rem; justify-content: center; padding: .9rem; }
}

/* Giriş: sitenin tek gösterişli bölümü */
.giris { position: relative; background: var(--sari); overflow: hidden; }
.giris__ic {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}
.giris__yer { font-weight: 600; color: var(--lacivert); margin-bottom: 1.25rem; }
.giris__baslik {
    font-size: clamp(3rem, 7.2vw, 6.25rem); line-height: .92; letter-spacing: -.01em;
    max-width: 13ch; margin-bottom: 1.75rem; text-wrap: balance;
}
.giris__alt { font-size: 1.2rem; max-width: 34em; color: var(--murekkep); margin-bottom: 2rem; }
.giris__eylem { display: flex; flex-wrap: wrap; gap: .75rem; }
.giris .dugme--cizgi:hover { color: var(--sari); }
.giris__foto { margin: 0; position: relative; }
.giris__foto img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border: 6px solid var(--beyaz); box-shadow: 14px 14px 0 var(--lacivert);
    transform: rotate(1.5deg);
}
/* Renk kartelası şeridi: bayisi olunan markaların ve boyanın renkleri */
.giris__seritler { position: absolute; inset: auto 0 0 0; display: flex; height: 18px; }
.giris__seritler span { flex: 1; }
.giris__seritler span:nth-child(1) { background: #c8102e; }
.giris__seritler span:nth-child(2) { background: var(--lacivert); }
.giris__seritler span:nth-child(3) { background: #2e9fd8; }
.giris__seritler span:nth-child(4) { background: #f39200; }
.giris__seritler span:nth-child(5) { background: #5aa13a; }
.giris__seritler span:nth-child(6) { background: var(--bordo); }
.giris__seritler span:nth-child(7) { background: #8a8f9c; }

@media (max-width: 860px) {
    .giris__ic { grid-template-columns: 1fr; }
    .giris__foto { max-width: 560px; margin-right: 14px; }
}

/* Bölümler */
.bolum { padding-block: clamp(3.5rem, 8vw, 6rem); }
.bolum--sik { padding-block: 2.5rem 4rem; }
.bolum--gri { background: var(--zemin-gri); }
.bolum--sari { background: var(--sari); }
.bolum--lacivert { background: var(--lacivert); color: #e3e7f5; }
.bolum--lacivert .bolum__baslik { color: var(--beyaz); }
.bolum__baslik { font-size: clamp(2.25rem, 4.5vw, 3.25rem); margin-bottom: 1rem; }
.bolum__giris { max-width: 40em; color: var(--gri-metin); margin-bottom: 2.5rem; }

/* Markalar */
.markalar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.marka { display: flex; flex-direction: column; border: 1px solid var(--cizgi); border-radius: var(--radius); background: var(--beyaz); overflow: hidden; }
.marka img { width: 100%; height: 120px; object-fit: contain; padding: 1.25rem; }
.marka a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.marka__eylem, .marka__not { margin-top: auto; padding: .7rem 1rem; font-weight: 600; text-align: center; }
.marka__not { color: var(--gri-metin); border-top: 1px solid var(--cizgi); font-weight: 500; }
.marka__eylem { background: var(--lacivert); color: var(--beyaz); }
.marka--link { border-color: var(--lacivert); }
.marka--link a:hover .marka__eylem { background: var(--sari); color: var(--lacivert); }

@media (max-width: 960px) { .markalar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .markalar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marka img { height: 96px; padding: 1rem; } }

/* Hizmetler */
.hizmetler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 2rem; }
.hizmet { padding-top: 1.25rem; border-top: 4px solid var(--sari); }
.hizmet h3 { font-size: 1.9rem; color: var(--sari); margin-bottom: .75rem; }
.hizmet p { max-width: 34em; margin: 0; }
@media (max-width: 700px) { .hizmetler { grid-template-columns: 1fr; } }

/* Hakkımızda */
.hakkimizda { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.hakkimizda__metin p { max-width: 34em; }
.hakkimizda__imza { margin-top: 2rem; padding-left: 1rem; border-left: 4px solid var(--sari); font: 700 1.5rem/1.1 var(--yazi-baslik); color: var(--lacivert); }
.hakkimizda__imza span { display: block; margin-top: .35rem; font: 400 1rem/1.4 var(--yazi-govde); color: var(--gri-metin); }
.fotolar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
/* 8 fotoğraf 4 sütunu boşluksuz doldursun: ilki 2×2, sonuncusu 2 sütun */
.fotolar li:first-child { grid-column: span 2; grid-row: span 2; }
.fotolar li:last-child { grid-column: span 2; }
.fotolar li:last-child img { aspect-ratio: 8 / 3; }
.fotolar a { display: block; height: 100%; overflow: hidden; border-radius: 4px; }
.fotolar img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
.fotolar a:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .hakkimizda { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .fotolar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* İletişim */
.iletisim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); margin-top: 2rem; align-items: start; }
.kunye { display: grid; gap: 1rem; margin: 0 0 1.75rem; }
.kunye div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cizgi); }
.kunye dt { font-weight: 600; color: var(--gri-metin); }
.kunye dd { margin: 0; font-weight: 500; }
.kunye a { text-decoration: none; }
.harita { aspect-ratio: 16 / 10; background: var(--cizgi); border-radius: var(--radius); overflow: hidden; }
.harita iframe { width: 100%; height: 100%; border: 0; }
.yol-tarifi { display: inline-block; margin-top: .75rem; font-weight: 600; }

.form { background: var(--beyaz); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius); border-top: 6px solid var(--sari); }
.form h3 { font-size: 2rem; margin-bottom: .5rem; }
.form__aciklama { color: var(--gri-metin); margin-bottom: 1.5rem; }
.form__tuzak { position: absolute; left: -9999px; }
.alan { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.alan-cift { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.alan label { font-weight: 600; font-size: .98rem; }
.alan label span { font-weight: 400; color: var(--gri-metin); }
.alan input, .alan textarea {
    width: 100%; padding: .75rem .85rem; border: 1.5px solid #c3c8d4; border-radius: var(--radius);
    font: inherit; color: inherit; background: var(--beyaz);
}
.alan textarea { resize: vertical; min-height: 8rem; }
.alan input:focus, .alan textarea:focus { outline: none; border-color: var(--lacivert); box-shadow: 0 0 0 3px rgb(27 42 107 / .18); }
.alan [aria-invalid="true"] { border-color: var(--bordo); }
.alan__hata { color: var(--bordo); font-size: .95rem; font-weight: 500; }
.form__durum:empty { display: none; }
.form__durum { padding: .8rem 1rem; border-radius: var(--radius); font-weight: 500; }
.form__durum.basarili { background: #e5f4e8; color: #1d5b2c; }
.form__durum.hatali { background: #fbe9eb; color: var(--bordo); }
.cf-turnstile { margin-bottom: 1rem; }
@media (max-width: 900px) { .iletisim { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .alan-cift { grid-template-columns: 1fr; } }

/* Ürün sayfaları */
.urun-ust { background: var(--lacivert); color: #e3e7f5; }
.urun-ust__ic { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 2.5rem 3rem; }
.urun-ust__geri a { color: var(--sari); font-weight: 600; }
.urun-ust__baslik { font-size: clamp(2.5rem, 6vw, 4.25rem); color: var(--beyaz); margin: .25rem 0 .75rem; }
.urun-ust__giris { max-width: 38em; margin: 0; }
.urun-ust__logo { width: 220px; flex-shrink: 0; padding: 1rem 1.25rem; background: var(--beyaz); border-radius: var(--radius); }
@media (max-width: 700px) { .urun-ust__ic { flex-direction: column-reverse; align-items: flex-start; } .urun-ust__logo { width: 170px; } }

.urun-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.urun-ara input {
    width: min(26rem, 100%); padding: .75rem 1rem; border: 1.5px solid #c3c8d4; border-radius: var(--radius); font: inherit;
}
.urun-ara { flex: 1 1 18rem; }
.urun-ara input:focus { outline: none; border-color: var(--lacivert); box-shadow: 0 0 0 3px rgb(27 42 107 / .18); }
.urun-sayi { margin: 0; color: var(--gri-metin); font-weight: 500; }
.urunler { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 42vw), 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--cizgi); border-radius: var(--radius); overflow: hidden; }
.urun { display: flex; flex-direction: column; background: var(--beyaz); }
.urun[hidden] { display: none; }
.urun a { display: block; aspect-ratio: 1; padding: 1rem; }
.urun img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.urun a:hover img { transform: scale(1.05); }
.urun__ad { margin: 0; padding: 0 .75rem .85rem; font-size: .95rem; line-height: 1.3; text-align: center; color: var(--murekkep); }
.urun-bos { padding: 2rem 0; color: var(--gri-metin); }

.cagri { text-align: center; }
.cagri h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: .75rem; text-wrap: balance; }
.cagri .giris__eylem { justify-content: center; margin-top: 1.5rem; }

.sonuc { max-width: 40rem; }
.sonuc ul { color: var(--bordo); }

/* Görsel büyütme */
.isik { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(14 19 40 / .96); color: var(--beyaz); }
.isik::backdrop { background: transparent; }
.isik[open] { display: grid; place-items: center; }
.isik__cerceve { margin: 0; display: grid; justify-items: center; gap: 1rem; padding: 4rem 4.5rem 3.5rem; max-width: 100%; }
.isik__gorsel { max-width: min(1100px, 100%); max-height: calc(100dvh - 9rem); object-fit: contain; background: var(--beyaz); border-radius: 4px; }
.isik__baslik { font: 600 1.4rem/1.2 var(--yazi-baslik); text-align: center; min-height: 1.2em; }
.isik__dugme { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: var(--beyaz); cursor: pointer; }
.isik__dugme:hover { background: var(--sari); color: var(--lacivert); }
.isik__kapat { top: 1rem; right: 1rem; }
.isik__onceki { left: 1rem; top: 50%; translate: 0 -50%; }
.isik__sonraki { right: 1rem; top: 50%; translate: 0 -50%; }
.isik__sayac { position: absolute; top: 1.6rem; left: 1.25rem; margin: 0; font-weight: 500; opacity: .8; }
@media (max-width: 600px) {
    .isik__cerceve { padding: 4rem .75rem 5.5rem; }
    .isik__onceki, .isik__sonraki { top: auto; bottom: 1.25rem; translate: none; }
    .isik__onceki { left: calc(50% - 3.5rem); }
    .isik__sonraki { right: calc(50% - 3.5rem); }
}

/* Alt bilgi */
.alt { background: var(--lacivert-koyu); color: #c3c9e0; font-size: .98rem; }
.alt__ic { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 2rem; padding-block: 2.5rem; }
.alt__logo { width: 120px; padding: .5rem .75rem; background: var(--beyaz); border-radius: var(--radius); }
.alt p { margin: 0; }
.alt a { color: var(--beyaz); text-decoration: none; }
.alt a:hover { color: var(--sari); }
.alt__telif { opacity: .75; }
@media (max-width: 860px) { .alt__ic { grid-template-columns: 1fr; gap: 1.25rem; } }

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