/* =========================================

   KALAARANG • Premium Portfolio CSS

   ========================================= */



:root{

  --bg:#ffffff;

  --text:#111;

  --muted:rgba(0,0,0,0.65);

  --border:rgba(0,0,0,0.1);

  --shadow:0 10px 25px rgba(0,0,0,0.06);

}



*{ box-sizing:border-box; }



html,body{

  margin:0;

  padding:0;

  background:var(--bg);

  color:var(--text);

  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

}



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



.page{ padding-bottom:60px; }



/* ================= TOP NAV ================= */



.top-nav{

  position: sticky;

  top: 0;

  z-index: 99999;

  background: rgba(255,255,255,0.95);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--border);

}



.nav-inner{

  width:min(1200px,92vw);

  margin:0 auto;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:14px 0;

}



/* Logo */

.logo img{

  display:block;

  max-width:200px;

  height:auto;

}



/* Menu */

.menu{

  display:flex;

  gap:18px;

}



.menu a{

  font-size:14px;

  font-weight:600;

  color:rgba(0,0,0,0.75);

  padding:8px 12px;

  border-radius:999px;

  transition:all .2s ease;

}



.menu a:hover{ background:rgba(0,0,0,0.08); }



/* ================= HAMBURGER ================= */



.hamburger{

  display:none;

  flex-direction:column;

  justify-content:space-between;

  width:26px;

  height:18px;

  background:none;

  border:none;

  cursor:pointer;

  padding:0;

}



.hamburger span{

  display:block;

  height:3px;

  width:100%;

  background:#222;

  border-radius:2px;

  transition:all .3s ease;

}



/* ================= MOBILE NAV ================= */



@media (max-width:900px){



  .menu{

    position:absolute;

    top:70px;

    right:0;

    background:#fff;

    width:100%;

    max-height:0;

    overflow:hidden;

    flex-direction:column;

    transition:max-height .3s ease;

    box-shadow:0 10px 20px rgba(0,0,0,0.08);

  }



  .menu.open{

    max-height:350px;

  }



  .menu a{

    padding:15px 20px;

    border-bottom:1px solid #eee;

  }



  .hamburger{

    display:flex;

  }

}



/* ================= INTRO ================= */



.intro{

  width:min(1200px,92vw);

  margin:0 auto;

  padding:28px 0 18px;

}



.intro h1{

  margin:0;

  font-size:34px;

  letter-spacing:-0.5px;

}



.intro p{

  margin:8px 0 0;

  color:var(--muted);

  font-size:14px;

}



/* ================= GRID ================= */



.grid{

  width:min(1200px,92vw);

  margin:0 auto;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:22px;

  padding-top:14px;

}



@media(max-width:980px){

  .grid{ grid-template-columns:repeat(2,1fr); }

}



@media(max-width:560px){

  .grid{ grid-template-columns:1fr; }

}



/* ================= CARDS ================= */



.card-link{

  position:relative;

  display:block;

  border-radius:18px;

  overflow:hidden;

  background:#f3f3f3;

  box-shadow:var(--shadow);

}



.card-link img{

  width:100%;

  height:320px;

  object-fit:cover;

  display:block;

  transition:transform .35s ease;

}



.card-link:hover img{ transform:scale(1.03); }



.overlay{

  position:absolute;

  inset:0;

  display:flex;

  align-items:flex-end;

  padding:18px;

  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));

  opacity:0;

  transition:opacity .25s ease;

}



.card-link:hover .overlay{ opacity:1; }



.overlay-title{

  color:#fff;

  font-weight:600;

  font-size:15px;

}



/* ================= ART PAGE ================= */



.art-page{

  width:min(1200px,92vw);

  margin:0 auto;

  padding:22px 0 0;

}



.art-layout{

  display:grid;

  grid-template-columns:1.45fr 1fr;

  gap:32px;

}



@media(max-width:900px){

  .art-layout{ grid-template-columns:1fr; }

}



.art-image img {

  width: 100%;

  max-height: 80vh;

  object-fit: contain;

  border-radius: 18px;

  box-shadow: 0 12px 26px rgba(0,0,0,0.12);

}


