/*
Theme Name: Kamile Konmaz Beauty
Theme URI: https://kamilekonmazbeauty.com
Author: Emircan Dumoğlu
Author URI: https://emircandumoglu.com
Description: Kamile Konmaz Beauty için Hazırlanmış Özel Tasarım
Version: 2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kamilekonmazbeauty
Tags: beauty, spa, salon, responsive, clean
*/

/* -------------------------- */
/* 1) RESET (modern compact)  */
/* -------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  line-height: 1.15; /* better default */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; /* smooth anchor scroll */
}

body { margin: 0; }

main { display: block; }

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd { margin: 0; }

ul[role='list'],ol[role='list'] { list-style: none; margin:0; padding:0; }

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

img { border-style: none; display:block; max-width:100%; height:auto; }

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button,
[role="button"] { cursor: pointer; }

table { border-collapse: collapse; border-spacing: 0; }

::selection { background: rgba(184,156,104,.25); }

/* -------------------------- */
/* 2) TOKENS (variables)      */
/* -------------------------- */
:root{
  /* colors */
  --gold: rgba(184,156,104,1);
  --gold-soft: rgba(215,178,104,0.8);
  --gold-border: rgba(184,156,104,0.35);
  --text: rgba(43,43,43,1);
  --muted: rgba(122,122,122,1);
  --white: rgba(255,255,255,1);
  --black: rgba(0,0,0,1);
  --cream: rgba(246,239,234,1);

  /* spacing scale (8px grid) */
  --s-1: 4px;
  --s0: 8px;
  --s1: 12px;
  --s2: 16px;
  --s3: 20px;
  --s4: 24px;
  --s5: 28px;
  --s6: 32px;
  --s7: 40px;
  --s8: 48px;
  --s9: 64px;

  /* radius & shadow */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --shadow-md: 0 10px 28px rgba(0,0,0,.08);

  /* container */
  --container-w: 1100px;

  /* timing */
  --fast: 160ms;
  --norm: 220ms;
}

