/* MİRAY SERAMİK — mirayseramik.com
   Tek dosya stil. Derleme adımı yok; herhangi bir paylaşımlı hostingde çalışır. */

:root{
  --kagit:#FAF8F5;
  --kagit-2:#F1ECE5;
  --koyu:#17191D;
  --koyu-2:#22252B;
  --metin:#2A2D33;
  --soluk:#6B7078;
  --cizgi:#E2DCD3;
  --cizgi-koyu:#33373E;
  --vurgu:#C2410C;
  --vurgu-acik:#EA6A2E;
  --ok:#15803D;
  --golge:0 1px 2px rgba(23,25,29,.05), 0 8px 24px rgba(23,25,29,.06);
  --golge-kart:0 1px 3px rgba(23,25,29,.08), 0 12px 32px rgba(23,25,29,.08);
  --yuvarlak:14px;
  --en:1180px;
  --serif:"Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--kagit); color:var(--metin);
  font-family:var(--sans); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}

h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.15; margin:0; color:var(--koyu); letter-spacing:-.015em;}
h1{font-size:clamp(2.1rem, 6vw, 3.9rem);}
h2{font-size:clamp(1.6rem, 4vw, 2.5rem);}
h3{font-size:1.15rem; letter-spacing:-.01em;}
p{margin:0 0 1em;}