.art-info h1{

  margin:0 0 12px;

  font-size:30px;

}



.art-desc{

  font-size:16px;

  line-height:1.55;

  color:rgba(0,0,0,0.75);

  margin-bottom:20px;

  white-space:pre-line;

}



/* ================= BUTTONS ================= */



.btn-whatsapp{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:12px 20px;

  background:#25D366;

  color:#fff;

  border-radius:999px;

  font-weight:700;

  font-size:14px;

  box-shadow:0 10px 20px rgba(0,0,0,0.1);

}



.btn-whatsapp:hover{

  transform:translateY(-1px);

  opacity:.95;

}



/* ================= SHARE ================= */



.share-box{

  margin-top:25px;

  display:flex;

  gap:12px;

  flex-wrap:wrap;

  font-size:14px;

}



.share-box span{

  font-weight:700;

  color:rgba(0,0,0,0.7);

}



.share-box a{

  padding:8px 14px;

  border-radius:999px;

  background:rgba(0,0,0,0.06);

  font-weight:600;

}



/* ================= CONTACT ================= */



.contact-page{

  width:min(1200px,92vw);

  margin:0 auto;

  padding:40px 20px;

  text-align:center;

}



form{

  max-width:600px;

  margin:0 auto;

  background:#f9f9f9;

  padding:30px;

  border-radius:8px;

  box-shadow:0 0 15px rgba(0,0,0,.1);

}



input,textarea{

  width:100%;

  padding:12px;

  margin-bottom:20px;

  border:1px solid #ddd;

  border-radius:6px;

  font-size:16px;

}



/* ================= FLOATING WHATSAPP ================= */



.floating-whatsapp{

  position:fixed;

  bottom:20px;

  right:20px;

  background:#25D366;

  color:white;

  padding:12px 18px;

  border-radius:50%;

  box-shadow:0 4px 8px rgba(0,0,0,0.2);

  font-size:24px;

  z-index:9999;

}

.top-nav {

  overflow: visible;

}



.menu {

  z-index: 9999999 !important;

}

/* ================= FOLLOW US ================= */

.follow-us {
  margin-top: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
}

.follow-us span {
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
}

.follow-us a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.follow-us img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 32px;
  max-height: 32px;
}

.follow-us a:hover img {
  opacity: 0.8;
}

/* ================= PIN IT BUTTON FIX ================= */



.pin-it-button {

  margin-top: 12px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 14px;

  font-weight: 700;

  padding: 10px 18px;

  border-radius: 999px;

  background: #E60023;

  color: #fff;

  box-shadow: 0 6px 14px rgba(0,0,0,0.15);

  transition: 0.2s ease;

  border: none;

  cursor: pointer;

}



.pin-it-button:hover {

  transform: translateY(-1px);

  opacity: 0.92;

}



.pin-it-button img,

.pin-it-button svg {

  width: 16px;

  height: 16px;

}

/* ================= PRODUCT PAGE VERTICAL LAYOUT ================= */



.art-layout.vertical {

  display: flex;

  flex-direction: column;

  gap: 26px;

  max-width: 900px;

  margin: 0 auto;

}



/* Make image visually dominant */

.art-layout.vertical .art-image img {

  width: 100%;

  max-height: 600px;

  object-fit: cover;

  border-radius: 18px;

}



/* Better text readability */

.art-layout.vertical .art-info {

  max-width: 720px;

}



/* Center pin-it button */

.art-layout.vertical .pin-it-button {

  align-self: flex-start;

  margin-top: 12px;

}


.floating-actions {

  position: fixed;

  right: 18px;

  bottom: 20px;

  display: flex;

  flex-direction: column;

  gap: 12px;

  z-index: 99999;

}



.fab {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: none;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  cursor: pointer;

  box-shadow: 0 6px 14px rgba(0,0,0,0.18);

}



.fab.whatsapp { background: #25D366; color: #fff; }

.fab.pin { background: #E60023; color: #fff; }

.fab.share { background: #111; color: #fff; }