/* -------------------------- */
/* 3) BASE TYPOGRAPHY         */
/* -------------------------- */
body{
  font-family: "Arimo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3 { font-family: "Oswald", sans-serif; letter-spacing: 1.5px; }

.section-title{
  font-family:"Oswald",sans-serif;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size: 28px;
  color: var(--gold);
  text-align:center;
  margin-bottom: var(--s6);
}

/* -------------------------- */
/* 4) LAYOUT HELPERS          */
/* -------------------------- */
.container{ width: min(var(--container-w), 92%); margin-inline: auto; }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s1);
  background: var(--gold); color: var(--white);
  padding: 12px 18px; border-radius: 999px; font-weight: 700; letter-spacing: .5px;
  box-shadow: none; transition: filter var(--fast) ease, transform var(--fast) ease, box-shadow var(--fast) ease;
}
.btn-primary:hover{ filter: brightness(.96); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-outline{
  display:inline-block; padding: 8px 14px; border:1px solid var(--gold);
  border-radius: 999px; color: var(--gold);
}
.btn-outline:hover{ background: rgba(184,156,104,0.08); }

/* Visible focus for accessibility */
:focus-visible { outline: 3px solid rgba(184,156,104,.45); outline-offset: 2px; }

/* -------------------------- */
/* 5) HEADER (brand + nav)    */
/* -------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,.1);
}

/* Logo katmanı: menünün üstünde, scroll’da kapanır */
.brandbar{
  display:flex; align-items:center; justify-content:center;
  max-height: 120px; /* logo yüksekliği */
  overflow: hidden;
  transition: max-height 260ms ease, opacity 260ms ease, margin 260ms ease;
  padding-block: 10px;
}
.logo{ width: clamp(220px, 40vw, 600px); height:auto; }

/* Menü katmanı: sticky */
.site-nav{
  position: sticky; top: 0;
  background: var(--white);
}
.menu{
  list-style:none; display:flex; gap: 48px; margin:0; padding: 12px 0;
  justify-content:center; flex-wrap: wrap;
}
.menu a{
  color: var(--gold);
  font-family:"Oswald",sans-serif;
  text-transform:uppercase;
  letter-spacing: 1px;
  transition: color var(--fast) ease;
}
.menu a:hover{ color: rgba(0,0,0,.8); }

/* Header compact (scroll sonrası sadece logo kapanır) */
.site-header.compact .brandbar{ max-height: 0; opacity: 0; margin: 0; pointer-events: none; }

/* -------------------------- */
/* 6) HERO                    */
/* -------------------------- */
.hero{
  position: relative;
  min-height: 540px; height: 80vh;
  display:flex; align-items:center; justify-content:center;
  background: url('img/bg.jpg') center/cover no-repeat;
}
.hero__media{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.hero__overlay{ position:absolute; inset:0; background: rgba(0,0,0,0.7); z-index:1; }
.hero__media > img{ position:relative; z-index:2; max-width:80%; height:auto; }
.btn-cta{ position:absolute; z-index:3; left:50%; transform:translateX(-50%); bottom: 8vh; }

/* -------------------------- */
/* 7) HİZMETLER               */
/* -------------------------- */
.services{ padding-block: var(--s8); }
.services__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: var(--s5); justify-items:center;
}
.service{
  position:relative; width:100%; max-width:350px; min-height:350px;
  border: 1px solid var(--gold-border); border-radius: var(--radius-md);
  overflow:hidden; background: var(--white); cursor:pointer;
  transition: transform var(--norm) cubic-bezier(.2,.7,.2,1), box-shadow var(--norm) cubic-bezier(.2,.7,.2,1);
}
.service:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.service img{ width:100%; padding: var(--s5); transition: transform var(--norm) cubic-bezier(.2,.7,.2,1), filter var(--norm) cubic-bezier(.2,.7,.2,1); }
.service:hover img{ filter: brightness(.6); transform: scale(1.02); }

/* Hover title overlay */
.service-head{
  position:absolute; inset:0; height:0; overflow:hidden; z-index:2;
  background: rgba(215,178,104,0.72);
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  transition: height var(--norm) cubic-bezier(.2,.7,.2,1);
}
.service-head h3{
  margin:0; font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing: 2.5px; color: rgba(255,255,255,.96); font-size: 20px;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.service:hover .service-head{ height:100%; }

/* -------------------------- */
/* 8) BİZ KİMİZ               */
/* -------------------------- */
.kkb-about{ padding-block: var(--s8); background: var(--white); }
.kkb-sep{ width:80px; height:2px; background: rgba(184,156,104,.25); margin: 0 auto var(--s4); }
.kkb-intro{ max-width: 720px; margin: 0 auto var(--s7); text-align:center; }
.kkb-team{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--s5); }
.kkb-card{
  border: 1px solid var(--gold-border); border-radius: var(--radius-md);
  padding: 20px 18px 22px; background: var(--white);
  transition: transform var(--norm) cubic-bezier(.2,.7,.2,1), box-shadow var(--norm) cubic-bezier(.2,.7,.2,1);
}
.kkb-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.kkb-avatar{ width:96px; height:96px; margin: 12px auto 14px; border-radius:50%; background: var(--cream); overflow: hidden; }
.kkb-name{ margin: 6px 0 2px; font-size: 18px; }
.kkb-role{ margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.kkb-social a{ color: var(--gold); font-size: 14px; }
.kkb-social a:hover{ text-decoration: underline; }
.kkb-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------- */
/* 9) FİYATLAR (Accordion)    */
/* -------------------------- */
.prices{ padding-block: var(--s8); background: var(--white); }

/* accordion shell */
.acc{
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--s3);
  overflow: hidden;
  background: var(--white);
}

/* clickable head */
.acc__head{
  width:100%; text-align:left; padding: 14px 16px; background: var(--white);
  display:flex; align-items:center; justify-content:space-between;
  font-family:"Oswald",sans-serif; letter-spacing:1px; color: var(--gold); font-size:18px;
  transition: background var(--fast) ease;
}
.acc__head:hover{ background: rgba(184,156,104,0.06); }
.acc__head::after{ content: '+'; font-weight: 700; }
.acc__head.is-open::after{ content: '–'; }

/* panel */
.acc__panel{
  max-height: 0; overflow: hidden; transition: max-height var(--norm) ease;
  background: var(--white);
}

/* price list rows */
.price-list{ list-style:none; margin:0; padding: 12px 16px; }
.price-list li{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 0; border-bottom: 1px dashed var(--gold-border);
}
.price-list li:last-child{ border-bottom: 0; }

/* -------------------------- */
/* 10) İLETİŞİM               */
/* -------------------------- */
.contact{ padding-block: var(--s8); }
.contact__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--s5); align-items:start; }