.sar{max-width:var(--en); margin:0 auto; padding:0 22px;}
.bolum{padding:76px 0;}
.bolum-koyu{background:var(--koyu); color:#D8DCE2;}
.bolum-koyu h2, .bolum-koyu h3{color:#fff;}
.bolum-kagit2{background:var(--kagit-2);}

.etiket{
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vurgu); margin:0 0 14px;
}
.bolum-koyu .etiket{color:var(--vurgu-acik);}
.lede{font-size:1.08rem; color:var(--soluk); max-width:60ch;}
.bolum-koyu .lede{color:#A7AEB8;}

/* ---- Düğmeler ---- */
.dugme{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  padding:14px 26px; border-radius:10px; font-weight:600; font-size:15.5px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space:nowrap;
}
.dugme:hover{transform:translateY(-1px);}
.dugme-ana{background:var(--vurgu); color:#fff; box-shadow:0 4px 14px rgba(194,65,12,.28);}
.dugme-ana:hover{background:#A8380B;}
.dugme-cizgi{border-color:var(--cizgi); background:#fff; color:var(--koyu);}
.bolum-koyu .dugme-cizgi{border-color:var(--cizgi-koyu); background:transparent; color:#fff;}
.dugme-wa{background:#25D366; color:#0B2E17; box-shadow:0 4px 14px rgba(37,211,102,.3);}
.dugme-wa:hover{background:#1EBE5A;}

/* ---- Üst çubuk ---- */
.ust{
  position:sticky; top:0; z-index:60; background:rgba(250,248,245,.86);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--cizgi);
}
.ust .sar{display:flex; align-items:center; gap:18px; height:70px;}
.marka{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto;}
.marka-im{
  width:38px; height:38px; border-radius:9px; flex:none;
  object-fit:cover;
}
.marka-ad{font-family:var(--serif); font-weight:700; font-size:19px; color:var(--koyu); line-height:1.1;}
.marka-alt{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--soluk); font-weight:600;}
.gezinti{display:flex; gap:4px; align-items:center;}
.gezinti a{
  text-decoration:none; color:var(--metin); font-weight:550; font-size:15px;
  padding:9px 13px; border-radius:8px;
}
.gezinti a:hover{background:var(--kagit-2); color:var(--koyu);}
.gezinti a.acik{color:var(--vurgu);}
.ust .dugme{padding:10px 18px; font-size:14.5px;}
.menu-dugme{display:none; background:none; border:1px solid var(--cizgi); border-radius:9px; padding:9px 11px; cursor:pointer;}
.menu-dugme span{display:block; width:19px; height:2px; background:var(--koyu); border-radius:2px;}
.menu-dugme span + span{margin-top:4.5px;}

/* ---- Kahraman ---- */
.kahraman{position:relative; background:var(--koyu); color:#fff; overflow:hidden;}
.kahraman-fon{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.46; filter:saturate(.9);
}
.kahraman-perde{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(23,25,29,.94) 0%, rgba(23,25,29,.74) 46%, rgba(23,25,29,.42) 100%);
}
.kahraman .sar{position:relative; padding-top:96px; padding-bottom:96px;}
.kahraman h1{color:#fff; max-width:16ch;}
.kahraman .lede{color:#C6CCD4; font-size:1.16rem; margin-top:20px; max-width:52ch;}
.kahraman-eylem{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px;}
.kahraman-not{margin-top:26px; font-size:14px; color:#8D949E;}

/* ---- Rakam şeridi ---- */
.serit{border-top:1px solid var(--cizgi-koyu); background:var(--koyu-2);}
.serit-ic{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--cizgi-koyu);}
.serit-h{background:var(--koyu-2); padding:26px 22px; text-align:center;}
.serit-h .s{font-family:var(--serif); font-size:1.9rem; font-weight:600; color:#fff; line-height:1.1;}
.serit-h .a{font-size:12.5px; color:#9AA1AB; margin-top:5px;}

/* ---- Kart ızgaraları ---- */
.izgara{display:grid; gap:22px;}
.izgara-2{grid-template-columns:repeat(2,1fr);}
.izgara-3{grid-template-columns:repeat(3,1fr);}
.izgara-4{grid-template-columns:repeat(4,1fr);}

.kart{
  background:#fff; border:1px solid var(--cizgi); border-radius:var(--yuvarlak);
  padding:28px; box-shadow:var(--golge);
}
.bolum-koyu .kart{background:var(--koyu-2); border-color:var(--cizgi-koyu);}
.kart h3{margin-bottom:9px;}
.kart p{color:var(--soluk); font-size:15.2px; margin:0;}
.bolum-koyu .kart p{color:#9AA1AB;}
.kart-im{
  width:44px; height:44px; border-radius:11px; background:var(--kagit-2);
  display:grid; place-items:center; margin-bottom:16px; font-size:21px;
}
.bolum-koyu .kart-im{background:#2C3037;}

/* ---- Adımlar ---- */
.adim{display:flex; gap:18px; align-items:flex-start;}
.adim-no{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--vurgu); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:15px; font-family:var(--sans);
}
.adim h3{margin-bottom:5px;}
.adim p{color:var(--soluk); font-size:15px; margin:0;}

/* ---- Desen kartları ---- */
.desenler{display:grid; grid-template-columns:repeat(auto-fill, minmax(168px,1fr)); gap:16px;}
.desen{
  border:1px solid var(--cizgi); border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:var(--golge); transition:transform .14s ease, box-shadow .14s ease;
}
.desen:hover{transform:translateY(-3px); box-shadow:var(--golge-kart);}
.desen-foto{aspect-ratio:1/2; background:var(--kagit-2); overflow:hidden;}
.desen-foto img{width:100%; height:100%; object-fit:cover;}
.desen-bilgi{padding:11px 13px 13px;}
.desen-ad{font-weight:650; font-size:14.3px; color:var(--koyu); letter-spacing:-.005em; line-height:1.3;}
.desen-kat{font-size:11.5px; color:var(--soluk); margin-top:3px;}

/* ---- Filtre ---- */
.filtre{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:26px;}
.filtre button{
  border:1px solid var(--cizgi); background:#fff; color:var(--metin);
  padding:9px 16px; border-radius:999px; font-size:14.2px; font-weight:550;
  cursor:pointer; font-family:inherit; transition:all .12s ease;
}
.filtre button:hover{border-color:var(--soluk);}
.filtre button.acik{background:var(--koyu); border-color:var(--koyu); color:#fff;}
.ara{
  margin-left:auto; border:1px solid var(--cizgi); border-radius:999px;
  padding:10px 18px; font-size:15px; font-family:inherit; background:#fff; min-width:210px;
  color:var(--metin);
}
.ara:focus{outline:2px solid var(--vurgu); outline-offset:1px;}
.sonuc-not{color:var(--soluk); font-size:14.5px; margin:0 0 20px;}

/* ---- İletişim ---- */
.iletisim-izgara{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start;}
.iletisim-liste{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:18px;}
.iletisim-liste li{display:flex; gap:14px; align-items:flex-start;}
.iletisim-im{
  flex:none; width:40px; height:40px; border-radius:10px; background:#2C3037;
  display:grid; place-items:center; font-size:18px;
}
.iletisim-liste .k{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8D949E; font-weight:600;}
.iletisim-liste .d{font-size:17px; color:#fff; font-weight:550; text-decoration:none;}
.iletisim-liste .d:hover{color:var(--vurgu-acik);}
.iletisim-liste .bos{font-size:15px; color:#7B828C; font-style:italic;}

/* ---- Alt bilgi ---- */
.alt{background:var(--koyu); color:#7B828C; border-top:1px solid var(--cizgi-koyu); padding:38px 0; font-size:14px;}
.alt-ic{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center;}
.alt a{color:#A7AEB8; text-decoration:none;}
.alt a:hover{color:#fff;}

/* ---- Sabit WhatsApp ---- */
.wa-sabit{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; box-shadow:0 6px 22px rgba(37,211,102,.42);
  text-decoration:none; transition:transform .14s ease;
}
.wa-sabit:hover{transform:scale(1.06);}
.wa-sabit svg{width:29px; height:29px; fill:#fff;}

/* ---- Mobil ---- */
@media (max-width:960px){
  .izgara-4{grid-template-columns:repeat(2,1fr);}
  .izgara-3{grid-template-columns:repeat(2,1fr);}
  .iletisim-izgara{grid-template-columns:1fr; gap:34px;}
  .serit-ic{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .bolum{padding:54px 0;}
  .gezinti{
    display:none; position:absolute; top:70px; left:0; right:0;
    background:var(--kagit); border-bottom:1px solid var(--cizgi);
    flex-direction:column; align-items:stretch; padding:10px 14px 16px; gap:2px;
    box-shadow:var(--golge);
  }
  .gezinti.acik-menu{display:flex;}
  .gezinti a{padding:13px 12px; font-size:16px;}
  .menu-dugme{display:block;}
  .ust .dugme{display:none;}
  .marka-alt{display:none;}
  .kahraman .sar{padding-top:62px; padding-bottom:62px;}
  .izgara-2, .izgara-3, .izgara-4{grid-template-columns:1fr;}
  .desenler{grid-template-columns:repeat(2,1fr); gap:12px;}
  .ara{margin-left:0; width:100%; min-width:0;}
  .filtre{gap:7px;}
  .filtre button{padding:8px 13px; font-size:13.5px;}
  .kart{padding:22px;}
  .alt-ic{flex-direction:column; align-items:flex-start; gap:10px;}

  /* Parmakla rahat basılsın: küçük metin bağlantılarına dokunma alanı verilir */
  .menu-dugme{padding:12px 13px;}
  /* Alt alta düşen düğmeler eşit genişlikte dursun */
  .kahraman-eylem{flex-direction:column; align-items:stretch;}
  .kahraman-eylem .dugme{width:100%;}
  .alt-ic > div:last-child{display:flex; flex-wrap:wrap; gap:2px 4px;}
  .alt a{display:inline-block; padding:9px 4px;}
  .iletisim-liste .d{display:inline-block; padding:5px 0;}
  .wa-sabit{width:60px; height:60px; right:14px; bottom:14px;}
}