.contact__form{
  border: 1px solid var(--gold-border); border-radius: var(--radius-md);
  padding: var(--s4);
}
.form-row{ display:flex; flex-direction:column; gap: var(--s1); margin-bottom: var(--s3); text-align:left; }
label{ font-weight:600; font-size:14px; color: var(--text); }
input, select, textarea{
  border:1px solid rgba(0,0,0,.15); border-radius: var(--radius-sm); padding: 12px;
  background: var(--white);
}
input:focus, select:focus, textarea:focus{
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,156,104,.15);
}

.socials{ display:flex; gap: var(--s2); margin-top: var(--s2); }
.socials a{
  display:inline-flex; align-items:center; gap: var(--s1);
  padding: 8px 12px; border:1px solid var(--gold-border);
  border-radius: 999px; color: var(--gold);
}
.socials a:hover{ background: rgba(184,156,104,0.08); }

/* map */
.contact__map .map-wrap{
  position:relative; width:100%; height:360px; border:1px solid var(--gold-border);
  border-radius: var(--radius-md); overflow:hidden;
}
.map-pin{ position:absolute; left:50%; top:50%; transform: translate(-50%,-55%); width:32px; height:32px; z-index:2; pointer-events:none; }
.address,.phone,.route{ text-align:center; margin-top: var(--s2); }

/* -------------------------- */
/* 11) FOOTER                 */
/* -------------------------- */
.site-footer{ border-top:1px solid rgba(0,0,0,.08); padding-block: var(--s5); color: var(--muted); text-align:center; }

/* -------------------------- */
/* 12) RESPONSIVE             */
/* -------------------------- */
@media (max-width: 1100px){
  .logo{ width: 360px; }
}
@media (max-width: 1024px){
  .menu{ gap: 28px; }
  .contact__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .section-title{ font-size: 26px; }
  .logo{ width: 260px; }
  .btn-cta{ bottom: 12vh; padding: 10px 18px; }
}

/* -------------------------- */
/* 13) MOTION PREFERENCES     */
/* -------------------------- */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* -------------------------- */
/* 14) PRINT (minimal)        */
/* -------------------------- */
@media print{
  .site-header, .hero, .services .service img, .contact__map, .btn-primary, .btn-outline { display:none !important; }
  .section-title{ color: var(--black); }
  .price-list li{ border-color: rgba(0,0,0,.2); }
}
/* Page hero başlığı */
.hero--page{
  position: relative;
  min-height: 360px;
  height: 48vh;
  display:flex; align-items:center; justify-content:center;
  background: center/cover no-repeat;
}
.page-title{
  position: relative; z-index: 2;
  margin: 0;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: clamp(26px, 4vw, 40px);
  color: rgba(255,255,255,.98);
  text-align:center;
}

/* İçerik tipografisi */
.page-section{ padding-block: 64px; }
.page-article{ max-width: 840px; margin: 0 auto; }
.page-intro{ font-size: 18px; line-height: 1.8; color: rgba(43,43,43,.9); margin-bottom: 24px; }
.page-content{ font-size: 16px; line-height: 1.8; }
.page-content h2, .page-content h3{
  font-family: "Oswald", sans-serif;
  color: var(--gold);
  letter-spacing: 1px;
  margin: 28px 0 12px;
}
.page-content p{ margin: 0 0 16px; }
.page-content ul, .page-content ol{ padding-left: 18px; margin: 0 0 16px; }
.page-content a{ color: var(--gold); text-decoration: underline; }
.page-content a:hover{ text-decoration: none; }
.page-cta{ margin-top: 28px; text-align: center; }

/* Basit 404 Tasarımı */
.kkb-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-color: #fff;
  color: #3b2b1f;
  padding: 60px 20px;
}

.kkb-404-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(72px, 10vw, 120px);
  color: #c6a567;
  margin-bottom: 10px;
}

.kkb-404-text {
  font-size: 18px;
  color: #4b3a28;
  margin-bottom: 24px;
  line-height: 1.6;
}

.kkb-404-btn {
  display: inline-block;
  background-color: #c6a567;
  color: #fff;
  padding: 12px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.kkb-404-btn:hover {
  background-color: #b08c4e;
}


/* Admin bar açıkken sticky header offset'i düzelt */
@media (min-width: 783px){
  body.admin-bar .site-nav{ top:32px; }
  body.admin-bar .site-header{ top:0; }
}
@media (max-width: 782px){
  body.admin-bar .site-nav{ top:46px; }
}